直接改html结构可显著降低重排概率，关键在于避开浏览器无法预知尺寸、必须回溯计算的非法嵌套（如p内嵌div/ul/h3、ol/ul子非li、table缺tbody、header嵌main），这些会触发自动修正、dom分裂和重排扩散；display: contents可消除无意义wrapper但需兼容性考量；contain: layout paint应尽早声明于容器；table布局是重排黑洞，优先用flex/grid替代。
直接改 HTML 结构就能显著降低重排概率，关键不是“写得多语义”，而是避开浏览器无法提前确定尺寸、必须反复回溯计算的布局模式。
哪些嵌套会触发浏览器自动修正并强制重排
非法嵌套不是语法错误，而是会让浏览器在解析时生成冗余节点、拉长祖先链、扩散重排范围。比如 <p></p>
<div>content</div>
<p></p>
<div>content</div>
<p></p>，多出两个空 <p></p>，导致 -
<p></p>内含<div>、<code><ul></ul>、<h3></h3>：全部非法，DOM 分裂不可避免 -
<ol></ol>或<ul></ul>直接子节点不是<li>：浏览器补全时插入匿名节点，序号重置 + 多次 layout <table> 缺 <code><tbody>：自动插入匿名表格对象，破坏 <code>table-layout: fixed的列宽锁定-
<header></header>里嵌<main></main>：语义冲突，部分引擎降级为<div>，丢失内置布局提示<h3>怎么用 display: contents 消除无意义 wrapper</h3> <p>它让父元素从渲染树中“消失”，子元素直接受上层 <code>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></header>或<footer></footer> - 避免
contain: strict：它禁用部分继承（如getComputedStyle(el).color可能返回空值），上线前必须测试 - Chrome 56+、Firefox 69+、Safari 15.4+ 支持；旧版 Edge 18- 不支持
为什么 table 布局是重排黑洞
表格单元格宽度依赖内容长度 + 同行其他单元格，浏览器无法局部优化，只能整表重排。哪怕只改一个
<td> 的文本，也大概率触发全表 layout。<ul><li>必须用 <code>table？设死所有<td> 的 <code>width和white-space: nowrap，防止内容撑开 - 适用场景：
- 禁用动态增删：
insertRow()、deleteRow()几乎必然引发全表重排 - 优先替换成
display: grid或display: flex：二者支持独立轴向伸缩，重排影响可控
真正卡顿的源头，往往藏在 DevTools 的 Layers 面板里——那些边界重叠、尺寸零碎的合成层，就是非法嵌套 + 自动修正共同导致的渲染子树碎片化信号。别只看源码，要看浏览器最终生成的 DOM 树。
