前端技术文章
-
从一个面板尺寸越改越抖的实际场景出发，定位 ResizeObserver 反复触发的回路，区分布局读取与写入边界，并用稳定尺寸和帧内合并完成验证。346 收藏 -
用 CSS animation-timeline 和 scroll() 把滚动容器进度映射到阅读进度条，说明 scroller、滚动轴、关键帧、降级方案和不生效排查顺序。346 收藏 -
用 CSS anchor positioning 将提示框绑定到按钮，说明 anchor-name、position-anchor、position-area 的组合方式，以及浏览器回退、边界翻转和重复组件的处理方法。344 收藏 -
Vite 路由使用动态 import 后首屏仍然偏大，通常不是分包失效，而是入口静态依赖、共享依赖或 CSS 仍被首屏带入。本文用构建 manifest 和模块边界逐层定位原因。343 收藏 -
fetchpriority 是浏览器的图片获取优先级提示。本文说明如何识别首屏关键图片，只给 LCP 候选设置 high，并处理 lazy、CSS 背景、preload、srcset 与验证边界。343 收藏 -
ResizeObserver 循环通知通常来自回调修改了被观察尺寸。本文按读取、去重、帧合并和生命周期清理的顺序，给出切断布局反馈环的实用修复方式。342 收藏 -
用 Intl.Locale.getWeekInfo 读取地区的首日、周末日和最小周数规则，解决 Date.getDay 编号差异与旧浏览器兼容问题。342 收藏 -
WebSocket close code 排查不要只盯着数字：浏览器主动关闭只能使用 1000 或 3000–4999，1006 等保留码只表示观测到的异常；结合 reason、wasClean、readyState 和重连退避，才能定位协议、消息大小、服务端和网络问题。341 收藏 -
JavaScript Range.comparePoint 返回 -1、0、1，用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。341 收藏 -
这是 TypeScript 14 年来最大的一次变革。不是语法变了，不是 API 变了——是编译器本身被换掉了。一、125 秒 → 10 秒，这 10 倍速从哪来的？先看一组数据。2026 年 7 月 9 日，微软正式发布 TypeScript 7.0。官方博客放出了一组基准测试：代码库代码量TS340 收藏 -
CSS :has() 让父元素可以根据子元素状态切换样式，适合表单错误提示、选中卡片和条件高亮。文章用 :user-invalid、:checked 与 @supports 说明最小写法、边界和旧浏览器降级。340 收藏 -
用浏览器原生 Popover API 做一个键盘可用的操作菜单，覆盖 popovertarget、自动关闭、焦点回收、toggle 事件和不支持浏览器的降级方案。340 收藏 -
用 JavaScript URLPattern 声明带命名参数的路径，区分 test 与 exec 的用途，读取 pathname.groups，并处理正则约束、斜杠、主机和大小写边界。340 收藏 -
Fetch API 的 Response.json() 失败后不能直接再读同一个响应体。本文用 text() 与 clone() 解释 bodyUsed 边界，并给出保留原始文本、记录状态码和控制日志内容的实用写法。339 收藏 -
讲清 HTML dialog 模态关闭后读取 returnValue 的正确时机，比较 close(value)、按钮 value 与 method=dialog，并处理 Esc 取消和旧值残留问题。339 收藏