什么是回流与重绘

Posted summerlist

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是回流与重绘相关的知识,希望对你有一定的参考价值。

首先要知道html的渲染过程、

解析HTML并构建DOM树和CSSOM树,浏览器对HTML标记转换成文档对象模型,CSS标记则转换成CSS对象模型(CSSOM),DOM 树包含了所有的 html 标签,包括不展示的 head 节点和 display:none 的节点,而 CSSOM 树则会去掉浏览器不能识别的样式。

接着就是构建render 树。将 DOM 树和 CSSOM 树合并为 render 树,在这个过程中,需要计算每一个呈现对象的可视化属性,会去掉不展示在页面上的节点(如 display:none 和 head 节点等),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到render tree中,但是visibility:hidden隐藏的元素还是会包含到render tree中的,因为visibility:hidden 会影响布局(layout),会占有空间。

然后是布局 render 树。render 树在创建完成时,并不包含位置和大小信息。计算这些值的过程称为布局或重排。从 render 树的根节点((对应于 HTML 文档的 元素))递归调用,计算每一个元素的位置和大小信息。

最后使用 render 树绘制页面。在绘制阶段,系统会遍历 render 树,将其内容显示在屏幕上。

那么什么是回流和重绘呢?

回流(Reflow):render 树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。

重绘:render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响 render 树重新布局的,比如修改字体颜色

回流必定会重绘,但重绘不一定会回流!

 

什么情况下会引起回流

1.   改变 DOM 树结构,比如添加或者删除可见的元素、改变文本内容、改变位置

2.   改变元素几何尺寸:边距、填充、边框、宽度和高度

3.   改变浏览器窗口尺寸

4.   伪类激活,在用户交互过程中发生

解决方案:

1、不要1个1个改变元素的样式属性,最好直接改变className,但className是预先定义好的样式,不是动态的,如果你要动态改变一些样式,则使用cssText来改变

 

2、即使用documentFragment或div等元素进行缓存操作,先把所有要添加到元素添加到1个div,最后才把这个div append到body中

先display:none 隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。

 

3、将引起回流的属性赋值给变量,进行缓存,需要用到的时候直接使用变量就行

以上是关于什么是回流与重绘的主要内容,如果未能解决你的问题,请参考以下文章

回流(重排)与重绘 —— 什么是回流和重绘,造成的原因是什么,如何去减少?

回流(reflow)与重绘(repaint)

什么是回流与重绘

回流与重绘

回流与重绘

前端回流与重绘之简介