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

目录

一、什么是回流?

二、什么是重绘?

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

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


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

一、什么是回流?

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

  1. 窗口大小改变
  2. 页面的最小字体大小改变
  3. 页面的滚动位置改变
  4. 元素的隐藏和显示(例如,通过改变元素的可视性属性)
  5. 添加或删除窗口或元素
  6. 元素的内容改变导致的大小改变

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

二、什么是重绘?

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

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

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

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

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

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

此外,一些编程操作也会触发回流和重绘,例如元素的属性或内容改变、使用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 (  
      

{this.state.count}

); } } ReactDOM.render(, document.getElementById("root"));

你可能感兴趣的:(JavaScript,javascript,前端)