删掉未闭合标签会导致重排范围翻倍，因浏览器自动纠错使DOM树深度异常增加，footer被嵌入header等，拉长祖先链致布局计算扩散至body。
为什么删掉一个未闭合标签会让整个页面重排范围翻倍
浏览器解析 HTML 时，遇到未闭合的 <div> 或 <section>，不会报错，而是自动“纠错”：把后续所有内容强行包裹进这个未结束的节点里。结果就是 DOM 树比你写的源码深得多——原本该平级的 footer 被塞进了 header 内部，main 的祖先链突然多出三层。一旦触发重排（比如改了某个 width），浏览器必须沿这条被拉长的祖先链逐层向上检查布局上下文，连 body 都可能被卷入同步计算。
- 用 DevTools Elements 面板直接展开 DOM，看
footer是否出现在header展开后内部 - 节点边缘出现红色高亮或灰色半透明提示（Chrome/Edge 特有）
- 右键 →
Edit as HTML改一行，结构“跳变”——说明原始结构已被浏览器重写过 - 特别警惕
<table>、<ul>、<ol>内塞了<div>或<p>：这些非法子元素会直接触发匿名节点插入，DOM 失真不可逆
innerHTML += 是重排扩散的隐形推手
innerHTML += 看似只是追加内容，实际每次执行都会先读取当前完整 HTML 字符串，再拼接、再整块替换——整个子树被销毁重建。事件监听器丢失、表单值清空、滚动位置归零，都是表象；深层问题是：新 DOM 树的祖先链和样式继承链完全重置，哪怕只插入一个 <iframe>，也会让父容器重新走一遍布局流程。
- 广告位重复出现？查 Network 面板的
Initiator列，定位到调用innerHTML +=的函数（如injectAd） - 避免写
container.innerHTML += '<div>...</div>'，改用document.createElement+appendChild - 若必须用字符串插入，用
insertAdjacentHTML('beforeend', ...)替代，它不破坏现有子节点结构 - 加防重标记：
if (!container.hasAttribute('data-injected')) { ... container.setAttribute('data-injected', 'true'); }
多个 SVG 共用相同 ID 导致渲染错乱
SVG 中所有 id（如 <pattern id="bg">、<linearGradient id="grad">）在整页范围内必须唯一。浏览器只注册第一个同名 ID，后续同名定义被忽略，但所有 url(#bg) 引用仍指向第一个——结果是第二个 SVG 渲染出第一个 SVG 的图案。
- 检查 Elements 面板中每个
<pattern>、<defs>子元素的id是否全局唯一 - 引用处（
fill="url(#bg)"）的 ID 必须与定义处严格一致 - 自动化方案：服务端或构建时用哈希（如
id="bg-${hash(svgContent)}"）批量重写 SVG 内部 ID - 不要依赖
document.getElementById查找 SVG 资源——它只返回第一个匹配项，掩盖问题
框架接管区域混入原生 DOM 插入引发重排泄漏
当 React/Vue 控制的容器里，你又用原生 JS 执行 el.innerHTML = ... 或 appendChild，框架的 diff 算法会把这部分 DOM 视为“外部污染”，要么覆盖掉，要么复制一份——这不是 bug，是所有权冲突。更麻烦的是，框架重渲染时可能把原生插入的节点当成新节点反复挂载，触发 iframe 重加载、事件监听器重复绑定、祖先链意外延长。
立即学习“前端免费学习笔记（深入）”；
- 打开 Elements 面板，右键目标节点 →
Break on > subtree modifications，刷新看断点停在哪（框架内部还是你的 JS） - 确认容器是否被框架
el或root配置覆盖，例如new Vue({ el: '#app' })后，别再操作#app内部 - 若需混合使用，用
ref或createRef获取真实 DOM 节点，在框架生命周期外操作 - 避免在
componentDidMount和useEffect里重复调用同一插入函数（尤其没加 deps 或 cleanup）
