非法嵌套会触发浏览器自动修正DOM，导致节点分裂、样式重算和重排扩散；如<p><div>强制拆为<p></p><div><p></p>，使<body>参与重排；<ol>子非<li>、<table>缺<tbody>、<header>内嵌<main>等均属高危结构。
直接改 HTML 结构就能显著降低重排概率，关键不是“写得多语义”，而是避开浏览器无法提前确定尺寸、必须反复回溯计算的布局模式。
哪些嵌套顺序会隐式触发重排
浏览器解析时会自动修正非法嵌套，这个过程本身就会强制重排。比如 <p><div>content</div></p> 会被拆成 <p></p><div>content</div><p></p>，导致父级 <body> 参与重排。
-
<p>内含<div>、<ul>、<h3>：全部非法，DOM 树分裂不可避免 -
<ol>或<ul>直接子节点不是<li>：浏览器补全时插入匿名节点，序号重置 + 多次 layout -
<table>缺<tbody>：自动插入匿名表格对象，破坏table-layout: fixed的列宽锁定 -
<header>里塞<main>：语义冲突，部分引擎降级为<div>，丢失内置布局提示
怎么用 display: contents 消除无意义 wrapper
它让父元素从渲染树中“消失”，子元素直接受上层 flex/grid 控制，避免多一层布局上下文和继承链。但注意兼容性限制。
- 适用场景：
<div class="card"><h3>标题</h3><p>内容</p></div>→ 改为style="display: contents;"，前提是父容器是 flex/grid - 不支持 IE，Safari 15.4+ 才开始支持；若需兼容老版本，用 JS 动态移除 wrapper 更稳妥
- 慎用于有伪元素（
::before/::after）或需要继承font、color的场景——这些属性不会向下透传
为什么 contain: layout paint 要尽早加在容器上
它等于给浏览器下指令：“这个区域内部的变化，别往外扩散”。但必须在初始 HTML 就声明，否则 JS 后续加会触发一次额外重排。
立即学习“前端免费学习笔记（深入）”；
- 加在列表容器上：
<ul id="list" style="contain: layout paint;"></ul>，后续 JSappendChild()不会波及 header 或 footer - 避免
contain: strict：它禁用部分继承（如getComputedStyle(el).color可能返回空值），测试后再上线 - Chrome 56+、Firefox 69+、Safari 15.4+ 支持；Edge 已随 Chromium 统一，但旧版 Edge 18- 不支持
table 布局为什么是重排黑洞
表格单元格宽度依赖内容长度 + 同行其他单元格，浏览器无法局部优化，只能整表重排。哪怕只改一个 <td> 的文本，也大概率触发全表 layout。
- 必须用 table？设死所有
<td>的width和white-space: nowrap，防止内容撑开 - 禁用动态增删：
insertRow()、deleteRow()几乎必然引发全表重排 - 优先替换成
display: grid或display: flex：二者支持独立轴向伸缩，重排影响可控
真正容易被忽略的是：重排问题往往不在首屏，而在用户交互后。如果初始 HTML 没预留低开销操作空间（比如没给列表留空容器、wrapper 层级过深、用了 table 布局），JS 后续任何批量更新都会被迫高频触发重排——这时候再优化 CSS 或 JS 就晚了。
