频繁的重绘和回流：为什么应该尽量避免？- 技术经验 -卓越飞翔博客

重绘和回流：为什么要避免频繁发生？

在前端开发中，我们经常会听到两个概念：重绘和回流。它们是指浏览器对页面进行渲染时的两个关键过程。重绘是指当元素的外观发生变化，需要更新显示时进行的过程；回流是指当元素的几何属性发生变化，需要重新计算布局并重新绘制的过程。

重绘和回流都是非常消耗性能的操作，频繁发生会导致页面的性能下降，甚至造成卡顿和页面加载速度变慢。所以，我们在开发中要尽量避免频繁发生重绘和回流。接下来，让我们来看一些常见的导致重绘和回流的情况，并介绍如何避免它们。

避免频繁修改 DOM 元素的样式

当我们频繁修改 DOM 元素的样式时，浏览器会频繁地触发重绘和回流。因此，在修改 DOM 元素的样式时，最好将修改操作合并到一起，通过修改元素的 class 名称来实现样式切换，这样可以减少重绘和回流的次数。

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

使用 transform 属性来替代 top/left 属性

当使用 top/left 属性来改变元素的位置时，会触发重绘和回流。而使用 transform 属性（如 translateX/translateY）来改变元素的位置，则不会触发回流，只会触发重绘。因此，在需要改变元素位置时，最好使用 transform 属性。

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

避免频繁读取元素的尺寸属性

每次读取元素的尺寸属性（如 offsetWidth、offsetHeight）都会触发回流，而且读取这些属性的值是比较消耗性能的操作。因此，我们应该尽量避免频繁读取元素的尺寸属性，可以将这些值缓存起来，或者在必要时一次性地获取它们。

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

使用 documentFragment 来优化多次插入节点

插入节点是会触发回流的操作，如果需要多次插入节点，最好使用 documentFragment 来优化，将多个节点添加到 documentFragment 中，然后再一次性地插入到 DOM 中。

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

通过以上几个方面的优化，我们可以有效地减少重绘和回流的次数，提高页面的性能和用户体验。在实际开发中，我们还可以使用一些工具和库来帮助我们检测和优化重绘和回流问题，如 Chrome DevTools 和性能分析工具等。

总结一下，重绘和回流是影响页面性能的重要因素，在前端开发中要尽量避免频繁发生。通过合并样式修改、使用 transform 属性、避免频繁读取尺寸属性和使用 documentFragment 来优化多次插入节点等方法，我们可以有效地优化页面性能，提升用户体验。

相关推荐