前端技术文章
-
用一个可复现的无限列表场景，拆解 IntersectionObserver 的 rootMargin、threshold、unobserve 与 disconnect，避免滚动监听重复触发和组件卸载后的残留回调。196 收藏 -
WebGPU 的计算结果不会自动出现在 JavaScript 里：本文用 output 与 stagingBuffer 两个 GPUBuffer，串起 copyBufferToBuffer、mapAsync、getMappedRange、unmap，并补上 GPUDevice.lost 的恢复边界。381 收藏 -
搜索框连续输入时，旧请求可能晚于新请求返回并覆盖结果。本文用 AbortController 取消上一请求，配合请求序号和状态复原，收口竞态并给出可运行的验证示例。207 收藏 -
文章 · 前端 | 19小时前 | 前端 · 路由 · javascript · 兼容性 · 浏览器 API · 嵌套路由 JavaScript URLPattern URLPattern groups URLPattern test 浏览器 API
用 JavaScript URLPattern 匹配 /:space/:project/:page 这样的嵌套路由，先用 test 判断是否命中，再从 pathname.groups 取参数，并通过特性检测为旧浏览器保留回退路径。445 收藏 -
用 structuredClone 复制前端表单草稿时，普通对象、File 和不可序列化字段的行为并不相同。本文从真实的编辑草稿场景出发，拆开克隆、转移与 DataCloneError 的边界，并给出可复测的检查方法。213 收藏 -
长列表加载更多时，IntersectionObserver 可能因哨兵节点持续可见而重复触发。本文用 sentinel、entry.isIntersecting、loading 和 loadMore 收口一次请求，处理快速滚动与末页边界。106 收藏 -
CSS shape() 可以把响应式卡片的裁切路径写成相对尺寸，让 clip-path 在容器变化时保持比例；本文用真实 CSS 片段拆开坐标起点、line/curve 命令、百分比伸缩和 @supports 回退验收。160 收藏 -
文章 · 前端 | 1天前 | html · 前端 · javascript · 弹窗 · 浏览器API · dialog close cancel HTMLDialogElement requestClose
用原生 dialog 做确认弹窗时，requestClose() 能把 Esc、关闭按钮和脚本关闭统一到 cancel 与 close 两个事件，并保留 returnValue 的结果语义。163 收藏 -
中文搜索框不能靠空格切词。本文用 JavaScript Intl.Segmenter 的 word 粒度保留 segment、index 与 isWordLike，再把字符位置映射到高亮范围，处理中文、英文和表情符号的边界。111 收藏 -
中文摘要不能只按字符串下标截断，否则容易把词和表情拆开。本文用 Intl.Segmenter 的 word 粒度处理中文边界，再用 isWordLike 和 supportedLocalesOf 设计多语言回退。290 收藏 -
content-visibility:auto 可以跳过屏幕外内容的绘制，但尺寸估计不准时会让滚动条和滚动位置抖动。本文用 contain-intrinsic-size、auto 记忆尺寸和渐进校验拆开性能收益与布局稳定性的取舍。366 收藏 -
ResizeObserver 回调里直接改尺寸，容易触发布局反馈和连续通知。本文用 pending 标记、requestAnimationFrame 与 applyLayout 拆开读写阶段，说明如何定位循环回调并保留可验收的布局更新链路。439 收藏 -
AbortController 取消 fetch 并不等于已经停止 Promise 链。本文用一个组件卸载场景拆解 signal、catch 和状态门禁的关系，给出可复用的前端请求收口写法。465 收藏 -
用 Fetch Response.body 和 ReadableStream 将搜索结果按块解析并增量渲染，说明 reader.read、TextDecoderStream、controller.desiredSize 与背压边界。460 收藏 -
从一个面板尺寸越改越抖的实际场景出发，定位 ResizeObserver 反复触发的回路，区分布局读取与写入边界，并用稳定尺寸和帧内合并完成验证。346 收藏