当前位置：首页 > news >正文

【面试】什么是回流和重绘

news 来源：原创 2025/6/20 18:53:00

面试被问到什么是回流和重绘，毫无印象，下来以后查了一下，原来是浏览器渲染机制的概念。
回流：元素的大小或几何图形变动，浏览器需要重新计算、布局和绘制整个页面或其中一部分。
重绘：元素的样式变动但不影响布局，浏览器只需重新绘制该元素。

回流（reflow）：当DOM的结构发生改变或者某个元素的样式发生变化时，浏览器需要重新计算并重新布局（layout）页面中的元素，这个过程就称为回流。回流会导致浏览器重新计算元素的位置和大小，然后重新绘制到屏幕上，是一种相对耗费资源的操作。
重绘（repaint）：当页面元素的样式（如颜色、背景等）发生变，但并不影响其布局时，浏览器只需要重新绘制（repaint）这些元素，而无需重新计算元素的布局，这个过程称为重绘。重绘的性能开销较小，因只是简单地更新元素的样式。
详见：https://cloud.tencent.com/developer/article/2363028?from_scene=register

看到优化浏览器渲染性能的几个措施时，感觉原理算是明白一些，但不知道怎么实现，所以问了一下deepseek，以下是它的回答：
好的，我将逐行解释这些优化浏览器渲染性能的策略及其原理：

使用CSS动画代替JavaScript动画
- 原理：CSS动画通过transform和opacity属性触发GPU加速，直接在合成阶段处理（不触发主线程的布局和绘制）；而JavaScript动画可能频繁操作DOM样式，导致回流（重新计算布局）和重绘（重新绘制像素）。
- 示例：用transform: translateX(100px)代替修改left属性，用opacity: 0.5代替修改background-color。
批量修改样式
- 原理：每次样式修改都可能触发一次渲染流程（回流→重绘→合成）。通过合并修改（如切换CSS类名），可将多次触发合并为单次。
- 实现：element.classList.add('active-class')一次性应用多个样式，而非多次调用element.style.width/element.style.height。

使用文档碎片（Document Fragment）

原理：DOM操作是"即时生效"的，频繁插入节点会多次触发回流。文档碎片作为离线DOM容器，允许在内存中完成批量操作后一次性插入。

实现：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // 仅触发一次回流

避免强制同步布局（布局抖动）

原理：读取布局属性（如offsetWidth）会强制浏览器立即计算最新布局（同步布局）。若在修改样式后立即读取布局属性，会导致多次无意义的布局计算。

反例：

for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = newWidth + 'px';
  console.log(elements[i].offsetWidth); // 触发同步布局
}

优化：先读取后写入，缓存布局值：

const widths = elements.map(el => el.offsetWidth); // 批量读取
elements.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px' }); // 批量写入

优先使用transform和position属性
- 原理：transform和opacity仅触发合成阶段（跳过布局和绘制），而top/left/width/height会触发完整渲染流水线。position: absolute/fixed使元素脱离文档流，其变化不会影响其他元素的布局。
避免频繁改变窗口大小
- 原理：窗口大小变化会触发全局回流（整个页面重新布局）。可通过防抖（debounce）技术优化：
```
window.addEventListener('resize', debounce(() => { /* 操作 */ }, 200));
```
节流与防抖技术
- 防抖（Debounce）：事件停止后执行（如停止缩放窗口300ms后回调）
- 节流（Throttle）：按固定频率执行（如每100ms处理一次滚动事件）
- 适用场景：scroll/resize/mousemove等高频事件。
translateZ触发GPU加速
- 原理：transform: translateZ(0)会创建独立的复合图层（Composite Layer），交由GPU处理动画，避免主线程负担。但需注意：
  - 图层过多可能导致内存问题
  - 过度使用可能引发字体渲染异常
- 替代方案：will-change: transform属性可提前通知浏览器优化。