页面重绘和回流以及优化

标签: JavaScript | 发表时间:2014-08-15 21:51 | 作者:愚人码头
出处:http://www.blogread.cn/it/

标签:   回流   重绘

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。

8_1

1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。

2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式。

3、DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,render tree能识别样式,render tree中每个NODE都有自己的style,而且 render tree不包含隐藏的节点 (比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的,因为visibility:hidden 会影响布局(layout),会占有空间。根据CSS2的标准,render tree中的每个节点都称为Box (Box dimensions),理解页面元素为一个具有填充、边距、边框和位置的盒子。

4. 一旦render tree构建完毕后,浏览器就可以根据render tree来绘制页面了。

回流与重绘

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

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

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


回流何时发生:

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

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

2、元素位置改变;

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

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

5、页面渲染初始化;

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


让我们看看下面的代码是如何影响回流和重绘的:

  
  1. var s = document.body.style;

  2. s.padding ="2px";// 回流+重绘

  3. s.border ="1px solid red";// 再一次 回流+重绘

  4. s.color ="blue";// 再一次重绘

  5. s.backgroundColor ="#ccc";// 再一次 重绘

  6. s.fontSize ="14px";// 再一次 回流+重绘

  7. // 添加node,再一次 回流+重绘

  8. document.body.appendChild(document.createTextNode('abc!'));

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


聪明的浏览器

从上个实例代码中可以看到几行简单的JS代码就引起了6次左右的回流、重绘。而且我们也知道回流的花销也不小,如果每句JS操作都去回流重绘的话,浏览器可能就会受不了。所以很多浏览器都会优化这些操作,浏览器会维护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(考虑没有优化的浏览器)

  
  1. // 不好的写法

  2. var left =1;

  3. var top =1;

  4. el.style.left = left +"px";

  5. el.style.top = top +"px";// 比较好的写法

  6. el.className +=" className1";

  7. // 比较好的写法

  8. el.style.cssText +=";

  9. left:" + left + "px;

  10. top:" + top + "px;";

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

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
b) 使用display:none技术,只引发两次回流和重绘;
c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;


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

  
  1. // 别这样写,大哥

  2. for(循环){

  3. el.style.left = el.offsetLeft +5+"px";

  4. el.style.top = el.offsetTop +5+"px";

  5. }

  6. // 这样写好点

  7. var left = el.offsetLeft,

  8. top = el.offsetTop,

  9. s = el.style;

  10. for(循环){

  11. left +=10;

  12. top +=10;

  13. s.left = left +"px";

  14. s.top = top +"px";

  15. }

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

  
  1. $("#block1").animate({left:50});

  2. $("#block2").animate({marginLeft:50});

实例测试

最后用2个工具对上面的理论进行一些测试,分别是:dynaTrace(测试ie),Speed Tracer(测试Chrome)。

第一个测试代码不改变元素的规则,大小,位置。只改变颜色,所以不存在回流,仅测试重绘,代码如下:

  
  1. <body>

  2. &l

    您可能还对下面的文章感兴趣:

    1. 浏览器的重绘(repaints)与重排(reflows) [2014-08-15 13:52:56]
    2. 浏览器的重绘[repaints]与重排[reflows] [2012-11-13 13:46:27]

相关 [页面 回流 优化] 推荐:

页面重绘和回流以及优化

- - IT技术博客大学习
标签:   回流   重绘. 需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程. 可能不同的浏览器略微会有些不同.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象.

如何做页面优化

- - 互联网的那点事
改版是在原有基础上做较大的改变;而优化是做些小的调整,快速提升效果. 但不管是改版还是优化,都需要考虑以下的步骤:. 1.问题现状(数据、用户反馈等)/  用户调研(问卷、访谈等内容,尽量结合数据看)/  竞品分析. 2.结合上面三点,确定优化目标. 3.根据目标确定设计计划(如何达成目标). 4.结果检验(数据、用户反馈等指标).

前台页面优化全攻略(一)

- - 博客园_知识库
   英文原文: http://www.sitepoint.com/complete-guide-reducing-page-weight/.   据调查,网页大小在2013年平均增长了32%,平均达到了1.7M,单独的HTTP请求达到96个. 这是令人震惊的数字,而且这只是个平均值,有一半的网站会大于这个值.

前台页面优化全攻略(二)

- - 博客园_知识库
  在 上一篇文章中,我们讨论了一些基本的页面优化和减肥方案,现在我们的页面已经被缩减了30%-50%,如果你还没有阅读上一篇文章,我建议你完成那些基础热身之后再继续进阶的训练.   如果你已经尝试了基础的热身,那我们就继续采取一些更极客的解决方案.   看到这个标题请不要惊讶,我并不是让你放弃第三方社交平台,而是希望你能放弃那些肥胖的官方组件.

前台页面优化全攻略(四)

- - 博客园_知识库
  通过前几篇文章,你应该已经掌握了很多优化网站的方法. 现在你的网站加载速度已经很快了,但是你必须持续的监控你的网站,了解它的大小变化,要不然一段时间过去之后,它可能又成为了一个胖子.   如今每个页面平均已经达到1.7M,每年增长大概32%. 你可以通过以下几个工具来查看你的网站是不是又在暴饮暴食,而且它们都是免费的.

前台页面优化全攻略(三)

- - 博客园_知识库
  经过前 两篇文章的实践,你的网站加载速度一定有了非常明显的变化. 能把实践跟到这篇文章的人想必一定是极客中的极客. 如果你仍对网站的加载速度不满意,可以看看再尝试一下本文中几近疯狂的终极优化方案.   你可以对网站进行快速的优化,但网站日常的节食却很难. 也许你已经花了很大的力气去优化你的 CSS和 JavaScript代码,但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流.

网站页面优化策略

- - 月光博客
  网站的页面优化,也即网页优化是对网页的程序、内容、版块、布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关的关键词能有好的排位. 使网站更容易被搜索引擎收录,提高用户体验和转化率进而创造价值. 下面主要从网站代码、标签、正文等几个方面来讲述网站的页面优化.

减少页面回流与重绘(Reflow & Repaint)

- - CSDN博客推荐文章
如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘. 回流(Reflow)是指布局引擎为frame计算图形的过程. frame是一个矩形,拥有宽高和相对父容器的偏移. frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame.

管理好页面图片,减少页面加载时http连接,优化页面

- - ITeye博客
浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存. 而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片. 也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.