前端技术文章
-
浏览器 Cache API 不会自动清理旧资源。本文用版本化缓存名、activate 白名单和命中范围检查，说明如何安全删除旧版本并排查更新不生效。220 收藏 -
React 列表用数组索引作 key 时，插入、删除和排序会让组件状态与数据错配。本文用可编辑列表说明错位原因、稳定 ID 修复方式与边界判断。264 收藏 -
讲清 TypeScript satisfies、泛型返回值与 as const 的分工，用路由配置示例保留 kind 和 path 的字面量，并说明 readonly 与运行时校验边界。368 收藏 -
从 envPrefix、envDir、--mode、MODE 与 NODE_ENV 的区别入手，定位 Vite 环境变量不生效、读到旧值或误用生产配置的原因，并给出安全验证清单。196 收藏 -
长列表不要让 ResizeObserver 覆盖所有组件。本文用 IntersectionObserver 控制可见范围，再用 requestAnimationFrame 和尺寸缓存合并通知，最后补上离开视口与组件卸载时的清理方式。373 收藏 -
大量元素使用 IntersectionObserver 时，应按 root、threshold 和业务动作建立少量观察组，再用 entries、dataset、unobserve 与 disconnect 验证拆分是否正确。276 收藏 -
讲清浏览器 MessageChannel 把 port2 交给 iframe 的完整链路：等待 iframe 加载、使用精确 targetOrigin 转移端口、在 event.ports[0] 接管并用回执验证双向通信。396 收藏 -
TransformStream 会把下游的消费压力沿管道传回上游。本文用 pipeThrough、desiredSize 和 writer.ready 说明如何配置、判断并验证 Web Streams 背压。361 收藏 -
用 structuredClone 深复制包含 Map、Set 和嵌套对象的数据，检查容器类型、引用独立性与共享引用，并说明函数、Symbol、自定义原型和旧环境兼容边界。153 收藏 -
JavaScript AbortController 可以取消 fetch，也能通过 addEventListener 的 signal 自动移除事件监听。本文讲清控制器创建、AbortError 判断、reason 读取和常见复用陷阱。150 收藏 -
CSS subgrid 让多张嵌套卡片共享父网格的标题、正文和操作区轨道，解决内容长度不同导致的按钮错位，并补充 gap、隐式轨道与 flex 降级写法。465 收藏 -
讲清 CSS contain-intrinsic-size 与 content-visibility 的配合方式，用合理的占位尺寸减少长列表内容进入视口时的布局跳动，并给出 CLS 与兼容降级的检查方法。136 收藏 -
content-visibility: auto 会让屏外内容使用尺寸占位，进入视口后真实高度变化就可能引起滚动跳动。本文说明 contain-intrinsic-size、auto 记忆尺寸、图片比例和三个排查观测值的用法。325 收藏 -
subtle.digest 不支持流式输入。本文说明如何用 Blob.slice 控制单块内存，并通过增量哈希器持续 update，正确计算大文件的 SHA-256。475 收藏 -
IndexedDB 的 readwrite 事务不是可以任意 await 的长连接。本文解释请求回调、事件任务与自动提交的关系，并给出连续写入、跨异步边界拆分事务和提交结果判断的实用写法。419 收藏