前端技术文章
-
本文用一段最小 CSS 配方让横向卡片在滚动结束后停在卡片边界，说明 scroll-snap-type、scroll-snap-align、gap、scroll-padding 与快速滑动边界。403 收藏 -
用 container-type 建立容器查询上下文，再通过 @container 按卡片自身宽度切换单列与两列布局，并说明命名容器、inline-size 与回退方案的边界。387 收藏 -
讲清 Fetch 配合 AbortController 传递 abort reason 的写法，区分用户取消、超时与网络异常，并说明组合信号、兼容处理和 signal 一次性边界。351 收藏 -
围绕 fetch 事件实现缓存优先、网络回退和离线兜底，限定同源 GET 请求，只缓存成功响应，并解释 HTTP 错误、网络异常与 Response clone 的边界。448 收藏 -
讲清 Cache API 的 match 方法如何用 ignoreSearch 控制查询参数是否参与缓存匹配，给出静态资源示例、参数边界、响应差异与缓存清理策略。409 收藏 -
CSS scroll anchoring 通常用于抵消异步内容插入造成的页面位移；如果它与自定义滚动逻辑冲突，可用 overflow-anchor: none 在局部容器关闭，再检查父子滚动框和尺寸预留。313 收藏 -
浏览器 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 收藏