《回流与重绘：前端性能优化从这里开始！》

前端

2022-11-10 16:20:56

优化前端性能：掌握回流与重绘之道

作为一名前端开发人员，优化性能是提升用户体验的关键。了解回流和重绘这两个关键渲染过程，将为你的前端开发之旅添砖加瓦。

回流与重绘

回流：当页面元素的尺寸、位置或属性发生改变时，浏览器会重新计算该元素及其后代元素的位置。这是一个耗时的过程，因为它会影响整个布局。

重绘：当元素的外观发生变化，但其位置和尺寸保持不变时，浏览器只需重新绘制该元素。这个过程相对较快，因为它只涉及元素的外观改变。

常见的引发回流与重绘的场景

元素尺寸或位置改变
元素内容改变（如文字或图片）
元素属性改变（如背景色或字体）
浏览器窗口大小改变
JavaScript操作DOM

优化回流与重绘

优化回流和重绘至关重要，可提高网页性能和用户体验。以下是一些优化技巧：

1. 避免频繁修改元素尺寸、位置或属性

尽可能地减少对元素的修改次数。在多个属性改变时，一次性应用所有改变，避免多次触发回流。

2. 使用CSS动画或过渡，而不是JavaScript直接修改元素属性

CSS动画和过渡不会触发回流，而JavaScript操作DOM会。在可能的情况下，优先使用CSS。

3. 合理使用DOM操作，尽量减少操作次数

DOM操作会触发回流，因此应尽可能减少操作次数。使用批量更新或虚拟DOM等技术，可以一次性应用多个更改，从而减少回流次数。

4. 使用层（layer）或固定定位（position:fixed）元素来避免频繁回流

将元素置于一个单独的层或使用固定定位，可以将元素从常规文档流中分离出来，从而避免布局重新计算。

5. 使用媒体查询（media queries）来响应式布局，避免页面重新加载

响应式布局可以通过媒体查询来实现，从而避免页面重新加载。这可以减少回流和重绘的频率。

代码示例

使用CSS动画代替JavaScript

/*使用CSS动画*/
.box {
  transition: all 1s ease-in-out;
}

.box:hover {
  transform: scale(1.2);
}

/*使用JavaScript*/
const box = document.querySelector('.box');

box.addEventListener('mouseover', () => {
  box.style.transform = 'scale(1.2)';
});

box.addEventListener('mouseout', () => {
  box.style.transform = 'scale(1)';
});

使用批量更新

const todos = [...];

//批量更新DOM
todos.forEach((todo) => {
  const li = document.createElement('li');
  li.textContent = todo.title;
  ul.appendChild(li);
});

使用虚拟DOM

import { createElement, render } from 'react';

const MyComponent = () => {
  //虚拟DOM
  const elements = [
    createElement('li', { key: 1 }, 'Item 1'),
    createElement('li', { key: 2 }, 'Item 2'),
  ];

  //一次性更新真实DOM
  render(elements, document.getElementById('root'));
};

export default MyComponent;