前端技术文章
-
用版本化 Cache API、install/activate 生命周期和限定 fetch 匹配范围，避免 Service Worker 更新后继续命中旧资源。215 收藏 -
文章 · 前端 | 20小时前 | websocket · 断线重连 · 前端排障 · 指数退避 · JavaScript异步 · WebSocket断线重连 WebSocket重连定时器 JavaScript指数退避 前端实时连接
WebSocket 断线重连时，分别在 error 和 close 中 setTimeout 很容易形成多个重连链。本文用单一调度器、指数退避和 stop 清理解决定时器叠加问题。205 收藏 -
排查 Vite 生产构建仍读取旧环境变量的问题，解释 --mode、NODE_ENV、.env 文件和进程环境变量的优先级，并给出配置阶段与构建阶段的核对方法。204 收藏 -
Worker.terminate() 会立即停止 Worker，未完成计算和未发出的消息不会自动补发。本文用请求编号、确认消息和协作取消协议处理销毁边界，并说明 structured clone 与 transfer list 的对象所有权差异。199 收藏 -
BroadcastChannel 关闭标签页后收不到消息，通常不是浏览器漏发，而是旧实例已离开通道且 API 不保存历史。本文用生命周期封装、主动同步和状态快照给出可落地的处理方式。199 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
解释 structuredClone 的 transfer 列表为什么会让原 ArrayBuffer 进入 detached 状态，并给出 byteLength、TypedArray 视图和生命周期管理的排查方法。178 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
CSS 响应式规则不必二选一：依赖浏览器视口或设备偏好时用 media query，依赖组件祖先容器宽度时用 container query。本文用最小 CSS 片段和决策表说明两者的选择边界。173 收藏 -
Array.toSorted 适合在不改动原数组的前提下完成排序，但数字、对象和旧运行环境都需要额外配置。本文从 sort 与 toSorted 的差异开始，给出比较函数、兼容写法和回归检查清单。169 收藏 -
Fetch 调用 AbortController 取消后，catch 和 finally 仍会按 Promise 规则执行；真正需要防止的是旧请求在 await 后继续更新业务状态。本文用 signal.aborted、请求代次和 finally 清理讲清排查与修复方法。168 收藏 -
Fetch 使用 ReadableStream 作为请求体时，RequestInit 必须显式写 duplex: half。本文从流的结束、取消、错误处理和浏览器兼容四个方面给出可落地的上传写法。168 收藏 -
讲清 Web Worker 使用 Transferable 传回 ArrayBuffer 结果的写法，区分结构化克隆、所有权转移与共享内存，并说明 detach、TypedArray 和生命周期边界。162 收藏 -
用组件场景区分 CSS @container 的 style query 与 size query，说明 container-type、自定义属性、组合条件和常见误用。158 收藏 -
IntersectionObserver 回调频繁触发不等于请求必须重复。本文从首次 observe、threshold 穿越和 entries 批量回调说起，用元素级 loading/done 状态、rootMargin 与 unobserve 设计稳定的懒加载去重方案。154 收藏