回流和重绘

Posted 2021-01-31 mufc

　　不同的浏览器对html和css在浏览器上呈现的处理流程可能会有略微的不同，但是基本都是类似的。

　　浏览器把获取到的HTML代码解析成一个dom树，html中的每个tag都是dom树种的一个节点，根节点就是我们常说的document对象。dom树包含了所有的html标签以及display隐藏的，以及使用js动态添加的元素等。

　　浏览器把所有的样式解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如兼容写法的样式等等； dom tree和样式结构体组合后构建render tree，render tree类似于dom tree，但是区别很大，render tree 能识别样式，render tree中每个node都有自己的style,而且render tree 不包含隐藏的节点，因为这些节点不会呈现，而且不影响呈现的节点的效果；一点render tree构建完毕，浏览器就可以根据render tree 来绘制页面了；

 

回流 && 重绘

　　当render tree中的一部分或者全部，因为元素的规模尺寸、布局、隐藏等改变而需要重新构建；这就被称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候；在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构建这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘；   也就是，当render tree中的一些元素需要更新属性，而这些属性只是影响与元素的外观、风格，而不影响布局的，比如background-color,则就叫做重绘。

　　　　

　　回流必将引起重绘，但是重绘不一定会引起回流；

　　　　

　　回流发生的条件：当页面布局和几何属性改变时就需要回流，比如：1)、添加或者删除可视的dom元素；2)、元素位置改变； 3)、元素尺寸改变,如边距、填充、边框、宽度和高度；4)、内容改变，比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；5)、页面渲染初始化；6)、浏览器窗口尺寸改变，即resize事件发生时。

　　回流的优化，通常我们可能会考虑，让其所有引起回流、重绘额操作放在一个队列中，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器再进行flush这个队列，但是有时候我们强制浏览器提前flush队列，比如修改尺寸的时候，这样队列的优化就起不到作用了；其实，减少回流其实就是减少对render tree的操作，并减少对一些style信息的请求，具体可以从以下几个方式进行优化：

　　　　1)、直接改变className,如果动态改变样式，则使用cssText(没有优化的浏览器可以考虑)；

　　　　2)、让要操作的元素进行‘离线处理‘，处理完后一起更新；

　　　　　　a)、使用DocumentFragment进行缓存操作，引发一次回流和重绘；

　　　　　　b)、使用display:none技术，只引发两次回流和重绘；

　　　　　　c)、使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘；

　　　　3)、不要经常访问会引起浏览器flush队列的属性，如果确实要访问，就利用缓存；

　　　　4)、让元素脱离动画流，减少回流的Render tree的规模；