浏览器渲染流程：重排、重绘与合成

从 URL 到像素

输入 URL 后，浏览器拿到 HTML，渲染管线大致是：

HTML → DOM 树
CSS  → CSSOM 树
DOM + CSSOM → Render Tree（只含可见节点）
→ Layout 布局（计算几何位置）
→ Paint 绘制（填充像素）
→ Composite 合成（分层合并上屏）

display: none 的元素不在渲染树里（但还在 DOM 里）；visibility: hidden 保留位置，仍占布局。

重排 Reflow

几何属性变化（宽高、位置、字体大小、增删 DOM、甚至读取 offsetWidth）会导致重新计算布局，叫重排。重排成本最高，且会连锁：子元素、父元素、相邻区域都可能受影响。

// 反例：循环里反复读写，每次都触发重排
for (let i = 0; i < 100; i++) {
  el.style.left = el.offsetLeft + 10 + 'px'
}

浏览器有批量异步优化，但读取布局属性会强制提前刷新队列（forced reflow）。

重绘 Repaint

外观变化但不影响布局（color、background、visibility）只触发重绘，跳过布局阶段，比改几何属性便宜。

合成 Composite

transform、opacity 的变化可以只在合成线程处理，既不布局也不绘制，是性能最好的动画方式：

/* 推荐：GPU 合成，不阻塞主线程 */
.box { transform: translateX(100px); will-change: transform; }

/* 避免：动画 left/top 会逐帧重排 */
.bad { left: 100px; transition: left .3s; }

优化清单

• 用 class 批量改样式，不要逐条操作 style
• 离线操作 DOM：display:none 改完再显示，或用 DocumentFragment
• 动画只用 transform / opacity
• 频繁动画元素提升为合成层（will-change，但别滥用，层也吃内存）
• 防抖处理 scroll/resize