DOM编程可能最耗时的地方,重排和重绘。

1、什么是重排和重绘
  浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。

  DOM树表示页面结构,渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或“盒“,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子。一旦DOM和渲染树构建完成,浏览器就开始显示(绘制)页面元素。

  当DOM的变化影响了元素的几何属性(宽或高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排。完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

  并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,这种情况下只会发生重绘。

2、重排和重绘的代价究竟多大
  重排和重绘的代价有多大?我们再回到前文那个过桥的例子上,细心的你可能会发现了,千倍的时间差并不是由于“过桥”一手造成的,每次“过桥”其实都伴随着重排和重绘,而耗能的绝大部分也正是在这里!

var times = ;
// code1 每次过桥+重排+重绘 访问+修改
for(var i = ; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
// code2 只过桥 只访问
var str = '';
for(var i = ; i < times; i++) {
var tmp = document.getElementById('myDiv2').innerHTML;
str += 'a';
}
document.getElementById('myDiv2').innerHTML = str; //这里修改 // code3
var _str = '';
for(var i = ; i < times; i++) {
_str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str; //这里一次访问+修改 // 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms

  数据是不会撒谎的,看到了吧,多次访问DOM对于重排和重绘来说,耗时简直不值一提了。

3、重排何时发生
  很显然,每次重排,必然会导致重绘,那么,重排会在哪些情况下发生?

1、添加或者删除可见的DOM元素
2、元素位置改变
3、元素尺寸改变
4、元素内容改变(例如:一个文本被另一个不同尺寸的图片替代)
5、页面渲染初始化(这个无法避免)
6、浏览器窗口尺寸改变
  这些都是显而易见的,或许你已经有过这样的体会,不间断地改变浏览器窗口大小,导致UI反应迟钝(某些低版本IE下甚至直接挂掉),现在你可能恍然大悟,没错,正是一次次的重排重绘导致的!

4、渲染树变化的排队和刷新
  思考下面代码:

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

  乍一想,元素的样式改变了三次,每次改变都会引起重排和重绘,所以总共有三次重排重绘过程,但是浏览器并不会这么笨,它会把三次修改“保存”起来(大多数浏览器通过队列化修改并批量执行来优化重排过程),一次完成!但是,有些时候你可能会(经常是不知不觉)强制刷新队列并要求计划任务立即执行。获取布局信息的操作会导致队列刷新,比如:

1.offsetTop, offsetLeft, offsetWidth, offsetHeight
2.scrollTop, scrollLeft, scrollWidth, scrollHeight
3.clientTop, clientLeft, clientWidth, clientHeight
4.getComputedStyle() (currentStyle in IE)

  将上面的代码稍加修改:

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px'; // here use offsetHeight
// ...
ele.style.padding = '5px';

  因为offsetHeight属性需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值(即使队列中改变的样式属性和想要获取的属性值并没有什么关系),所以上面的代码,前两次的操作会缓存在渲染队列中待处理,但是一旦offsetHeight属性被请求了,队列就会立即执行,所以总共有两次重排与重绘。所以尽量不要在布局信息改变时做查询。

5、最小化重排和重绘
  我们还是看上面的那段代码,三个样式属性被改变,每一个都会影响元素的几何结构,虽然大部分现代浏览器都做了优化,只会引起一次重排,但是像上文一样,如果一个及时的属性被请求,那么就会强制刷新队列,而且这段代码四次访问DOM,一个很显然的优化策略就是把它们的操作合成一次,这样只会修改DOM一次:

  三种方式:

var ele = document.getElementById('myDiv');

// 1. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
// 2. add style
ele.style.cssText += 'border-left: 1px;'
// 3. use class
ele.className = 'active';

6、fragment元素的应用
  看如下代码,考虑一个问题:

<ul id='fruit'>
<li> apple </li>
<li> orange </li>
</ul>

  如果代码中要添加内容为peach、watermelon两个选项,你会怎么做?

var lis = document.getElementById('fruit');
var li = document.createElement('li');
li.innerHTML = 'apple';
lis.appendChild(li); var li = document.createElement('li');
li.innerHTML = 'watermelon';
lis.appendChild(li);

  很容易想到如上代码,但是很显然,重排了两次,怎么破?前面我们说了,隐藏的元素不在渲染树中,太棒了,我们可以先把id为fruit的ul元素隐藏(display=none),然后添加li元素,最后再显示,但是实际操作中可能会出现闪动,原因这也很容易理解。这时,fragment元素就有了用武之地了。

var fragment = document.createDocumentFragment();

var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li); var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li); document.getElementById('fruit').appendChild(fragment);

  文档片段是个轻量级的document对象,它的设计初衷就是为了完成这类任务——更新和移动节点。文档片段的一个便利的语法特性是当你附加一个片断到节点时,实际上被添加的是该片断的子节点,而不是片断本身。只触发了一次重排,而且只访问了一次实时的DOM。

7、让元素脱离动画流
  用展开/折叠的方式来显示和隐藏部分页面是一种常见的交互模式。它通常包括展开区域的几何动画,并将页面其他部分推向下方。

  一般来说,重排只影响渲染树中的一小部分,但也可能影响很大的部分,甚至整个渲染树。浏览器所需要重排的次数越少,应用程序的响应速度就越快。因此当页面顶部的一个动画推移页面整个余下的部分时,会导致一次代价昂贵的大规模重排,让用户感到页面一顿一顿的。渲染树中需要重新计算的节点越多,情况就会越糟。

  使用以下步骤可以避免页面中的大部分重排:

  使用绝对位置定位页面上的动画元素,将其脱离文档流,让元素动起来。当它扩大时,会临时覆盖部分页面。但这只是页面一个小区域的重绘过程,不会产生重排并重绘页面的大部分内容。当动画结束时恢复定位,从而只会下移一次文档的其他元素。

8、总结

  重排和重绘是DOM编程中耗能的主要原因之一,平时涉及DOM编程时可以参考以下几点:

  (1)尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新)
  (2)同一个DOM的多个属性改变可以写在一起(减少DOM访问,同时把强制渲染队列刷新的风险降为0)
  (3)如果要批量添加DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排(fragment元素的应用)
  (4)将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

  以上就是高性能JavaScript 重排与重绘的全部介绍内容,大家可以结合前2篇:高性能WEB开发:DOM编程  和  高性能WEB开发:深入理解页面呈现、重绘、回流  一起学习,希望这三篇文章可以帮到大家,解决大家这方面的疑惑。

