【前端性能优化】深入解析重绘和回流，构建高性能Web界面

在这里插入图片描述

🔥 个人主页：空白诗

在这里插入图片描述

文章目录

- 🎯 引言：探索Web性能的基石
- 🏗️ 基础概念：什么是重绘和回流？
- - 📌 回流（Reflow）
  - 📌 重绘（Repaint）
- 🔦 触发条件：何时发生重绘与回流？
- - 📌 回流（Reflow）触发条件
  - 📌 重绘（Repaint）触发条件
- 🎮 实战演练：代码中的重绘与回流
- - 📌 回流示例
  - 📌 重绘示例
- 🔧 性能优化策略
- - 📌 减少样式计算
  - 📌 使用CSS Transform进行动画
  - 📌 离线布局与智能调度
  - 📌 避免不必要的读取
  - 📌 其他策略
- 💯 面试必考
- - 📌 什么是重绘（repaint）和回流（reflow），它们有什么区别？
  - 📌 哪些操作会引起回流（reflow）？
  - 📌 怎样减少重绘和回流，提高页面性能？
  - 📌 为什么说回流一定会引起重绘，而重绘不一定引起回流？
- 📚 总结

在这里插入图片描述

🎯 引言：探索Web性能的基石

在快速发展的Web开发领域，用户界面的流畅性和响应速度直接影响着用户体验。其中，重绘（Repaint）与回流（Reflow）作为影响性能的关键因素，常常成为开发者优化的重点。本文旨在深入剖析这两个概念，通过理论讲解与实战演练相结合的方式，带你掌握优化网页性能的必备技能。🚀

🏗️ 基础概念：什么是重绘和回流？

在这里插入图片描述

📌 回流（Reflow）

在Web浏览器的工作流程中，回流是一个关键步骤，它发生在浏览器需要根据DOM元素的尺寸、位置或某些视觉属性变化来重新计算元素的布局情况时。具体来说，当一个元素的几何属性改变，比如宽度、高度或者隐藏/显示状态变动，浏览器执行以下步骤：

计算新布局：浏览器首先基于最新的样式信息重新计算受影响元素的大小和位置，这个过程包括其所有子元素，乃至可能影响到的其他部分页面布局。这是一个递归过程，因为父元素的变化通常会影响子元素的布局。
构造渲染树：基于新的布局信息，浏览器更新或重新构造渲染树（包含DOM元素和CSS样式的组合结构，用于计算最终的像素颜色值）。
分层与合成准备：对于复杂的布局变化，可能还需要对页面进行分层处理，确定哪些部分可以独立重绘，哪些需要一起重排。
绘制与合成：最后，浏览器根据更新后的渲染树和分层信息，重新绘制屏幕上的内容。回流由于涉及整个布局计算，所以相比重绘来说，是一个更消耗资源的过程。

📌 重绘（Repaint）

重绘则是指当页面中元素的外观（如颜色、背景、边框样式等）发生变化，但不涉及元素尺寸或位置的调整，导致的元素视觉表现更新。浏览器在这个过程中的主要操作包括：

样式计算：虽然不涉及布局，但浏览器仍需计算元素的新样式信息。
绘制更新：直接在现有布局的基础上，使用新的样式信息重绘元素，而不必重新计算布局。这一步骤只影响元素的视觉外观，不改变页面结构。

由于重绘仅涉及视觉层面的更新，不需要进行复杂的布局计算，因此相比回流，它的性能开销较低。然而，频繁的重绘仍然可能对性能产生累积性影响，尤其是在高动态的用户界面中。

综上所述，回流与重绘是浏览器渲染页面过程中不可或缺的两部分，但优化时应尽量减少它们的发生频率和成本，特别是在性能敏感的应用场景下。

🔦 触发条件：何时发生重绘与回流？

📌 回流（Reflow）触发条件

添加或删除DOM元素：当文档中添加新的可见元素或删除已存在的元素时，可能会导致周围元素或整体布局的变化，从而触发回流。
修改元素尺寸：调整元素的宽度、高度、内外边距、边框厚度等，这些变化会影响元素与其他元素的相对位置，需要重新布局。
调整元素位置：通过修改top、left、right、bottom等属性改变元素位置，同样要求浏览器重新计算布局。
修改影响布局的CSS属性：例如，改变display属性（如从block变为inline）、float、position（导致元素脱离正常文档流）、flex相关的属性等，这些都可能引起布局的重大变化。

📌 重绘（Repaint）触发条件

改变元素颜色：更新元素的前景色（color）、背景色（background-color）不会影响元素的尺寸或位置，仅需重新绘制元素外观。
背景样式变化：如修改元素的背景图片或背景图像的大小、重复方式等，如果这些变化不影响布局，就只会触发重绘。
边框样式调整：改变元素边框的样式、宽度或颜色，只要这些改动不引发布局变化，就属于重绘范畴。
文本样式变化：诸如字体大小、字体样式、文本装饰（如下划线、删除线）的变化，只要不影响元素尺寸和位置布局，就会触发重绘。

减少不必要的重绘和回流对于提升网页性能至关重要，开发者可以通过CSS选择器的高效使用、避免强制同步布局、批处理DOM操作、使用transform代替left/top进行动画等策略来优化。

🎮 实战演练：代码中的重绘与回流

