上篇说到，渲染流水线里排版（Layout）和绘制（Paint）最贵。这两步在开发里常叫重排（Reflow）和重绘（Repaint）。

一、重排 = 重新量房

当你改了元素的几何属性（宽、高、位置、增删节点），浏览器得重新算所有受影响盒子的位置和大小——就像装修改了墙体，得重新量一遍房。重排一定昂贵，而且常常连带着重绘。

二、重绘 = 重新刷漆

只改了外观（颜色、背景、阴影），位置没变，浏览器不用重新量房，只要把那块重新涂一遍色——重新刷漆。比重排轻，但也不便宜。

量房 vs 刷漆

三、怎么少卡顿

  • 批量改样式：别在循环里一次次改 DOM，先把要改的攒一起，或用 class 一次性切换。
  • 少碰几何属性：能用 transform/opacity 实现动画就别改 width/top，前者常走更便宜的合成层。
  • 脱离文档流操作：用 display:none 隐藏后再批量改，或离线改完再挂回。
  • 用 requestAnimationFrame 把视觉更新对齐到浏览器刷新节奏。

一句话：重排是“改了尺寸位置→重新量房”（最贵），重绘是“只改外观→重新刷漆”（较轻）；想流畅，就少触发重排、用 transform/opacity 走合成层。