CSS——重排和重绘

1.概念

重排（Reflow）与重绘（Repaint）是浏览器渲染管线中的两个关键环节，直接决定页面性能。重排一定触发重绘，重绘不一定触发重排。

1.2 重排（Reflow）

重排 = Layout(布局) 阶段重新计算元素的几何信息（位置、大小）。触发条件：

典型代码	说明
el.style.width = '200px'	改变宽度
el.style.display = 'none'	隐藏元素
el.classList.add('col-3')	类名改变布局
dom.offsetHeight / getComputedStyle	强制同步刷新
字体大小、内容变化、图片加载完成	都会让浏览器重新算盒子

特点

• 作用范围：从当前元素向上找定位祖先，向下找所有子节点，可能整页一起算。

• 耗时：与 DOM 大小成正比，移动端尤其明显。

• 会阻塞后续 JS 执行（渲染线程和主线程互斥）。

1.3 重绘(Repaint)

重绘 = Paint 阶段重新绘制像素（颜色、阴影、文字等）。触发条件：

典型代码	说明
el.style.color = 'red'	改文字颜色
el.style.boxShadow = '...'	改阴影
el.style.visibility = 'hidden'	visibility 隐藏仍占位，不影响布局

特点

• 跳过 Layout 阶段，比重排便宜(性能：重排 > 重绘)，但仍需重新绘制像素。

• 若元素在独立合成层（will-change、transform、opacity），可直接 GPU 合成，连 Paint(绘制) 都跳过。

2.扩展

2.1 translate去改变位置——减少重排

translate代替传统定位方式(top、left、right、bottom),它操作的是合成层而不是布局层，所以浏览器不会因位置改变而重新布局。

新版本浏览器会自动将元素提升为独立合成层，而旧版本需要will-change: transform; 属性

// 手动提升为合成层属性
will-change: transform;   /* 最标准 */
transform: translateZ(0); /* 传统 hack */