强制同步重排的HTML结构包括：table布局（改任意td触发整表重排）、内联元素混用float、inline-block父容器含vertical-align子元素；读取offsetWidth等后立即改样式也会强制同步触发。
直接改 HTML 结构就能显著降低回流（reflow）频率，关键不是“写得多干净”，而是避开浏览器无法提前确定尺寸的布局模式。
哪些 HTML 结构会强制同步重排
浏览器在 JS 执行中读取某些布局属性时，会立刻 flush 排队中的样式变更——这不是你代码写错了，而是结构本身让浏览器没得选。
-
table布局：单元格宽度依赖内容和同行其他单元格，改任意一个td就可能触发整表重排 - 内联元素 +
float混用：浮动脱离文档流，后续元素定位需反复回溯计算位置 -
display: inline-block父容器含vertical-align子元素：对齐行为依赖行高、字体大小、兄弟元素高度，渲染时无法跳过几何计算 - 读取
offsetWidth/getBoundingClientRect()后立即改样式：强制同步触发，极易形成“读-改-读-改”循环
用 transform 和 opacity 替代哪些 CSS 属性
这两个属性能走合成层（compositor layer），跳过主渲染线程的 layout 和 paint 阶段，但前提是元素已提升为独立图层。
- 用
transform: translateX(10px)替代left: 10px或margin-left: 10px - 用
transform: scale(1.2)替代直接改width/height - 用
opacity: 0替代visibility: hidden或display: none（注意：opacity: 0仍响应事件，需配pointer-events: none） - 不适用场景：
transform无法替代margin的空间占位作用；opacity不改变文档流，不能用于“彻底移出布局”的需求
DOM 批量插入时怎么避免多次重排
向 document.body 连续追加 100 个节点，浏览器可能重排 100 次；一次性挂载，只触发一次。
立即学习“前端免费学习笔记（深入）”；
- 新增多个节点：用
document.createDocumentFragment()收集，最后一次性appendChild()到目标父节点 - 替换整个区域：先
el.innerHTML = ''清空，再一次性写入完整 HTML 字符串，比逐个removeChild()+appendChild()更轻量 - 避免在循环中操作 live collection：
document.getElementsByTagName('div')是实时集合，每次访问都可能触发重排；应先转成数组[...document.getElementsByTagName('div')]再遍历 - 仅改文本内容时，优先用
textContent而非innerHTML——后者会触发 HTML 解析，哪怕字符串里没标签
class 切换为什么比内联 style 更安全
内联样式修改会直接触发样式计算，而 class 切换把样式逻辑收口到 CSSOM，浏览器可以批量合并、延迟计算甚至跳过部分更新。
- 同一 class 中多个属性变更，浏览器可一次性解析并复用计算结果；而连续设置
el.style.width、el.style.height、el.style.margin，每条都可能触发独立样式计算 - class 可配合
will-change: transform提前提示浏览器提升图层，但要注意：加太多反而增加内存开销和纹理上传耗时 - 隐藏元素时，
display: none比visibility: hidden更彻底——前者从渲染树中移除，后者仍占位且参与布局计算
真正卡顿的根源，往往不在某一行 JS，而在 HTML 结构让浏览器失去了优化余地：比如嵌套过深的 table、混用 float 和 inline 的老式栅格、或在循环里反复读写 offsetTop。这些地方改结构比调 JS 更有效。
