回流和重绘

什么是回流和重绘？

1.重绘

简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局但是颜色或背景变了，就会重新渲染页面，这就是重绘。

引发重绘的几个例子：

1. 改变元素的背景颜色
2. 改变元素的边框样式或者颜色

2.回流

当增加或者删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

引发回流的几个例子：

1. 改变窗口的大小
2. 改变元素的大小、位置、显示或隐藏状态
3. 添加或删除可见的DOM元素
4. 修改网页字体大小

3.减少回流和重绘的方法

1. 避免频繁操作样式：尽量减少在 JavaScript 中频繁地修改元素的样式，可以一次性修改多个样式属性，减少触发回流和重绘的次数
2. 使用类名操作样式：通过添加或移除类名来改变元素的样式，而不是直接修改 style 属性
3. 避免频繁的 DOM 操作：尽量减少添加、删除或移动 DOM 元素的操作，因为这些操作可能会导致回流
4. 对复杂动画使用绝对定位：将动画元素设置为绝对定位，使其脱离文档流，这样在动画过程中不会影响其他元素的布局，从而减少回流
5. 使用虚拟 DOM：一些前端框架（如 React 和 Vue）使用虚拟 DOM 来减少实际的 DOM 操作，从而降低回流和重绘的频率

4.总结

重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。不管怎么说都是会影响性能