回流和重绘

一、引

再总结（复制）个面试知识点

二、浏览器渲染过程

看过这张图的人应该不少吧…这张图是介绍了下浏览器是如果从一段数据转成一个页面的：

1. 解析 HTML 和 CSS 分别生成 Dom Tree 和 Css Tree。
2. 然后就是俩颗树的结合，生成了可以被渲染的 render Tree。
3. 回流，通过 render Tree 进行回流，得到各个可见节点的位置大小等信息。
4. 重绘，就是把对应地方的节点绘制到页面上。

三、回流、重绘

这回来仔细介绍一下这俩个东西
回流:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。

重绘:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。

所以可以看到，先有的回流才有的重绘，所以回流了一定重绘了，但是重绘了不一定回流。

四、何时发生

大概分五类：

1. Dom 树的变化，比如节点的删减。
2. 几何属性的变化，height、width、border、margin、padding 等。
3. 初始化渲染，就是第二节里面浏览器第一次渲染的时候。
4. 浏览器大小变化，因为计算都是根据浏览器的大小进行的。
5. 获取某些属性。虽然浏览器引擎可能会针对重排做了优化，比如Opera，它会等到有足够 数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。但除了render树的直接变化，当获取一些属性时，浏览器为取得 正确的值也会触发回流。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。（这段我也是新学习到抄的…）

五、避免、优化

1. 对操作进行缓存，保存队列，当队列满或者一定时间后，集中处理
2. 对于会发生重绘回流操作的动作，比如修改一个元素的样式属性，可以把所有样式写成类。把问题从改变样式变成改变类。
3. 把所有需要需改的DOM脱离文档流，然后对其操作结束后，再插入，这样就出现了俩次回流重绘操作，如果中间的对DOM的操作很多的话，也是个减少支出的方法。
4. display：none，先把Dom脱离文档流这样就不会发生回流，因为回流只对可见元素操作，然后对不可以的DOM做操作后，再重新显示。
5. 动画这种操作变化比较多的，最好使用绝对定位，不占用文档流。

六、总结

啥也不是，只是比之前稍微清楚点了，再学习吧！