replaceChildren()比innerHTML更可靠，因其能强制同步销毁旧子树及样式上下文，避免内存滞留和布局抖动，但不兼容IE且需传Node实例数组；深层DOM节点移除后须显式切断引用链，lang属性必须显式声明而非依赖继承。
DOM树深度超过12层时，replaceChildren()比innerHTML更可靠
当容器子节点频繁更新（如实时仪表盘、聊天列表），用innerHTML = htmlString清空重绘，旧节点引用常滞留内存——尤其在Chrome中，DevTools Memory面板能看到Node实例持续增长但不释放。这不是GC延迟，而是闭包或事件监听器隐式持有深层节点导致的引用链未断。
改用replaceChildren()能强制同步销毁旧子树及其样式上下文，避免中间layout触发，实测滚动帧率提升15%~30%。但注意：replaceChildren()不兼容IE，且传入参数必须是Node实例数组，不能直接传字符串：
- ✅ 正确：container.replaceChildren(...items.map(item => { const el = document.createElement('div'); el.textContent = item; return el; }))
- ❌ 错误：container.replaceChildren('text') —— 会当作文本节点插入，不是HTML解析
- ⚠️ 兼容降级：若需支持旧环境，用
while (container.firstChild) container.removeChild(container.firstChild)，别用container.innerHTML = ''
深度≥7的节点必须显式控制parentNode引用链
深层DOM节点被移出树后，若JS变量仍持有它（比如缓存了某个<span data-id="log-123"></span>），其整个parentNode链（哪怕父节点早已被remove()）仍驻留在内存中。这是Chrome DevTools里“Detached DOM tree”泄漏的主因。
关键动作不是删节点，而是切断引用：
立即学习“前端免费学习笔记（深入）”；
- 移除前手动置空缓存变量：
cachedNode = null - 避免在事件回调中闭包捕获深层节点，改用
event.currentTarget或data-id属性间接定位 - 对深度>10的树形结构（如组织架构图），每次折叠/展开后调用
node.remove()而非node.style.display = 'none'
测试环境里querySelector变慢，根源常在DOM树而非选择器
Jest + jsdom下getByText('Submit')卡顿，90%不是因为选择器写得长，而是DOM树本身太深或节点过多。jsdom从右往左匹配：先找所有文本节点，再逐层向上验证父级路径。若渲染了300个6层嵌套项，单次匹配可能回溯上千次。
实操优先级要倒过来：
- 用
screen.debug()检查实际挂载的HTML，删掉测试无关的Layout包装器、AuthProvider等冗余根节点 - 深层列表中禁用
getByText，改用getByTestId（走属性索引，不遍历树） - 若必须查文本，先用
container.querySelectorAll('[role="button"]')缩小范围，再过滤textContent - 快照测试前清理动态属性：
data-reactroot、随机key、时间戳类字段，否则快照体积暴增且不可比
lang属性不能靠继承，语义容器必须显式声明
只设置document.documentElement.lang = 'zh-CN'，会导致<title></title>、alt、placeholder仍按旧语言读取，标点间距错乱，字体回退失效。浏览器和屏幕阅读器严格按元素自身lang属性判定语言行为。
工程化落地要点：
- 所有含文本的语义标签（
<h1></h1>、<p></p>、<section></section>、<blockquote></blockquote>）都加lang属性，值与当前语言包一致 - 保留已有
lang的内联代码块（如<pre class="brush:php;toolbar:false;" lang="bash"></pre>），不覆盖——这是多语言混排合法场景 -
data-i18n必须覆盖所有可翻译属性：data-i18n-placeholder、data-i18n-title、data-i18n-alt，不能只扫textContent - 动态插入的DOM（弹窗、AJAX表格行）插入后立即调用翻译函数，框架不会自动监听
