前端技术文章
-
前端组件同时监听 window、document 和局部 DOM 节点时，手动保存回调并逐个 removeEventListener 容易漏清理。本文用 addEventListener 的 signal 选项把多个监听器绑定到同一个 AbortController，在组件销毁时调用一次 abort() 统一回收，并说明 capture、once、passive 和已终止 signal 的边界。376 收藏 -
用 navigator.locks.query() 读取 Web Locks 的 held 与 pending 快照，理解 name、mode、clientId，并处理安全上下文和异常边界。467 收藏 -
前端多标签页同步主题、登录态提示或草稿状态时，可以监听 Window 的 storage 事件。本文从一个主题同步小组件出发，说明事件来源、关键字段、删除处理和 sessionStorage 的边界。473 收藏 -
页面卸载时，fetch 加上 keepalive 可以让小型收尾请求继续发送，但它受未完成请求体总预算约束，不能替代大文件上传或可靠队列。本文给出 pagehide、UTF-8 字节计算、幂等事件 ID 和 sendBeacon 降级写法。401 收藏 -
Response 的 body 是一次性消费的。本文从重复读取失败的现象出发，说明为什么要在第一次 json、text 或 blob 之前调用 response.clone()，并演示如何让业务分支与日志分支分别读取，同时提醒大响应体下的缓冲风险。217 收藏 -
TypeScript 在 strict 模式下会把 catch 变量视为 unknown。本文从错误收窄、非 Error 抛出值和安全日志三个边界出发，给出可复用的处理函数。478 收藏 -
滚动条从不出现变成出现时，经典滚动条会占用布局宽度。本文用 scrollbar-gutter 的 stable 与 stable both-edges 预留空间，并说明覆盖式滚动条、滚动容器边界和 @supports 降级策略。417 收藏 -
TypeScript satisfies 可检查对象约束并保留成员形状，但不保证所有属性都是精确字面量。通过导航配置对比类型注解与 as const，说明可写范围、额外字段和运行时数据的处理区别。162 收藏 -
用 anchor-name 声明触发元素，再用 position-anchor 与 position-area 建立浮层关系，并通过 anchor-scope 和 @supports 处理重复组件与兼容降级。262 收藏 -
用 requestIdleCallback 把可拆分的非关键任务放进空闲窗口，结合 deadline、timeout 和降级策略控制主线程压力，并把 DOM 提交交给 requestAnimationFrame。458 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能监控 · javascript · 浏览器API · 静态资源 前端性能 PerformanceObserver PerformanceResourceTiming 资源等待时间
用 PerformanceObserver 收集静态资源计时条目，拆分首字节前等待、下载耗时和最终抓取时长，并处理资源缓冲区、跨源字段为零和上报脱敏等边界。215 收藏 -
ResizeObserver 回调里不要无条件改写被观察元素的尺寸。本文用缓存比较、requestAnimationFrame 和 disconnect 组合出最小配方，说明哪些状态更新会形成反馈，以及怎样为一次性测量设置停止条件。389 收藏 -
以 MutationObserver 观察动态节点，解释 childList 与 subtree 的范围、组件卸载时的 disconnect、待交付记录的 takeRecords 策略，以及重复挂载和回调写回的清理边界。479 收藏 -
通过 navigator.locks.request 为同源多标签页使用稳定锁名，把刷新或同步任务放进异步回调；本文说明排队等待、自动释放、ifAvailable 和 AbortSignal 的边界。329 收藏 -
用 BroadcastChannel 广播登录、退出和会话失效信号，让多个同源标签页及时刷新登录状态；同时说明 storage 事件降级、消息去重、首屏初始化和令牌安全边界。243 收藏