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; 属性
javascript
// 手动提升为合成层属性
will-change: transform; /* 最标准 */
transform: translateZ(0); /* 传统 hack */