自从我们走上程序员这条崎岖道路以来，web端的性能优化是一个至关重要的话题，前端当然也不例外。而前端性能优化不仅关系到用户体验，还可以显著影响网站的排名、转化率和用户满意度。在这篇文章中，我们将着重深入探讨两个关键概念：回流（Reflow） 和 重绘（Repaint），以及它们与浏览器的关系。我们将了解它们的原理、影响以及如何通过优化前端代码来减少它们的发生，以提升网页性能。
什么是回流和重绘？
在我们深入研究回流和重绘之前，让我们先了解一下它们是什么。
回流（Reflow） 是浏览器为了重新渲染部分或全部文档而重新计算元素的几何属性的过程。这包括了元素的尺寸、位置、布局和页面的结构。回流是一种比较昂贵的操作，因为它会触发浏览器重新计算并重新绘制元素，可能导致性能下降。
重绘（Repaint） 是当元素样式发生改变，但没有影响其布局时，浏览器只需要重新绘制元素的外观的过程。这不涉及元素的位置或尺寸的改变。相比于回流，重绘是一种较为轻量级的操作。
回流和重绘与浏览器的关系
回流和重绘操作直接涉及到浏览器的渲染引擎。浏览器的渲染引擎负责将HTML、CSS和JavaScript转化为用户可见的网页。让我们更深入地了解回流和重绘是如何与浏览器的工作流程相关联的。
浏览器的工作流程
-
解析HTML和构建DOM树：浏览器首先解析HTML，构建DOM（文档对象模型）树。DOM树表示页面的结构，每个元素都是树中的一个节点。
-
解析CSS和构建CSSOM树：接下来，浏览器解析CSS样式表，并构建CSSOM（CSS对象模型）树。CSSOM树表示页面的样式信息，每个CSS规则都是树中的一个节点。
-
合并DOM树和CSSOM树，构建渲染树 ：浏览器将DOM树和CSSOM树合并成一个渲染树（Render Tree）。渲染树只包含需要渲染的可见元素，不包括不可见的元素（例如
display: none的元素）。 -
布局（回流）：一旦有了渲染树，浏览器就需要计算每个元素在屏幕上的确切位置和大小，这个过程叫做布局或回流。它会确定元素的位置、尺寸和相互关系。
-
绘制（重绘）：一旦布局完成，浏览器就可以进行绘制或重绘操作。这时候，浏览器知道每个元素在屏幕上的准确位置和外观，可以开始将它们绘制到屏幕上。
-
合成与显示：最后，浏览器将渲染树的内容进行合成，并显示在屏幕上，呈现给用户。
什么会触发回流和重绘？
回流和重绘的触发条件各不相同。了解这些条件对于优化前端性能至关重要。
回流会在以下情况下触发：
- 改变窗口大小。
- 改变元素的尺寸、位置、边距、填充等。
- 修改元素的内容，例如文本或图片。
- 添加或删除可见的DOM元素。
- 激活CSS伪类，例如
:hover。 - 查询某些属性或调用某些方法，需要布局信息，如
offsetWidth、offsetHeight、clientWidth、clientHeight、getComputedStyle、scrollWidth、scrollHeight等。
重绘会在以下情况下触发：
- 修改元素的背景色、文字颜色、边框颜色等。
- 改变元素的可见性，例如使用
visibility: hidden。 - 使用CSS3的某些属性，如
transform和opacity，但不影响布局。
回流和重绘的性能影响
回流和重绘操作会对性能产生直接的影响，因为它们需要浏览器重新计算和绘制页面的一部分或全部内容。这可能会导致页面的性能下降，用户可能会感到页面加载缓慢或卡顿。
1. 性能下降
触发回流和重绘的操作通常比较昂贵，因为它们需要浏览器重新计算和渲染元素的布局和外观。如果这些操作频繁发生，页面的性能将明显下降，用户可能会感到页面加载缓慢或卡顿。
2. 电池寿命问题
频繁的回流和重绘操作会增加设备的能耗，尤其是在移动设备上。这可能导致设备电池寿命的缩短，影响用户的体验。
3. 用户交互延迟
回流和重绘操作也可能导致用户交互的延迟。当浏览器正在执行这些操作时，用户可能无法立即响应页面上的交互，这会影响用户体验。
如何优化回流和重绘
了解浏览器的工作流程有助于我们更好地优化回流和重绘。以下是一些优化回流和重绘的方法：
1. 使用transform和opacity
如果你要对元素进行动画或改变其外观，尽量使用transform和opacity，而不是直接改变元素的尺寸、位置或布局。这样可以减少回流的发生，因为transform和opacity的改变不会影响元素的布局。
css
/* 使用 transform 和 opacity 进行动画 */
.element {
transform: translateX(100px);
opacity: 0.5;
}
/* 避免使用直接改变布局的属性 */
.element {
/* 避免直接改变尺寸、位置等属性 */
}2. 批量操作
尽量将多个样式修改操作合并成一次，以减少回流和重绘的次数。使用类似 requestAnimationFrame 的工具可以帮助你在一帧内合并多个操作。
javascript
// 不推荐的写法
element.style.width = '100px';
element.style.height = '100px';
// 推荐的写法
element.style.cssText = 'width: 100px; height: 100px;';3. 使用requestAnimationFrame
requestAnimationFrame是一个用于执行动画的API，它可以帮助你在浏览器下一次重新渲染之前执行动画操作。这可以减少回流和重绘的发生，因为浏览器会将多个操作合并到一次渲染中。
javascript
function animate() {
// 执行动画操作
// ...
// 在下一次重新渲染之前调用 animate
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);4. 避免频繁操作布局属性
尽量避免频繁读取布局属性，因为这会触发回流。如果需要多次使用某个属性的值，最好将其缓存起来，而不是多次查询。
javascript
// 不推荐的写法
for (let i = 0; i < elements.length; i++) {
// 每次循环都触发回流
const width = elements[i].offsetWidth;
}
// 推荐的写法：缓存属性值
const widths = [];
for (let i = 0; i < elements.length; i++) {
// 只触发一次回流
widths[i] = elements[i].offsetWidth;
}5. 使用CSS硬件加速
某些浏览器可以通过启用CSS硬件加速来减少回流和重绘的开销，具体方式是使用transform或opacity属性，并设置will-change来提示浏览器进行硬件加速。
css
.element {
transform: translateZ(0); /* 启用硬件加速 */
will-change: transform; /* 提示浏览器要加速的属性 */
}6. 使用will-change
will-change属性可以提示浏览器哪些属性将会被改变，以便进行优化。在使用动画或者即将进行的重绘操作前，你可以使用will-change来通知浏览器，如下所示：
css
.element {
will-change: transform, opacity;
}
// 在动画之前添加上述代码，以启用硬件加速7. 节流和防抖
在用户交互或滚动等事件处理中，使用节流和防抖技术来限制回流和重绘的触发次数。这有助于减少不必要的性能开销。以下是一个简单的示例：
javascript
// 节流示例
function throttle(callback, delay) {
let lastTime = 0;
return function () {
const currentTime = new Date().getTime();
if (currentTime - lastTime >= delay) {
callback();
lastTime = currentTime;
}
};
}
// 防抖示例
function debounce(callback, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(callback, delay);
};
}注意事项
回流和重绘的消耗
回流比重绘消耗更大。回流会导致浏览器重新计算并渲染元素的布局，而重绘只会重新绘制元素的外观。因此，尽量减少回流的发生，特别是在动画或高性能要求的场景中。
批量操作
尽量将多个样式修改操作合并成一次，以减少回流和重绘的次数。使用类似 requestAnimationFrame 的工具可以帮助你在一帧内合并多个操作。
缓存属性值
避免多次查询相同的布局属性值。如果需要多次使用某个属性的值，最好将其缓存起来，以减少回流的触发。
回流和重绘优劣势
回流的优劣势：
优势：
- 回流
提供了准确的布局信息，因此在获取元素的几何属性时非常有用。
- 当页面结构发生变化时，回流是必要的，因为它确保了页面布局的正确性。
劣势：
- 回流消耗较多的计算资源，可能导致页面性能下降。
- 频繁的回流操作会导致页面的卡顿和电池消耗增加。
重绘的优劣势：
优势：
- 重绘相对较轻量，不会影响页面的布局。
- 在某些情况下，重绘是必要的，因为它确保了样式的更新。
劣势：
- 重绘不提供有关元素布局的信息，因此无法用于获取几何属性。
- 频繁的重绘操作仍然会消耗一定的计算资源，但通常比回流更轻量。
总结
回流和重绘是前端性能优化中需要注意的重要概念。了解它们的触发场景、注意事项以及优劣势，可以帮助你更好地编写高性能的前端代码。在实际项目中，尤其是需要进行动画或频繁样式修改的情况下，合理减少回流的发生是提高页面性能的关键。通过使用工具、缓存属性值和合并操作，你可以有效地降低回流和重绘的开销，提供更好的用户体验。如果你关心网页性能，不妨花些时间来优化和减少回流和重绘的发生，老板会由衷地感谢你的努力，你们的项目也会因此而变得更具吸引力和竞争力。