掌握重排和重绘，让你的网页飞得更高！

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将解释重排（reflow）和重绘（repaint）的概念，并探讨它们如何影响网页性能。我们将介绍如何通过优化来减少这些操作的发生，以提升网页的响应速度和用户体验。

引言：

在网页开发中，性能优化是一个至关重要的环节。重排（reflow）和重绘（repaint）是浏览器渲染页面时发生的两个常见的性能影响操作。了解这两个概念以及如何减少它们的发生，对于提升网页性能至关重要。

正文：

1. 重排（reflow）

重排（reflow）是指浏览器重新计算元素的大小、位置等布局信息的过程。当页面中的元素发生变化时，浏览器需要重新计算元素的布局，这个过程称为重排。

重排会对性能产生负面影响，因为它会触发浏览器重新计算布局，从而导致性能下降。因此，在开发过程中，应该尽量避免触发重排。

以下是一些可能导致重排的操作：

1. 修改元素的大小、位置等属性。

2. 添加或删除元素。

3. 修改样式表。

4. 调整窗口大小或滚动页面。

要避免重排，可以尝试以下方法：

1. 使用 CSS 动画或过渡：使用 CSS 动画或过渡可以避免直接修改元素属性，从而避免触发重排。

2. 使用 requestAnimationFrame：在修改元素属性之前，使用 requestAnimationFrame 包裹修改操作，这样可以避免在动画过程中触发重排。

3. 避免使用 innerHTML：使用 innerHTML 可能会导致重排，因为它是直接修改 DOM 结构。可以考虑使用 createElement 和 appendChild 方法来避免重排。

4. 避免使用 window.resize 和 window.scroll：这些方法可能会触发重排，可以考虑使用其他方法来调整窗口大小或滚动页面。

总之，重排会对性能产生负面影响，应该尽量避免触发重排。在开发过程中，可以使用上述方法来优化代码，以避免重排。

2. 重绘（repaint）

重绘（repaint）是指浏览器重新绘制元素的过程。当页面中的元素需要重新绘制以显示新的内容或样式时，这个过程称为重绘。

重绘会对性能产生负面影响，因为它会触发浏览器重新绘制元素，从而导致性能下降。因此，在开发过程中，应该尽量避免触发重绘。

以下是一些可能导致重绘的操作：

1. 修改元素的内容：修改元素的内容可能会导致重绘，因为浏览器需要重新计算元素的内容并将其绘制到屏幕上。

2. 修改元素的样式：修改元素的样式可能会导致重绘，因为浏览器需要重新计算元素的布局并将其绘制到屏幕上。

3. 调整窗口大小或滚动页面：这些操作可能会导致重绘，因为浏览器需要重新计算布局并绘制新的内容。

要避免重绘，可以尝试以下方法：

1. 使用 requestAnimationFrame：在修改元素属性之前，使用 requestAnimationFrame 包裹修改操作，这样可以避免在动画过程中触发重绘。

2. 使用 memo 函数：使用 memo 函数可以缓存函数的结果，避免在每次渲染时都重新计算。

3. 避免使用 window.resize 和 window.scroll：这些方法可能会触发重绘，可以考虑使用其他方法来调整窗口大小或滚动页面。

总之，重绘会对性能产生负面影响，应该尽量避免触发重绘。在开发过程中，可以使用上述方法来优化代码，以避免重绘。

3. 优化策略

为了减少重排和重绘的发生，我们可以采取以下优化策略：

（1）避免频繁地修改DOM结构。每一次DOM操作都可能引发重排或重绘。因此，我们应该尽可能地减少DOM的修改次数。

（2）使用CSS样式属性进行样式的修改。CSS样式属性的变化通常只会引发重绘，而不是重排。因此，我们应该尽量使用CSS来修改样式。

（3）使用虚拟DOM。虚拟DOM库如React、Vue等，可以缓存DOM的状态，只有在必要时才进行实际的DOM更新。这样可以大大减少重排和重绘的发生。

总结

重排和重绘是浏览器渲染页面时的两个常见操作，它们可能会影响网页的性能。通过优化我们的代码，我们可以减少这些操作的发生，从而提升网页的响应速度和用户体验。

参考资料：

• Web性能优化：重排（reflow）和重绘（repaint）
• 理解重排（reflow）和重绘（repaint）