前端技术文章
-
用 requestIdleCallback 安排不影响首屏交互的后台任务，结合 IdleDeadline.didTimeout 与 timeRemaining() 分片处理，并给出不支持该 API 时的安全降级方案。480 收藏 -
通过一个批量更新表单行的例子，拆解强制同步布局为何发生，以及如何把尺寸读取与 DOM 写入分开，再用 requestAnimationFrame 合并一帧内的更新。406 收藏 -
文章 · 前端 | 4小时前 | 前端 · javascript · 性能排查 · 浏览器API · requestAnimationFrame ResizeObserver ResizeObserver loop completed with undelivered notifications 前端尺寸监听
ResizeObserver 回调里再次改动被观察元素尺寸，可能触发循环通知。本文用最小示例还原报错，拆开 contentRect、requestAnimationFrame 和 lastWidth 的关系，给出可验证的修复边界。285 收藏 -
文章 · 前端 | 5小时前 | javascript · 前端开发 · 浏览器 API · ArrayBuffer postMessage Transferable Web Workers structured clone
用一个可复现的 Web Worker 场景解释 ArrayBuffer 的 Transferable 传递：怎样避免大块数据复制，为什么发送后原引用会失效，以及如何用 byteLength 和 messageerror 定位问题。453 收藏 -
文章 · 前端 | 7小时前 | javascript · 前端开发 · 浏览器 API · ReadableStream 背压 Web Streams TransformStream WritableStream
用一个可运行的 Web Streams 示例拆开 TransformStream 背压：看清 ReadableStream、writableStrategy 和 WritableStream 之间的队列边界，并处理 flush 与 abort。428 收藏 -
文章 · 前端 | 8小时前 | 前端 · css · Web API · 交互动画 · display @starting-style popover CSS transition-behavior overlay top-layer
Popover 打开时能淡入，关闭时却瞬间消失，通常不是 opacity 写错，而是 display 和 overlay 提前切换。本文用最小示例说明 @starting-style、transition-behavior: allow-discrete、display 与 overlay 如何共同保住离场动画，并给出兼容降级边界。225 收藏 -
文章 · 前端 | 9小时前 | html · javascript · 前端组件 · Web Components customElements.whenDefined CustomElementRegistry
页面先出现自定义元素、组件脚本随后加载时，customElements.whenDefined() 可以把初始化放到注册完成之后。本文用一个延迟注册的组件拆开升级时机、重复注册和加载失败边界。404 收藏 -
文章 · 前端 | 10小时前 | 前端 · javascript · pwa · Service Worker · 离线缓存 · Service Worker CacheStorage Cache API caches.open caches.match caches.delete
用 Cache API 为离线资源建立版本化缓存，覆盖 caches.open、cache.addAll、caches.match 与 caches.delete 的协作方式，并处理新版本缓存失败、旧缓存清理和网络回退边界。418 收藏 -
文章 · 前端 | 11小时前 | 前端 · css · 浮层 · 浏览器布局 · CSS anchor positioning anchor-name position-area position-try-fallbacks
CSS anchor positioning 可以把提示浮层和目标元素建立布局关系，再用 position-try-fallbacks 处理靠近视口边缘时的换位。本文从一个可运行的提示菜单例子出发，说明锚点声明、浮层定位、溢出回退和兼容降级的验证方法。373 收藏 -
ResizeObserver 回调里直接改尺寸，可能让布局反馈进入下一帧并反复触发 loop completed with undelivered notifications。本文用真实的 ResizeObserver、requestAnimationFrame 和 entry.target.style.width 示例拆解原因，并给出可验收的收敛写法。456 收藏 -
CSS zoom 会参与布局计算，适合让局部内容按比例放大或缩小；transform: scale() 只改变绘制结果。本文用卡片面板说明两者差异、响应式边界与降级验收。263 收藏 -
文章 · 前端 | 16小时前 | 前端 · dom · javascript · css · 浏览器API · Element.checkVisibility visibilityProperty opacityProperty contentVisibilityAuto 前端可见性
Element.checkVisibility() 能判断元素是否有布局盒、是否被 display:none 或 content-visibility:hidden 跳过渲染；通过 opacityProperty、visibilityProperty 和 contentVisibilityAuto 可以收紧判断，但 true 仍不等于元素真的出现在视口中。292 收藏 -
跨域 iframe、弹窗通信最容易漏掉的不是消息格式，而是发送方身份校验。本文用 origin、source 和消息结构三道边界，写出可验证的 postMessage 接收与回复代码。462 收藏 -
用一个原生 HTML dialog 表单说明 showModal、close、returnValue 与 cancel 事件的关系，给出提交、取消和重复打开时的可靠状态处理方式。229 收藏 -
文章 · 前端 | 22小时前 | 前端 · javascript · Fetch API · 异步控制 · JavaScript 请求超时 AbortSignal.any AbortSignal.timeout fetch请求取消
用 AbortSignal.any 合并用户取消和超时信号，让 fetch 请求只监听一个入口，并按 AbortError、TimeoutError 区分结束原因，补上兼容与竞态边界。276 收藏