重绘和回流

重绘：当我们对元素盒子的修改引发其发生样式的变化，却并未影响其几何尺寸时（比如修改了颜色，背景色等），浏览器不需要重新计算元素的几何尺寸。直接为该元素绘制新的样式，这个过程叫做重绘。

回流：当我们对元素盒子的修改引发其发生几何尺寸的变化（比如修改元素的高、宽、隐藏元素、页面一开始渲染、元素位置发生改变、添加或者删除DOM元素等），浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响，然后再将重新计算的结果绘制出来，这个过程叫做回流。

由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。

如何减少重绘和回流

1、基于vue、react数据驱动视图开发。

2、避免使用table布局，table中每个元素的大小以及内容的改动，都会导致整个table重新计算。

3、对元素进行复杂操作时可以先display：none隐藏元素，操作完成之后在diaplay：block。

4、避免频繁操作样式，最好一次性重写sytle属性。

5、尽量使用css属性简写，比如用border代替border-width，border-style，border-color。

6、避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

7、尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。