前端技术文章
-
前端搜索框快速输入时，旧请求可能晚于新请求返回并覆盖结果。本文用 AbortController 取消无效请求，再用请求序号保护结果提交，给出异常处理、signal 复用和 debounce 的边界方案。242 收藏 -
通过 Fetch API 消费 Response.body 的 ReadableStream，按字节累计下载量并同步更新界面；同时处理 Content-Length 缺失、取消请求、网络异常和 Blob URL 释放，避免进度条失真或资源泄漏。359 收藏 -
围绕 localStorage 配额异常，说明同步写入的失败边界、异常捕获、内存降级和迁移 IndexedDB 的判断方法。308 收藏 -
用 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 收藏