前端技术文章
-
打开模态框或抽屉时，可以给背景容器设置 inert，让其后代暂时不能点击、聚焦，也不会出现在辅助技术访问树中；关闭浮层后再恢复 inert，并保留旧环境降级策略。153 收藏 -
前端可以用 PerformanceObserver 读取 layout-shift 条目，再通过 value、hadRecentInput 和 sources 判断布局偏移是否与用户输入有关，并定位发生移动的元素。本文还说明调试累计值与正式 CLS 的边界。153 收藏 -
ReadableStream 通过 pipeThrough 把数据交给 TransformStream，再从转换流的 readable 端继续消费。本文从一次分块边界误判出发，说明转换回调、文本解码、管道串联以及关闭、异常和取消选项的正确用法。151 收藏 -
用 View Transition API 包裹 DOM 状态更新，为单页应用加入平滑过渡，并处理浏览器降级、局部元素命名、异步更新和减少动效偏好。149 收藏 -
文章 · 前端 | 1星期前 | 前端 · 性能优化 · javascript · scheduler.postTask TaskController Prioritized Task Scheduling API TaskSignal JavaScript任务优先级
Scheduler.postTask 用 options.priority 设置固定优先级，用 TaskController 的 TaskSignal 管理动态优先级。本文说明三档优先级、Promise 错误处理、取消、delay 和浏览器能力检测。148 收藏 -
用 CSS :focus-visible 区分键盘导航与鼠标点击的焦点表现，保留可访问的焦点提示，补齐自定义组件、脚本聚焦和高对比检查边界。143 收藏 -
SPA 接入 View Transition API 时，动画应该是渐进增强而不是状态更新的前置条件。本文用同一更新回调处理能力检测、减少动态效果、焦点恢复和 updateCallbackDone 边界。142 收藏 -
介绍 Intl.DurationFormat 如何接收结构化持续时间对象，按 locale 与 long、short、narrow 风格生成本地化文本，并用 formatToParts 和能力检测处理真实前端场景。141 收藏 -
文章 · 前端 | 4星期前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage TypedArray 结构化克隆 Web Worker Transferable
Web Worker通过postMessage传递大数组时，默认结构化克隆会复制数据。本文用TypedArray加Transferable转移底层ArrayBuffer，说明发送端detached边界、Worker侧重建视图、结果回传和何时不该转移。140 收藏 -
通过字符串键、对象身份键、读取方式和序列化需求，对比 Object.groupBy 与 Map.groupBy 的选择方法，并解释空原型对象、键转换和元素引用等容易忽略的边界。138 收藏 -
解释 Vite 配置求值早于 .env 文件加载的原因，并用 loadEnv 正确读取模式变量、配置端口和控制客户端暴露边界。133 收藏 -
SolidJS 的 createStore 可以用 setStore 路径语法定位嵌套对象和数组元素，本文用一个表单状态示例说明局部更新、条件批量更新以及 produce 的适用边界。130 收藏 -
围绕 cache key、install、activate 和回滚设计一套 Service Worker 缓存版本更新方案，说明怎样避免新旧缓存互相污染，以及 updateViaCache 和 clients.claim 应该怎样取舍。122 收藏 -
通过自定义属性、命名容器和 @container style() 让组件响应父级状态，并说明默认回退、继承、容器选择及普通属性查询的支持边界。120 收藏 -
闭合阴影根不必牺牲焦点委托。用声明式模板保留 delegatesFocus，区分宿主聚焦、Tab 顺序与外部观察，并避开布尔属性、重复建根和字符串注入的常见误区。120 收藏