重绘和重排(回流)

html重绘和重排(回流)

浏览器运行机制

1. 构建dom树: 浏览器渲染引擎解析html文件,首先会遍历html文档,将html标签转换为dom node内容树(DomTree/ContentTree)
2. 构建渲染树: 将css文件以及js生成的css转换为一个渲染树render tree,渲染树中每个节点都有自己的样式style,渲染树中的节点不包括display:none的节点以及head节点
3. 布局渲染树: 从根节点递归调用,计算出每个节点对应的大小位置,给出每个节点在屏幕的具体坐标
4. 绘制渲染树: 遍历渲染树,使用UI层绘制每个节点

重绘以及引起重绘的场景

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。这就叫重绘。

1. 颜色、背景色等的改变

重排(回流)以及引起重排(回流)的场景

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

1. 删除、增加可见的dom节点
2. 页面渲染初始化
3. 元素大小尺寸、外边距、边框、位置改变或使用动画
4. 元素的显示和隐藏,display:none转为display:block
5. 窗口尺寸大小改变
6. 填充内容的改变,如文本的改变或图片的改变引起的计算高度、宽度的改变
7. 读写某些属性()

重绘重排的代价就是耗时、导致浏览器卡慢,如何优化?

浏览器的帮忙:
所以我们能得知回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系
因为这些机制的存在，所以浏览器会帮助我们优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
自己代码优化:

1. 尽量减少dom操作, 多个dom操作的时候,循环生成所有标签,一次性添加到页面,避免循环一次操作一次dom节点
2. 直接改变className