前端性能优化：揭秘回流和重绘的秘密

前端

2023-12-18 15:43:45

在前端开发中，性能至关重要，而回流和重绘是两个对性能影响重大的因素。了解并优化它们对于提供流畅的用户体验至关重要。

回流与重绘的本质

回流（Reflow） 是指重新计算元素布局，更新渲染树的过程。当元素的大小、位置或内容发生变化时，就会触发回流。

重绘（Repaint） 是在回流之后，将更改后的渲染树绘制到屏幕上的过程。只有在元素外观发生变化时才会触发重绘，例如更改颜色或可见性。

回流和重绘的影响

回流和重绘是一个耗时的过程，会导致页面卡顿和延迟。频繁的回流和重绘会严重影响前端性能，特别是移动设备上。

优化回流和重绘

为了优化回流和重绘，可以采取以下措施：

避免频繁修改 DOM 结构： 修改 DOM 结构会导致回流。尽量避免在循环中添加或删除元素，或使用虚拟 DOM 库。
避免频繁修改元素样式： 修改元素样式会触发重绘。如果需要多次修改样式，请使用 CSS 类或动画。
使用硬件加速： 硬件加速可以通过 GPU 绘制元素来提高重绘性能。在 CSS 中使用 transform、translate 和 opacity 等属性启用硬件加速。
使用 position:fixed 和 position:absolute： 将元素定位为 fixed 或 absolute 可以将它们从常规布局流中移除，从而减少回流的影响。
使用 requestAnimationFrame： requestAnimationFrame 允许您在浏览器准备好重绘屏幕时触发动画。它可以帮助防止不必要的重绘。

具体示例

示例 1：

// 避免在循环中添加元素
for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement('div'));
}

优化后：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);

示例 2：

// 频繁修改样式
const element = document.getElementById('element');
setInterval(() => {
  element.style.color = 'red';
  element.style.color = 'blue';
}, 100);

优化后：

// 使用 CSS 类
const element = document.getElementById('element');
element.classList.add('red');
setTimeout(() => {
  element.classList.remove('red');
  element.classList.add('blue');
}, 100);