前端技术文章
-
文章 · 前端 | 3天前 | 前端 · javascript · 异步编程 · JavaScript Promise.all Array.fromAsync 异步可迭代对象 AsyncIterable for await of
Array.fromAsync 可顺序读取异步可迭代对象并返回数组 Promise；本文用分页生成器讲清映射、错误、内存边界及与 Promise.all 的选择。236 收藏 -
文章 · 前端 | 3星期前 | javascript · Web Components Custom Elements attributeChangedCallback observedAttributes
attributeChangedCallback 不触发时，先检查 observedAttributes 是否监听了正确的 attribute，再确认代码改的是 DOM attribute 而不是只改 JavaScript property。本文用最小示例说明属性反射、初始值和回调重渲染的边界。233 收藏 -
文章 · 前端 | 3天前 | html · 前端 · javascript · slot Web Components 服务端渲染 Declarative Shadow DOM shadowrootmode Shadow Root
服务端把 template shadowrootmode=open 作为宿主的直接子节点输出，浏览器解析 HTML 时即可建立 Shadow Root；客户端升级组件时复用已有根，只补事件和状态，而不是再次创建内部结构。227 收藏 -
前端状态更新频繁时，批处理负责合并同一调度窗口的重复提交，去抖负责等待连续输入停止后再执行副作用。本文用原生 JavaScript 拆开两者的触发边界，并给出输入、请求、状态和绘制的组合方案。227 收藏 -
Popover API 无需手写 document 点击监听：给浮层设置 popover=auto，并用 popovertarget 按钮控制，浏览器会在点击外部或按 Esc 时执行 Light Dismiss。本文同时说明 manual 模式、菜单项关闭和事件同步边界。225 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏 -
用同文档 View Transition API 为 SPA 页面切换建立稳定的元素对应关系，覆盖 startViewTransition、view-transition-name、伪元素动画、异步更新与回退边界。222 收藏 -
IndexedDB 事务不能稳定跨过 await，因为事务只在创建任务和请求事件回调中保持 active。先完成异步准备，再创建最小范围事务，并用 complete 与 abort 判断最终结果。221 收藏 -
Popover API 的 auto 状态会在点击外部时自动关闭。本文用独立 draft 状态保存表单输入，在 toggle 打开时恢复，并把清理动作限定在提交成功或明确取消。220 收藏 -
浏览器 Cache API 不会自动清理旧资源。本文用版本化缓存名、activate 白名单和命中范围检查，说明如何安全删除旧版本并排查更新不生效。220 收藏 -
文章 · 前端 | 1天前 | 前端 · 性能优化 · javascript · ArrayBuffer postMessage 前端性能 Web Worker Transferable structured clone
解释 Web Worker 传大数据卡顿的 structured clone 成本，对比普通复制与 Transferable，并用 ArrayBuffer 示例说明 transfer list、detach 和发送端所有权边界。220 收藏 -
用版本化 Cache API、install/activate 生命周期和限定 fetch 匹配范围，避免 Service Worker 更新后继续命中旧资源。215 收藏 -
CSS :has() 在动态页面中可能因宽泛锚点和深层后代匹配扩大重算范围。本文用商品卡片案例讲清组件级锚定、组合器收缩、权重控制、兼容降级和检查方法。210 收藏 -
BroadcastChannel 单个对象不会收到自己的广播，多实例场景应通过每个页面独有的 senderId 在 message 入口过滤来源，避免重复更新状态。209 收藏 -
ResizeObserver 回调直接写回布局容易形成重复通知。本文用 WeakMap 记录期望尺寸，用 requestAnimationFrame 合并写入，并补充阈值、次数边界和 disconnect 清理方法。209 收藏