频繁的重绘和回流：为什么应该尽量避免？

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

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

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

1. 避免频繁修改 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\');