下面是关于“Web面试常问回流reflow与重绘repaint原理及区别”的完整攻略。

下面是关于“Web面试常问回流reflow与重绘repaint原理及区别”的完整攻略。

一、引言

在 Web 开发过程中，为了让页面呈现出更好的效果，经常会对页面元素进行样式和位置的调整。当这些样式和位置的改变影响到元素的布局时，就会触发回流(reflow)和重绘(repaint)。这两个过程都会消耗大量的计算资源，影响页面的性能和用户体验。

二、重绘和回流是什么？

重绘（repaint）

当元素的样式改变（例如颜色、字体大小），但是并没有影响到元素在文档流中的位置时，就会触发重绘。在重绘过程中，浏览器会使用之前存储的元素样式信息来更新元素的显示样式。

重绘可以理解为画出新的视图，但布局并没有改变。比如，我们把一个 div 的背景色从 000000 改为 FFFFFF，那么浏览器就会进行重绘。

回流（reflow）

当元素的尺寸、位置、布局发生变化时，浏览器就需要重新计算页面中所有受影响的元素的尺寸、位置和布局，然后重新绘制页面，这个过程就叫做回流。

回流会影响比重绘更多的页面元素，因为计算的过程比更新元素的样式更加复杂。比如说改变了页面布局（比如调整元素的宽度、高度或边距），增加或删除元素等，都会触发回流。

三、重绘和回流的原因

重绘和回流的原因非常多，以下是一些常见的原因：

• 调整窗口大小
• 用户滚动页面
• 修改元素的样式（改变颜色、背景等）
• 内容的改变（例如按下键盘、改变表单值）
• 添加、修改、删除 DOM 元素

四、如何减少重绘和回流？

由于重绘和回流会消耗大量的计算资源，因此在实际的 Web 开发过程中，我们需要尽可能地减少重绘和回流的次数，从而提高页面的性能和用户体验。下面是一些常见的优化技巧：

1. 使用“绝对定位”或“固定定位”布局，并使用 CSS3 动画代替 JavaScript 动画；
2. 避免频繁操作 DOM，可以将需要更新的 DOM 先存储在变量中，最后一次性插入页面（例如使用 innerHTML，而不是多次调用 appendChild）；
3. 对于需要通过 JavaScript 进行动态样式修改的元素，最好为这个元素新建一个 class，然后修改这个元素 class，这样只需要对该元素进行一次修改，其他样式就可以被继承；
4. 自上而下逐渐构建页面，避免多层嵌套和不必要的层级，减少回流的次数；
5. 将 DOM 元素缓存起来，在需要修改多个元素时，先将这些元素的位置等属性缓存起来，待修改完成后再一次性重新渲染。

五、重绘和回流的区别

• 重绘：只是视觉上的更新，不影响布局；
• 回流：会强制重新构建布局树和渲染树，会影响页面的布局，因为尺寸等需要重新计算。

六、示例说明

示例一

<div id="box">这是一个元素</div>

CSS:

#box {
  color: red;
  background: white;
  border: 1px solid black;
}

现在我们需要将 div 的颜色改为蓝色：

document.getElementById('box').style.color = "blue";

这个操作只会改变字体颜色，而不会影响 div 的尺寸和布局，因此只会触发重绘，而不会触发回流。

示例二

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我们现在想要将 ul 元素的宽度改为 300px:

document.querySelector('ul').style.width = "300px";

这个操作会对 ul 元素的布局产生影响，因此会触发回流。如果页面中有很多元素，性能开销就会比较大。因此，我们应该尽可能减少这种回流的次数，从而提升页面性能。