回流和重绘

1. 浏览器使用流式布局
2. Render Tree=DOM（浏览器把HTML解析成DOM）+CSSOM（把css解析成CSSOM）

回流

当RanderTree中部分或全部元素的尺寸结构或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流，每个页面至少发生一次回流，就是在第一次加载的时候

会导致回流的操作

1. 页面首次渲染
2. 浏览器窗口大小发生改变
3. 激活css伪类
4.元素尺寸位置发生变化
5.添加和删除某些可见的DOM元素
6.元素字体大小，内容发生变化

重绘

页面元素样式发生变化，新样式赋予元素并重新绘制，不影响页面布局

如何避免回流和重绘

1. 避免操作DOM，创建一个documentFragment或者div，在它上面应用所有的DOM操作，最后添加到window.document。
2. 在display：none的元素上操作DOM，不会引发回流和重绘。
3. 尽可能在DOM树的末端改变class。
4. 避免使用多层内联样式。
5. 将需要多次回流的元素position属性设置为absolute或fixed。
6. 避免table布局。

回流一定会引起重绘，重绘不一定会引起回流