高性能WEB开发:重排与重绘的更多相关文章

  1. 高性能JavaScript 重排与重绘

    先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的A ...

  2. 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  3. 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  4. css 重排与重绘

    css 重绘与重排 我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码. HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树 ...

  5. js 重排和重绘

    1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如 ...

  6. 高性能WEB开发(11) - flush让页面分块,逐步呈现

    高性能WEB开发(11) - flush让页面分块,逐步呈现 在处理比較耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应.一般大家在处理这样的情况,都使用a ...

  7. 高性能WEB开发:DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...

  8. 高性能Web开发系列

    1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201 ...

  9. 高性能WEB开发:深入理解页面呈现、重绘、回流

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

随机推荐

  1. TCP(传输控制协议)

    三次握手tcp是一种面向链接的.可靠的.基于字节流的传输层通信协议,提供可靠的连接服务,采用三次握手确认建立一个连接.位码即tcp标志位,有6种标示:1.SYN(synchronous建立连接)2.A ...

  2. QString 与中文问题

    原文请看:http://www.cnblogs.com/phoenixlaozhu/articles/2553180.html (更新:本文的姊妹篇Qt5与中文问题) 首先呢,声明一下,QString ...

  3. GeneXus项目启动

    使用GeneXus产品开发项目时,在开始,有一些属性我会经常改一下.我现在使用的GeneXus版本是GeneXus U3,由于在做手机应用的开发,所以一般使用最新的版本,老外那边差不多两个月会有一个u ...

  4. redis优化方案

    流水线(pipelined) 批量提交redis命令,减少通信次数 事务 mulit,事务的开始 exec,执行事务快内的命令 discard,放弃事务快内的命令 watch,监视key,如果key改 ...

  5. vue数据立刻绑定到dom元素

    今天遇到个令人发指的问题 使用vue修改一个数据之后,它不会立刻修改,而是在当前函数执行完毕之后才会进行渲染. 有个很简单的例子 <body> <div id="app&q ...

  6. Tornado(二)

    跨站请求伪造CSRF 开启xsrf(就是叫法不一样和csrf一样),'xsrf_cookies':True settings = { 'template_path':'template', 'stat ...

  7. 【BZOJ 4180】 4180: 字符串计数 (SAM+二分+矩阵乘法)

    4180: 字符串计数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 164  Solved: 75 Description SD有一名神犇叫做Oxe ...

  8. 字符约束条件的SQL注入攻击

    引言 目前值得高兴的是,开发者在建立网站时,已经开始关注安全问题了——几乎每个开发者都知道SQL注入漏洞了.在本文中,我将为读者介绍另一种与SQL数据库相关的漏洞,虽然它的危害性与SQL注入不相上下, ...

  9. Codechef SEP14 QRECT cdq分治+线段树

    题意 支持删除矩阵.插入矩阵.查询当前矩阵与之前有多少个矩阵相交 算相交的时候容斥一下:相交矩形数 = 总矩形数-X轴投影不相交的矩形数-Y轴投影不相交的矩形数-XY轴投影下都不相交的矩形数 最后一项 ...

  10. ThinkPHP -- 基础入门

      ThinkPHP文件结构说明: |——ThinkPHP.php    框架入口文件    |——Common            框架公共文件目录    |——Conf              ...