题目
解释浏览器渲染流程中的重排（Reflow）和重绘（Repaint）
信息
- 类型：问答
- 难度：⭐
考点
浏览器渲染原理,重排与重绘,性能优化
快速回答
重排和重绘是浏览器渲染的关键步骤：
- 重排（Reflow）：计算元素几何属性（尺寸/位置），触发条件包括修改布局属性（如宽度、高度、字体大小）
- 重绘（Repaint）：更新元素外观（颜色/背景等），不改变布局
- 优化原则：避免频繁重排，批量DOM操作，使用transform/opacity等GPU加速属性
1. 核心概念
重排（Reflow）：当DOM变化影响元素几何属性（尺寸/位置）时，浏览器需要重新计算布局。这是性能开销最大的操作。
重绘（Repaint）：当元素外观改变但不影响布局时（如颜色/背景），浏览器只需重绘受影响区域。
// 触发重排的示例
const el = document.getElementById('box');
el.style.width = '200px'; // 修改宽度 → 重排+重绘
// 仅触发重绘的示例
el.style.color = 'red'; // 修改颜色 → 仅重绘2. 触发场景对比
| 重排触发场景 | 重绘触发场景 |
|---|---|
| 修改元素尺寸（width/height） | 修改颜色（color） |
| 改变字体大小（font-size） | 修改背景（background） |
| 添加/删除DOM元素 | 调整透明度（opacity） |
| 窗口大小变化（resize） | 阴影效果（box-shadow） |
3. 性能优化实践
- 批量DOM操作：使用文档片段（DocumentFragment）减少重排次数
// 优化前：多次重排 for(let i=0; i<100; i++) { document.body.appendChild(document.createElement('div')); } // 优化后：单次重排 const fragment = document.createDocumentFragment(); for(let i=0; i<100; i++) { fragment.appendChild(document.createElement('div')); } document.body.appendChild(fragment); - GPU加速：使用
transform和opacity触发合成层，避免重排// 使用transform替代top/left el.style.transform = 'translateX(100px)'; // 仅重绘 // 替代 el.style.left = '100px'; // 触发重排 - 读写分离：避免交替读写布局属性，利用浏览器渲染队列
// 错误写法：触发多次重排 el.style.width = (el.offsetWidth + 10) + 'px'; el.style.height = (el.offsetHeight + 10) + 'px'; // 正确写法：批量写入 const newWidth = el.offsetWidth + 10; const newHeight = el.offsetHeight + 10; el.style.width = newWidth + 'px'; el.style.height = newHeight + 'px';
4. 常见错误
- 在循环中频繁读取
offsetTop/scrollHeight等布局属性 - 使用
table布局（局部变化可能引发全局重排） - 未使用CSS3硬件加速属性处理动画
5. 扩展知识
- 渲染队列机制：浏览器会合并连续的重排操作，但读取布局属性会强制刷新队列
- CSS图层（Composite Layers）：使用
will-change: transform创建独立图层提升性能 - 布局抖动（Layout Thrashing）：指频繁强制重排导致的性能瓶颈，可通过开发者工具的Performance面板检测
