前端技术文章
-
CSS scroll-driven animations 可以把关键帧动画交给滚动进度或元素可见进度控制。本文从旧的 scroll 事件方案出发，讲清 scroll()、view()、命名时间线、关键帧范围和兼容回退的写法。207 收藏 -
ReadableStream 停止读取时，reader.cancel() 和 AbortController.abort() 负责的范围不同。本文用一个可复用的 fetch 流读取结构说明如何取消请求、处理 AbortError 并在 finally 中释放 reader 锁。203 收藏 -
从候选 URL 筛选、Sec-Purpose 服务端判断到 prerenderingchange 激活边界，说明 Speculation Rules API 如何渐进增强地预渲染下一页并避免误触发副作用。202 收藏 -
前端 source map 不只是调试开关，也决定了浏览器能看到多少源码信息。本文从 sourceMappingURL、sourcesContent 和生产构建策略入手，说明如何把调试地图留在受控错误上报链路中。194 收藏 -
XState 父状态机向子 actor 发事件时，关键是区分 actor logic、invoke id 和 actor ref。本文用 XState v5 示例说明 sendTo 的固定 ID 写法、spawn 动态引用和事件未处理时的三层排查方法。191 收藏 -
D3 data join 默认按位置匹配，列表重排后容易让 DOM 节点状态跟错对象。本文用稳定且唯一的 id 作为 key，说明 update、enter、exit 的对应关系，以及排序、重复 key 和 DOM 顺序的边界。185 收藏 -
用 Web Streams 组装生产、转换和消费管道时，关键不是手工堆积缓存，而是让下游需求通过队列和 pipe 链路传回 source，并用 AbortController 统一处理取消、超时和资源释放。175 收藏 -
Fetch 可用 AbortSignal.timeout 为每次请求设置等待预算。本文给出覆盖响应体读取的原创封装，说明 TimeoutError 的归属、其他异常和活动时间边界，并提供兼容判断。166 收藏 -
使用 View Transition API 为列表排序、筛选和拖动重排添加平滑位移动画，关键是让每个列表项保持稳定 DOM 身份，并把一次同步 DOM 更新交给 document.startViewTransition。本文给出完整示例、兼容回退、减弱动画设置与排错清单。158 收藏 -
CSS :has 不支持时，先用普通类名、属性和结构写完整基础样式，再用 @supports selector(:has(*)) 叠加父级增强；本文说明直接子代边界、:where() 优先级和状态同步方案。158 收藏 -
打开模态框或抽屉时，可以给背景容器设置 inert，让其后代暂时不能点击、聚焦，也不会出现在辅助技术访问树中；关闭浮层后再恢复 inert，并保留旧环境降级策略。153 收藏 -
ReadableStream 通过 pipeThrough 把数据交给 TransformStream，再从转换流的 readable 端继续消费。本文从一次分块边界误判出发，说明转换回调、文本解码、管道串联以及关闭、异常和取消选项的正确用法。151 收藏 -
SolidJS 的 createStore 可以用 setStore 路径语法定位嵌套对象和数组元素，本文用一个表单状态示例说明局部更新、条件批量更新以及 produce 的适用边界。130 收藏 -
通过自定义属性、命名容器和 @container style() 让组件响应父级状态，并说明默认回退、继承、容器选择及普通属性查询的支持边界。120 收藏 -
闭合阴影根不必牺牲焦点委托。用声明式模板保留 delegatesFocus，区分宿主聚焦、Tab 顺序与外部观察，并避开布尔属性、重复建根和字符串注入的常见误区。120 收藏