replaceChildren比innerHTML更安全，因其同步销毁旧子树及样式上下文，避免内存滞留和布局抖动；而innerHTML=''仅清空内容，旧节点可能被闭包或变量持有成为Detached节点。
高频动态写入时，为什么 replaceChildren 比 innerHTML 更安全
因为 replaceChildren 会同步销毁旧子节点及其全部样式上下文、事件监听器和隐式引用链，而 innerHTML = '' 只清空文本内容，旧节点仍可能被 JS 变量或闭包持有，变成 Detached 节点驻留内存。
-
replaceChildren接收的是 Node 实例或 DOMString，但传入 HTML 字符串（如el.replaceChildren('<div>foo</div>')）不会自动解析，而是当作纯文本插入 → 必须用document.createElement()显式创建后传入 - Chrome 86+、Firefox 76+、Safari 14.1+ 和鸿蒙 ArkTS 已原生支持；IE 或旧 WebView 必须前置检测：
if ('replaceChildren' in Element.prototype)，否则 fallback 到while (el.firstChild) el.removeChild(el.firstChild) - 在 SSR hydration 场景下，若服务端输出结构与客户端不一致，
replaceChildren不会触发整棵子树丢弃重挂载，比 React/Vue 的 diff 更轻量
动态插入大量节点时，requestIdleCallback 为何比 setTimeout 更稳
不是“执行得更快”，而是它把任务交还给浏览器调度：只在主线程真正空闲时执行，不抢占用户交互（如点击、滚动），且天然具备节流边界，避免任务堆积导致 OOM 或卡死。
- 每帧处理节点数建议控制在 200–250 个（Android 8–13 实测阈值），超过则帧内超时，自动延至下一空闲帧
- 必须传入 HTML 字符串数组，而非已创建的
Element节点——后者会提前触发样式计算和布局，失去空闲帧意义 - Android 7 及以下需 fallback：
setTimeout(() => injectTags(tags, nextIndex), 16)，不能用0，否则调度失控 - 递归调用时禁止直接
injectTags()，应改用requestIdleCallback(() => injectTags(tags, nextIndex))避免栈溢出
data-component 是比 class 或 id 更可靠的模块锚点
它不参与样式、不触发渲染、不干扰 CSS 选择器匹配，专为 JS 和构建流程设计，天然支持多实例，且能配合 data-version 做版本校验。
- 同一页面多次渲染组件（如商品卡片循环）时，
id="product-card"违反 HTML 规范，document.getElementById只返回第一个；而document.querySelectorAll('[data-component="product-card"]')稳定返回全部 - 模块根元素必须加
data-component，例如<div data-component="search-bar" data-version="2.1">；CI 流程可校验该 HTML 片段是否匹配 JS 中声明的data-version - 禁止用
id做模块标识，除非是唯一且静态的页面级锚点（如<a href="#contact">） - 第三方脚本（如广告 SDK）常篡改 DOM 结构，
element.closest('.form-container')失效往往是因为中间插入了未预期的 wrapper 节点——data-component锚点更难被意外覆盖
深层 DOM 节点移除后，parentNode 链为何还会驻留内存
只要 JS 里还存着对某个深层节点的引用（哪怕只是缓存了它），整条 parentNode 链（包括早已从 DOM 树移除的祖先）都会被 GC 机制视为活跃对象，无法释放。
立即学习“前端免费学习笔记（深入）”；
- 高频泄漏场景：组件卸载后，闭包仍持有
ref.current或document.querySelector('.deep-item')返回的节点；用Map缓存节点映射却没在节点移除时调用nodeCache.delete(node) - 验证方式：DevTools Console 执行
$$('*').length，操作前后对比；若稳定增长，立刻拍 Heap Snapshot，筛选Detached节点 - 深层节点（>12 层）需手动管理引用：移除前显式设
node.parentNode = null，或使用node.remove()（现代浏览器中该方法会自动切断父引用） - Chrome DevTools Memory 面板开启
Allocation instrumentation on timeline，观察Node实例是否持续增长却不释放
