重绘和回流有什么区别?如何避免和减少重绘和回流

        浏览器的渲染机制:解析html,生成dom树,解析css,生成css树,将dom树和css树相结合生成渲染树,根据渲染树进行布局,这一步涉及到回流,最后将绘制的所有内容显示到页面上,这一步就是重绘。页面在第一次进行渲染的时候，回流是不可避免的。

        对dom元素的大小,位置进行修改后,浏览器需要重新计算元素的几何属性，就会触发回流,删除或添加一些dom元素时也会触发回流

        对dom元素的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘

如何避免和减少重绘和回流

1. 避免设置多层内联样式：每一个内联样式都会导致浏览器重新渲染，样式合并到一个外部类可以减少重绘和回流。
2. 使用CSS预处理器：如Sass或Less，可以方便地进行变量和混合（mixins）等操作，在编译时将它们转换为CSS，这样可以减少代码的冗余和复杂性。
3. 利用好display:none：因为display:none上的DOM操作不会引发回流和重绘
4. 使用CSS3动画代替JavaScript动画：CSS3动画性能更好，可以减少JavaScript表达式产生的回流和重绘。
5. 使用虚拟DOM库：如React或Vue等，可以避免频繁的DOM操作，优化性能。