什么是回流跟重绘？从中怎么优化网页性能？

最新推荐文章于 2024-08-05 09:56:05 发布

小五Five

最新推荐文章于 2024-08-05 09:56:05 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42373175/article/details/132739028

版权

JavaScript 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

在前端开发中，回流（reflow）和重绘（repaint）是两种重要的概念，它们直接影响到网页的渲染性能。理解这两个概念以及它们在什么场景下会被触发，对于优化网页性能具有重要意义。

一、什么是回流？

回流，也称为重计算布局（Recompute Layout），是一种当页面的部分或全部的几何属性发生改变时，浏览器需要重新计算元素的位置和大小的过程。这通常发生在以下情况：

窗口大小改变
页面的最小字体大小改变
页面的滚动位置改变
元素的隐藏和显示（例如，通过改变元素的可视性属性）
添加或删除窗口或元素
元素的内容改变导致的大小改变

当这些情况发生时，浏览器需要重新计算元素的几何属性，包括位置、尺寸和可见性等。这个过程被称为回流。

二、什么是重绘？

重绘，也称为重绘渲染树（Redraw Tree），是一种当元素的外观发生改变时，浏览器需要重新绘制元素的过程。这通常发生在以下情况：

元素的背景色、字体颜色等外观属性改变
元素的可见性改变
元素的内容改变

当这些情况发生时，浏览器需要重新计算哪些元素需要被重绘，并将这些元素绘制到屏幕上。这个过程被称为重绘。

三、如何触发回流和重绘？会带来什么问题？

回流和重绘的触发方式通常与用户的操作或浏览器的状态改变有关。

例如，当用户拖动浏览器窗口的滚动条、调整浏览器窗口的大小、点击页面的某个元素等操作时，可能会引发回流和重绘。

此外，一些编程操作也会触发回流和重绘，例如元素的属性或内容改变、使用JavaScript进行动画或交互等。

回流是影响最大的因素之一，因为它会导致整个页面的重新渲染。这意味着当页面的部分或全部的几何属性发生改变时，浏览器需要重新计算元素的位置和大小，这会消耗大量的计算资源。回流的速度较慢，因为它需要处理更多的计算任务，包括计算元素的位置和大小、绘制元素等。因此，回流对页面性能的影响较大，应该尽可能地减少回流的次数。

相比之下，重绘对浏览器性能的影响较小，因为它只涉及到改变元素的外观属性，而不影响元素的几何属性。重绘的速度较快，因为它只需要重新绘制元素的外观，而不需要重新计算元素的位置和大小。因此，重绘对页面性能的影响较小，应该尽可能地减少重绘的次数。

总的来说，回流对浏览器性能的影响比重绘更大，因为回流需要处理更多的计算任务。但是，无论是回流还是重绘，都应该尽可能地减少它们的次数，以优化页面的渲染速度和用户体验。

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

由于回流和重绘都需要消耗计算资源，因此我们应该尽可能地减少它们的触发次数。并且，

触发回流一定会触发重绘。

以下是一些减少回流和重绘影响的策略：

1. 使用requestAnimationFrame技术，它可以让浏览器在下一次重绘之前执行JavaScript代码，从而将回流和重绘操作集中在一起执行，减少操作次数。

function updateAnimation() {  
  requestAnimationFrame(() => {  
    // 在这里执行DOM操作和渲染操作  
  });  
}

2. 使用CSS3动画代替JavaScript动画，因为CSS3动画可以利用硬件加速，减少回流和重绘的次数。

@keyframes example {  
  0% { transform: rotate(0deg); }  
  100% { transform: rotate(360deg); }  
}  
  
.my-element {  
  animation: example 2s infinite;  
}

3. 避免频繁改变元素的几何属性，因为每次改变都会触发回流。

// 避免频繁改变元素的尺寸  
const element = document.getElementById("my-element");  
element.style.width = "100px"; // 只执行一次

4. 避免频繁改变元素的颜色、背景等外观属性，因为每次改变都会触发重绘。

// 避免频繁改变元素的背景颜色  
const element = document.getElementById("my-element");  
element.style.backgroundColor = "red"; // 只执行一次

5. 将DOM操作和渲染操作分开进行，避免同时进行大量的DOM操作和渲染操作。

function updateDOM() {  
  // 执行DOM操作，但不触发重绘  
  const element = document.getElementById("my-element");  
  element.innerHTML = "New content";  
}  
  
function repaint() {  
  // 执行重绘操作，但不触发DOM操作  
  const element = document.getElementById("my-element");  
  element.style.backgroundColor = "red";  
}

6. 使用文档对象模型（DOM）的异步API，如setTimeout、requestAnimationFrame等，将复杂的计算操作推迟到下一次重绘之前执行。

function performAsyncDOMUpdates() {  
  setTimeout(() => {  
    // 在这里执行DOM操作，但不触发重绘和回流  
  }, 0);  
}

7. 使用虚拟DOM技术，将实际的DOM操作推迟到下一次重绘之前执行，从而减少回流和重绘的次数。（三大框架做法）

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
    
  render() {  
    return (  
      <div>  
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>  
        <p>{this.state.count}</p>  
      </div>  
    );  
  }  
}  
  
ReactDOM.render(<MyComponent />, document.getElementById("root"));