前端技术文章
-
Worker.terminate() 会立即停止 Worker，未完成计算和未发出的消息不会自动补发。本文用请求编号、确认消息和协作取消协议处理销毁边界，并说明 structured clone 与 transfer list 的对象所有权差异。199 收藏 -
BroadcastChannel 关闭标签页后收不到消息，通常不是浏览器漏发，而是旧实例已离开通道且 API 不保存历史。本文用生命周期封装、主动同步和状态快照给出可落地的处理方式。199 收藏 -
用 Temporal.PlainDate 处理生日、账期和只关心日历日期的业务值，避开 Date 的时区偏移，覆盖 from、compare、until、toString 与旧浏览器降级边界。198 收藏 -
TypeScript 面试：接口数据为什么别急着写成 any？有人被问到 any 和 unknown 的区别，会先讲「一个更安全」。这句话没错，但太像背定义了。更直观的说法，不妨直接看一段接口代码：服务端昨天把 name 改成了 displayName，但前端并没有收到通知。结果到了页面渲染时，代码196 收藏 -
用一个可复现的无限列表场景，拆解 IntersectionObserver 的 rootMargin、threshold、unobserve 与 disconnect，避免滚动监听重复触发和组件卸载后的残留回调。196 收藏 -
从 envPrefix、envDir、--mode、MODE 与 NODE_ENV 的区别入手，定位 Vite 环境变量不生效、读到旧值或误用生产配置的原因，并给出安全验证清单。196 收藏 -
文章 · 前端 | 1星期前 | 前端 · View Transition API startViewTransition ViewTransitionTypeSet pageswap pagereveal
View Transition types 用字符串区分前进、后退和其他导航，再由 :active-view-transition-type() 选择动画。本文分别说明 SPA、跨文档导航、动态类型和兼容性边界。195 收藏 -
本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 innerHTML 的正确用法、事件委托实践、DOM 插入时机控制及常见陷阱规避。 本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 `innerHTML`191 收藏 -
XState 父状态机向子 actor 发事件时，关键是区分 actor logic、invoke id 和 actor ref。本文用 XState v5 示例说明 sendTo 的固定 ID 写法、spawn 动态引用和事件未处理时的三层排查方法。191 收藏 -
用户连续点击提交按钮，常见结果是重复请求、重复订单或失败后无法恢复。本文从 HTML formdata 事件切入，拆开提交锁、请求取消、失败恢复和键盘回车的边界，给出可核对的前端实现。190 收藏 -
从输入事件顺序、中文输入法组合态和浏览器 undo 栈三个角度，排查表单撤销失效，并给出可验收的实现边界。186 收藏 -
用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。185 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
D3 data join 默认按位置匹配，列表重排后容易让 DOM 节点状态跟错对象。本文用稳定且唯一的 id 作为 key，说明 update、enter、exit 的对应关系，以及排序、重复 key 和 DOM 顺序的边界。185 收藏 -
Navigation API 已在 2026 年进入 Baseline。本文用最小路由示例讲清 navigate 统一拦截、同源边界、加载失败与 History API 渐进回退。183 收藏