📌 回流示例

document.getElementById('myDiv').style.width = '300px'; // 修改宽度，触发回流

这段代码通过JavaScript修改了元素myDiv的宽度，这种对尺寸的调整要求浏览器重新计算元素的布局以及其在页面上的位置，这将导致周围的元素也可能需要重新排列以适应这一变化。因此，这是一个典型的触发回流的操作。

📌 重绘示例

document.getElementById('myDiv').style.backgroundColor = 'red'; // 改变背景色，触发重绘

这里，代码修改了同一个元素myDiv的背景颜色。因为这个变化只影响元素的视觉表现而不改变其在布局中的位置或尺寸，浏览器不需要重新计算布局，只需在当前位置重新绘制元素，使其颜色变为红色。所以，这个操作触发的是重绘。

🔧 性能优化策略

在实际开发中，频繁的回流和重绘会显著影响页面性能，特别是回流，因为它比重绘涉及更多的计算。为了优化性能，可以采取以下措施：

📌 减少样式计算

合并CSS规则：将相似的选择器合并，减少样式表的大小，使浏览器解析更快。
内联关键CSS：对于首屏渲染，内联必要的CSS可以避免额外的HTTP请求，加速页面加载。
使用CSS预处理器（如Sass、Less）编写更简洁、模块化的代码，并自动处理浏览器兼容性问题。

📌 使用CSS Transform进行动画

硬件加速：transform属性尤其是translate3d可以触发硬件加速，使用GPU而非CPU来渲染动画，极大提高性能。
避免布局属性动画：像width、height、margin等属性的变化会触发布局重排，而transform和opacity则不会。

📌 离线布局与智能调度

requestAnimationFrame：它确保在下一次浏览器重绘之前执行回调函数，适合于执行视觉更新，帮助同步动画与屏幕刷新率。
setTimeout(fn, 0)：虽然不如requestAnimationFrame精准，但在某些场景下也可以用来推迟非紧急的DOM操作，减少阻塞。
批量处理DOM操作：将多个DOM修改操作放在一个批次中完成，减少DOM树的重绘和回流次数。

📌 避免不必要的读取

缓存布局信息：如果需要频繁访问某个元素的布局信息（如尺寸），最好先将其值缓存起来，避免重复计算。
使用ResizeObserver和MutationObserver：代替轮询布局属性，当元素尺寸改变或DOM结构变化时，这些Observer会异步通知，减少不必要的计算。

📌 其他策略

懒加载图像和资源：只在需要时加载图片和脚本，减轻首次加载负担。
代码拆分与按需加载：通过webpack等工具将代码分割成小块，用户只需加载当前页面所需的代码。
减少JavaScript执行时间：优化算法，避免长时间运行的脚本阻塞主线程，考虑使用Web Workers进行后台处理。

遵循这些最佳实践，可以显著提升Web应用的性能，为用户提供更加流畅和快速的体验。

💯 面试必考

📌 什么是重绘（repaint）和回流（reflow），它们有什么区别？

答案:

重绘指的是当页面元素的某些可视化属性（如颜色、背景色、边框等）发生变化，但不涉及元素的尺寸、位置或整体布局时，浏览器需要对该元素重新绘制其可视效果的过程。因为不需要计算布局，重绘相对较为快速。
回流（又称重排）发生在页面的布局需要被重新计算和渲染的情况，比如元素的尺寸、位置或者显示隐藏状态发生改变，这将影响到其他元素的位置。回流是一个更耗时的过程，因为它涉及到DOM结构的重新布局计算。

📌 哪些操作会引起回流（reflow）？

答案: 引起回流的操作包括但不限于：

添加或删除可见的DOM元素；
元素尺寸或位置的动态改变（例如，通过JavaScript修改元素的宽高或使用动画）；
浏览器窗口尺寸变化，导致页面布局调整；
计算某些特定的CSS属性，如offsetWidth、scrollLeft等，这些计算需要获取最新的布局信息；
改变浏览器的字体设置，可能导致文本尺寸变化，进而影响布局。

📌 怎样减少重绘和回流，提高页面性能？

答案: 减少重绘和回流的方法包括：

使用CSS transform和opacity：对于动画，尽量使用transform和opacity属性，因为这些变换不会引起回流。
避免频繁的DOM操作：尽量批处理DOM修改，或者使用DocumentFragment等技术来构建DOM树后再添加到页面中。
使用requestAnimationFrame：对于需要改变样式或布局的动画，使用requestAnimationFrame可以确保在下一次重绘之前完成所有修改，这样只会引发一次重绘。
将布局变化限制在最小范围：通过CSS选择器和层叠上下文合理安排元素，尽量减少一个元素的变化影响到其他元素的布局。
使用will-change属性：提前告知浏览器哪些属性可能会变化，帮助浏览器优化渲染流程。

📌 为什么说回流一定会引起重绘，而重绘不一定引起回流？

答案: 回流是因为元素的尺寸、位置等布局信息发生了变化，这必然导致页面的一部分或全部需要重新布局和绘制，因此回流之后必然伴随着重绘。而重绘仅涉及元素视觉外观的变化，如果仅仅改变颜色而不影响布局，那么就不需要进行布局的重新计算，也就是不需要回流。因此，重绘可以独立于回流发生。