浏览器页面的重绘和重排

对于页面,我们经常有CSS对网页进行呈现样式效果,这就涉及到了页面的重绘和重排

重绘(repaints)与重排(reflows,也称回流)。

首先来了解一下页面的呈现流程,页面是如何将HTML和CSS结合等显示在浏览器上的


步骤:

1 浏览器将HTML代码解析成一个DOM树,HTML中的每一个标签都对应这个DOM树中的一个节点,根节点就是我们常用的document对象,DOM树包含了HTML代码中的所有标签,当然注释掉的不算,包括了display:none隐藏的标签,JS动态添加的也包括了

2 浏览器将所有的样式(定义的CSS和用户代理的)解析成样式结构体,解析过程中会去掉浏览器不能识别的样式,比如IE去掉了-moz开头的样式(FF对应的前缀),FF去掉_开头的样式(IE6的样式写法,可以见css hack一文)

3 DOM树和样式结构体组合构建一个Render Tree,称为呈现树,这个Render Tree结构类似于DOM树,但是它能识别样式,每一个节点node都有自己的样式style,但是此时Render Tree就不会包括那些隐藏的节点了(如display:none的节点和head节点),因为这些节点不呈现,也不影响呈现。但是visibility:hidden还是会在呈现树上,因为其仅仅是视觉上的隐藏,会影响布局,占有空间,而根据CSS2的标准,每一个Render Tree的节点都称为Box,符合盒子模型,拥有填充,边距,边框,位置的盒子

4 构建呈现树完成后,浏览器就根据其来绘制页面了。

回流和重绘

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

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

注意:回流必将引起重绘,而重绘不一定会引起回流。

回流何时发生:

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流:

1、添加或者删除可见的DOM元素;

2、元素位置改变;

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

5、页面渲染初始化;

6、浏览器窗口尺寸改寸改变——resize事件发生时;

影响回流重绘的例子:



说到这里大家都知道回流比重绘的代价要更高,回流的花销跟render tree有多少节点需要重新构建有关系,假设你直接操作body,比如在body最前面插入1个元素,会导致整个render tree回流,这样代价当然会比较高,但如果是指body后面插入1个元素,则不会影响前面元素的回流

聪明的浏览器

很多浏览器会优化一些操作,浏览器会维护一个队列,把所有会引起回流、重绘的操作放入队列中,等队列的操作达到一定的数量或者到了一定的时间间隔,浏览器会flush队列,进行一个批处理,这样就让多次的回流重绘变成一次回流重绘

但是有时候我们写的一些代码可能会强制浏览器提前flush队列,这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候,就会让浏览器flush队列,比如:

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle

当你请求上面的一些属性的时候,浏览器为了给你最精确的值,需要flush队列,因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关,浏览器都会强行刷新渲染队列。

如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:

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

2. 让要操作的元素进行”离线处理”,处理完后一起更新

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

b) 使用display:none技术,只引发两次回流和重绘;

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

3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

4. 让元素脱离动画流,减少回流的Render Tree的规模

来源于:http://www.css88.com/archives/4996

推荐阅读更多精彩内容

  • 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流...
    legendtx阅读 123评论 0 1
  • 祝身体永远健康,香港伊丽莎白医院临床肿瘤科唐志聪医生编写 : 人,只要脾、肝、大肠、肾,四个功能健康,就能永远离开...
    放马牧羊阅读 102评论 0 0
  • 去车库巡逻了上来,我来到更衣室准备去卫生间解小手。一转角,我就看见卫生间里靠墙的那个蹬位有人解了大手未用水...
    谦悦历阅读 129评论 0 2
  • “柚子,怎么办?我好累啊!” 看到子衿这条消息后时间已经过去一个小时了,我忙回一句,“怎么了?” 很快地,对方回复...
    一颗大大大柚子阅读 359评论 0 0
  • 当你在城市的夜空下 望着万家灯火 独自回家 当你在拥挤的人群里 对着陌生面孔 孤军奋战 当你在幸福的笑脸中 寻着凌...
    清水浮萍阅读 53评论 0 0