【面试】回流和重绘

当你在面试中谈论网页性能优化时，两个重要但容易被忽视的概念是"重绘"和"回流"。这两个家伙可能听起来有点像超级英雄，但实际上，它们是与网页加载速度和用户体验密切相关的概念。在这篇文章中，我们来谈谈它们，为什么它们如此重要，以及如何在面试中聊起它们。

所以，究竟什么是重绘和回流呢？

• 重绘，简而言之，就是当你改变一个元素的外观，比如改变颜色、背景或阴影，但不改变它的位置时，浏览器会重新绘制这个元素。这个操作相对轻松，不太影响性能。

• 回流则是复杂的家伙。它发生在页面的布局或尺寸改变时，比如你改变窗口大小、加删DOM元素、修改元素尺寸、内容改变或者CSS样式变化。回流会导致整个页面或部分页面的重新布局计算，因此比重绘要费时费力。

为什么我们应该关心重绘和回流呢？

重绘和回流会占用大量计算资源。如果它们发生太频繁，网页加载会变得缓慢，用户体验下降。特别是在移动设备上，这些操作可能引发严重的性能问题。

那么，在面试中如何谈论减少重绘和回流呢？

• 使用CSS硬件加速：某些CSS属性，比如transform和opacity，可以通过GPU硬件加速，减少了重绘和回流的开销。

• 批量操作：如果你需要多次修改元素的样式或布局，最好将这些操作合并在一起，减少回流次数。比如，你可以一次性修改多个元素，而不是一个一个地改。

• 避免频繁访问布局属性：频繁使用JavaScript访问布局属性（像offsetWidth和offsetHeight）会触发回流。存储这些属性的值，以避免重复计算。

• 使用CSS动画：相比使用JavaScript动画，CSS动画更高效，因为它们通常不会触发回流。

• 使用节流和防抖：对于频繁触发的事件，如窗口大小变化，可以使用节流和防抖来延迟处理，减少回流次数。

所以，这就是关于重绘和回流的一些基本概念。

前端人！加油！