前端技术文章
-
WebSocket 断线重连时，分别在 error 和 close 中 setTimeout 很容易形成多个重连链。本文用单一调度器、指数退避和 stop 清理解决定时器叠加问题。205 收藏 -
排查 Vite 生产构建仍读取旧环境变量的问题，解释 --mode、NODE_ENV、.env 文件和进程环境变量的优先级，并给出配置阶段与构建阶段的核对方法。204 收藏 -
BroadcastChannel 关闭标签页后收不到消息，通常不是浏览器漏发，而是旧实例已离开通道且 API 不保存历史。本文用生命周期封装、主动同步和状态快照给出可落地的处理方式。199 收藏 -
从 envPrefix、envDir、--mode、MODE 与 NODE_ENV 的区别入手，定位 Vite 环境变量不生效、读到旧值或误用生产配置的原因，并给出安全验证清单。196 收藏 -
文章 · 前端 | 2天前 | 前端 · View Transition API startViewTransition ViewTransitionTypeSet pageswap pagereveal
View Transition types 用字符串区分前进、后退和其他导航，再由 :active-view-transition-type() 选择动画。本文分别说明 SPA、跨文档导航、动态类型和兼容性边界。195 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
用一个同源多页网站实例讲清跨文档 View Transition：双端开启、旧新快照、共享元素命名、自定义动画、减少动态效果适配与常见失效排查。181 收藏 -
解释 structuredClone 的 transfer 列表为什么会让原 ArrayBuffer 进入 detached 状态，并给出 byteLength、TypedArray 视图和生命周期管理的排查方法。178 收藏 -
IndexedDB事务会随事件循环在 active、inactive 和 finished 状态间切换。本文从 TransactionInactiveError 和写入时序异常出发，说明如何把外部异步等待移到事务前，并用短事务、请求回调与 complete/abort 处理可靠读写。176 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
文章 · 前端 | 4天前 | javascript · JavaScript Fetch AbortController 取消请求 AbortSignal.any AbortSignal.timeout
AbortSignal.any 可把用户取消、页面离开和超时合并为一个信号，任一来源中止时立即停止 fetch。本文说明首个 reason、已中止输入、错误分类、监听器清理和兼容边界。174 收藏 -
URLPattern 可以把可选语言前缀和资源 ID 放进同一个 pathname 规则：用 {/:lang}? 让语言段连同斜杠一起可选，再用 :id(\d+) 限制并捕获数字 ID。本文给出 test()、exec() 写法、边界检查和浏览器兼容建议。173 收藏 -
WebSocket 客户端不能只在 close 事件里 new 一个连接。本文从连接代次、指数退避、messageId/seq 去重和待发送队列出发，给出一套能控制重复副作用的浏览器端设计，并说明客户端去重与服务端幂等的边界。171 收藏 -
Array.toSorted 适合在不改动原数组的前提下完成排序，但数字、对象和旧运行环境都需要额外配置。本文从 sort 与 toSorted 的差异开始，给出比较函数、兼容写法和回归检查清单。169 收藏 -
Fetch 使用 ReadableStream 作为请求体时，RequestInit 必须显式写 duplex: half。本文从流的结束、取消、错误处理和浏览器兼容四个方面给出可落地的上传写法。168 收藏