重排时应避免读写混用、循环中反复读取布局属性、逐个设置style样式；优先用className切换、读写分离、transform/opacity替代几何属性；批量操作用DocumentFragment。
重排（reflow）发生时哪些操作必须避免
重排是浏览器重新计算元素几何属性并重新布局的过程，只要触发了尺寸、位置、结构变化，就会强制同步执行。最常被忽略的是读写混用——比如先读 offsetHeight，再改 style.width，浏览器会立刻触发一次重排来返回准确值，紧接着又因样式修改再触发一次。
- 避免在循环中反复读取
offsetTop、clientWidth、getComputedStyle()等触发 layout 的属性 - 批量修改样式：优先用
className切换预设 CSS 类，而非逐个设置style.xxx - 需要动态计算尺寸时，把所有读操作集中到前面，所有写操作集中到后面（“读-写分离”）
- 对频繁变动的元素，用
transform或opacity替代top/left/width/height——它们只触发重绘（repaint），不触发重排
哪些 CSS 属性修改会强制重排
不是所有样式变更都代价相同。浏览器对某些属性做了优化，而另一些则直接关联 layout tree，一改就重排。关键看该属性是否影响盒模型尺寸或文档流位置。
- 触发重排：
width、height、padding、margin、border、display、position、font-size、left/top - 通常不触发重排（仅重绘或合成）：
color、background-color、visibility、outline、transform、opacity -
transform: translateZ(0)或will-change: transform可将元素提升为独立图层，后续transform和opacity变更由 GPU 合成，完全绕过主线程 layout
JavaScript 中批量 DOM 操作的正确姿势
直接对 document.body 多次 appendChild 或修改 innerHTML，每次都会导致重排。应尽可能减少 DOM 树的“接触次数”。
- 用
DocumentFragment缓存多个节点，最后一次性插入：const frag = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const el = document.createElement('div'); el.textContent = i; frag.appendChild(el); } document.getElementById('list').appendChild(frag); - 用
element.classList.add()批量切换类名，比反复赋值element.style.cssText更安全 - 动画场景下，用
requestAnimationFrame对齐浏览器刷新节奏，避免在非帧起点强行读写：function updatePosition() { // 先读所有需要的 layout 数据 const pos = el.offsetLeft; // 再统一写 el.style.transform = `translateX(${pos + 10}px)`; } requestAnimationFrame(updatePosition);
Chrome DevTools 里怎么定位重排热点
靠肉眼猜没用。得用真实工具确认哪段 JS 或哪个样式变更真正拖慢了渲染。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Rendering 面板 → 勾选
Paint flashing和Layout Shift Regions，可直观看到重绘/重排区域 - 录制 Performance 面板中的用户操作，筛选
Layout和Recalculate Style事件，点开看调用栈，定位到具体 JS 行号或 CSS 规则 - 注意
Forced synchronous layout这类黄色警告，它明确标出你在 JS 中强制读取了 layout 属性 - 移动端尤其敏感：iOS Safari 对重排更保守，同一段代码在桌面端不明显，但在真机上可能卡顿明显
setTimeout 包裹却仍读写混用的逻辑。 
