前端技术文章
-
用 structuredClone 深拷贝含嵌套对象、数组和循环引用的数据，并排查 DataCloneError、原型元数据与 transfer 转移语义等边界。312 收藏 -
文章 · 前端 | 4星期前 | 前端 · css · 可访问性 · 浏览器兼容 · prefers-reduced-motion animation-timeline 前端兼容 CSS scroll-timeline 滚动驱动动画
CSS scroll-timeline 可以让动画进度跟随滚动位置，但不能替代兼容性和无障碍设计。本文用 @supports 与 prefers-reduced-motion 组织增强、降级和静态默认效果。308 收藏 -
CSS Grid 或 Flex 改变卡片视觉位置后，默认 Tab 顺序仍可能跟随 DOM。本文用 reading-flow 和 reading-order 说明如何让顺序导航贴合视觉布局，并保留合理源码顺序、避免正 tabindex、处理实验性支持与降级。308 收藏 -
Range.surroundContents 抛出异常时，关键不在于选区是否跨过多个文本节点，而在于它是否部分包含了非 Text 节点。本文用 DOM 结构和三个方案对比，说明如何判断边界并选择更稳妥的包裹方式。307 收藏 -
BroadcastChannel 可用于跨标签页短消息同步。本文以主题偏好为例，说明通信范围、消息协议、有限去重、关闭清理与降级路径，并指出历史补发和并发一致性需由业务另行处理。306 收藏 -
用 requestIdleCallback 把统计、预渲染等非关键工作切成可让渡的任务块，根据 IdleDeadline 控制处理量，并补上 timeout、取消和 setTimeout 降级。305 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · 浏览器API · AbortController AbortSignal JavaScript异步任务 scheduler.postTask
scheduler.postTask 可以通过AbortSignal取消尚未执行的任务，但abort不会回溯终止已经进入回调的JavaScript。本文用最小示例说明signal接入、Promise错误处理、协作式停止和兼容性边界。304 收藏 -
把 IndexedDB 的对象仓库和索引变化绑定到递增版本号，在 onupgradeneeded 中按旧版本分段执行；遇到 keyPath 变化时先搬运数据再重建仓库，并处理旧页面连接造成的 blocked。303 收藏 -
React useEffect 遇到快速变化的查询参数时，旧请求可能晚于新请求返回并覆盖界面。本文用 AbortController 在清理阶段取消旧 Fetch，再用 active 标记保护不可取消异步任务的状态写入。302 收藏 -
Request 的请求体是一次性可消费的流，读取 body 后再 fetch 同一个对象容易失败。本文说明 bodyUsed、clone 的正确时机，以及需要改请求时怎样重新构造 Request。301 收藏 -
自定义 div 或无 href 的 a 元素即使加了 role=button，也不会自动获得原生按钮的键盘行为。本文说明何时改回 button，以及如何补齐 tabindex、焦点样式、Enter 和 Space 处理，并区分命令按钮、切换按钮和对话框焦点回收。300 收藏 -
Request.signal 本身不能直接调用取消方法，正确做法是在创建 Request 时绑定 AbortController.signal，发出 fetch 后调用 controller.abort()，再区分主动取消、超时和普通网络错误。本文还说明响应体读取阶段、signal 单次使用和生产发布检查边界。300 收藏 -
用 Range.compareBoundaryPoints 比较两个 Range 的起点和终点，列清四种 how 常量的实际映射，解释 -1、0、1 的方向，并说明它与范围重叠判断的边界。300 收藏 -
Canvas 文字布局不能只看 TextMetrics.width。本文从 measureText() 返回值出发，说明 actualBoundingBoxLeft、Right、Ascent 和 Descent 如何换算真实可见矩形，并给出居中、裁剪和斜体外伸时的处理边界。300 收藏 -
拆分 PerformanceObserver 原始条目、LCP/CLS/INP 计算与上报层，给出诊断和 web-vitals 接入示例，说明页面隐藏、重复快照、缺失值与 sendBeacon 入队的边界。298 收藏