前端技术文章
-
用 PerformanceResourceTiming 的域名解析、连接和安全连接时间戳拆分 DNS、TCP、TLS 耗时，并处理跨域受限、缓存命中与连接复用导致的零值。108 收藏 -
前端 WebSocket 需要把异常重连和页面离开分成两条路径：异常关闭采用带抖动的指数退避，pagehide 负责主动收尾，pageshow 再按 bfcache 状态恢复，避免定时器泄漏、重复连接和无休止重连。381 收藏 -
讲清 Fetch keepalive 在页面隐藏、跳转或关闭前发送小请求的写法、64 KiB 限制、幂等设计，以及与 sendBeacon 的选择边界。291 收藏 -
用一个可渐进落地的组件案例说明 CSS @scope 迁移：确定根节点与下边界、保留旧规则回退、处理层叠邻近度与继承，并按浏览器支持范围清理历史选择器。294 收藏 -
SPA 接入 View Transition API 时，动画应该是渐进增强而不是状态更新的前置条件。本文用同一更新回调处理能力检测、减少动态效果、焦点恢复和 updateCallbackDone 边界。142 收藏 -
FormDataEvent 会在表单数据条目构造完成后暴露同一个 FormData 对象。本文用一个原生 JavaScript 小项目演示如何统一补充、替换和删除字段，并处理 submitter、成功控件、fetch multipart 边界与取消提交等关键边界。288 收藏 -
对比 requestSubmit 与 form.submit 的原生校验、submit 事件、提交按钮语义和兼容边界，给出自定义按钮、异步确认与直接提交场景的选择清单。392 收藏 -
scheduler.yield 能把主线程长任务切成多个 continuation，并在 postTask 内继承优先级。本文给出时间预算切片、取消处理与兼容降级的完整写法。110 收藏 -
scroll-timeline 可以把滚动容器从起点到终点的位置映射为关键帧进度。本文用阅读进度条给出最小配方，解释命名时间轴、scroll() 变体、常见失效原因与渐进增强写法。251 收藏 -
IntersectionObserver 的 scrollMargin 会扩展 root 内嵌套滚动容器的裁剪边界，适合处理轮播、虚拟列表和懒加载的提前观察。本文说明它与 rootMargin、threshold 的分工，以及重建观察器和兼容性回退方法。380 收藏 -
closedby 用于控制 dialog 是只能由显式机制关闭，还是允许 Esc、平台关闭请求，以及点击外部的 light dismiss。本文对比 none、closerequest、any，并说明 showModal() 与 show() 的默认边界。269 收藏 -
HTML popover 能把轻量浮层放进浏览器顶层，并原生处理外部点击和 Escape 关闭。本文用账户操作面板说明声明式写法、三种状态选择和脚本控制边界。249 收藏 -
Navigation API 通过 navigate 与 intercept 统一接管单页应用导航，本文说明拦截边界、异步渲染、历史状态、错误处理和 History API 降级方案。167 收藏 -
用 View Transition API 包裹 DOM 状态更新，为单页应用加入平滑过渡，并处理浏览器降级、局部元素命名、异步更新和减少动效偏好。149 收藏 -
通过字符串键、对象身份键、读取方式和序列化需求，对比 Object.groupBy 与 Map.groupBy 的选择方法，并解释空原型对象、键转换和元素引用等容易忽略的边界。138 收藏