前端技术文章
-
用 CSS :focus-visible 区分键盘导航与鼠标点击的焦点表现，保留可访问的焦点提示，补齐自定义组件、脚本聚焦和高对比检查边界。143 收藏 -
ResizeObserver 回调直接写回布局容易形成重复通知。本文用 WeakMap 记录期望尺寸，用 requestAnimationFrame 合并写入，并补充阈值、次数边界和 disconnect 清理方法。209 收藏 -
用列表底部哨兵讲清 IntersectionObserver 的 root、rootMargin 和 threshold 如何协同，补上请求锁、hasMore 标记以及自定义滚动容器的边界处理。360 收藏 -
通过 Web Worker 的 postMessage 和 Transferable 转移 ArrayBuffer，掌握所有权交接、detached 状态、TypedArray 视图与常见排查边界。249 收藏 -
讲清 ReadableStream 如何用 reader 逐块读取响应、用 TextDecoder 保持字符完整，并在消费变慢、提前结束和异常时正确处理背压与 cancel。436 收藏 -
用同文档 View Transition API 为 SPA 页面切换建立稳定的元素对应关系，覆盖 startViewTransition、view-transition-name、伪元素动画、异步更新与回退边界。222 收藏 -
本文用一段最小 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 收藏