DOM的重绘和回流

dom的重绘和回流：

1,html 加载时发生了什么

浏览器会把HTML解析成DOM tree，把CSS解析成CSSOM tree，DOM和CSSOM合并就产生了渲染树（Render Tree）
有了render tree，浏览器根据render tree节点绘制到页面上

2，回流：
DOM树和CSSOM树结合后的render tree后，将可见DOM节点以及它对应的样式结合起来，
可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流
height, width，top, right, bottom, left

3，重绘：
通过构造render tree和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，
那么我们就可以将render tree的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点
例如background-color，outline，color等

注：重绘不一定会引起回流，回流一定引起重绘。任何对render tree中元素的操作都会引起回流或重绘

4，什么操作会引起重绘、回流
1) 页面一开始渲染的时候（这肯定避免不了）
2）添加或删除可见的DOM元素
3）元素的位置发生变化
4）元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
5) 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
7) 用户操作浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

5，如何减少回流、重绘
1）浏览器的优化机制
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，
因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，
直到过了一段时间或者操作达到了一个阈值（界限），才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，
比如当你访问以下属性或者使用以下方法：

    offsetTop、offsetLeft、offsetWidth、offsetHeight
    scrollTop、scrollLeft、scrollWidth、scrollHeight
    clientTop、clientLeft、clientWidth、clientHeight
    以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。
    因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列

2）尽可能的减少回流和重绘
1）尽可能在DOM树的最末端改变class
原因：回流可以自上而下，或自下而上的回流的信息传递给周围的节点。回流是不可避免的，但可以减少其影响。
尽可能在DOM树的里面改变class，可以限制了回流的范围，使其影响尽可能少的节点
总结就是减少了回流的影响的范围
2）避免设置多层内联样式，改成使用外部类统一修改
原因：通过style属性设置样式，每个dom元素都会造成回流，
样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一次回流
3）动画效果应用到position属性为absolute或flex的元素上
原因：脱离文档流，减少回流的render tree的规模