渲染树 → 布局 → 绘制 → 合成，这是渲染流水线的后三段。改变元素的几何（width/height/margin/位置/窗口 resize）触发回流（reflow，又叫重排）：整棵渲染树要重新计算位置与尺寸。只改变外观（color/background/visibility）触发重绘（repaint）：布局不变，只需重新绘制像素。回流必然重绘，重绘不一定回流。
性能上回流贵得多（可能波及整树），优化手段：① 减少直接读写布局属性（offsetWidth 读一次触发一次回流）；② 改样式用 class 批量操作而不是逐条 style；③ 脱离文档流（absolute/fixed）使回流范围缩小到自身；④ transform/opacity 交给合成层（GPU，不触发回流/重绘）——这是现代动画的性能基石。
<div id="box">动</div> <style> #box { /* ✓ 用 transform 做位移动画：不触碰布局 → 不回流 */ transition: transform .2s; will-change: transform; /* 提示提升到合成层 */ } #box.move { transform: translateX(100px); } </style> <script> const box = document.getElementById('box'); // ✗ 逐条改 style：每写一次都可能触发一次回流 box.style.left = '100px'; box.style.top = '50px'; // ✗ 强制同步布局：读布局 + 写布局交替 = 每帧都回流 for (let i = 0; i < 100; i++) { box.style.width = box.offsetWidth + 1 + 'px'; // 读→写→读→写… } // ✓ 批量写：写完再读（读写分离） box.style.cssText = 'left:100px; top:50px;'; const w = box.offsetWidth; // 只触发一次回流 </script>