高性能 DOM & 重排重绘

相信学过JavaScript的人都会知道一个道理”DOM操作会影响性能”。有些人仅仅是知道，并不深入了解其中的原理（比如我…自从第一次面试以后,告诉自己不仅要巩固基础和实践操作,同时也要慢慢深入一些知识）

DOM是用来操作XML和HTML文档的应用程序接口（API），用JavaScript去操作DOM是一个昂贵的操作

把DOM和JavaScript（这里指ECMAScript）各自想象成一个岛屿，它们之间用收费桥梁连接，ECMAScript每次访问DOM都需要经过这座桥，并交纳”过桥费”，访问DOM的次数越多，费用越多。因此推荐的做法是尽量减少DOM操作，努力待在ECMAScript岛屿上。
当然，我们不可能不用DOM操作，这里我主要讲解怎样才能提高程序的效率？

1、DOM访问与修改

var timer = 15000;//code1console.time(1);for(var i=0;i<timer;i++){    document.getElementById("box1").innerHTML += "a";}console.timeEnd(1);//code2console.time(2);var str = '';for(var i=0;i<timer;i++){    str += "a";}document.getElementById("box2").innerHTML += "a";console.timeEnd(2);

在Safari浏览器下运行，结果第一次运行的时间居然是第二次的800多倍！

第一段代码的问题在于，每次循环迭代，该元素都会被访问两次：一次读取innerHTML的值，另一次重写它，也就是说，每次循环都在过桥（重排和重绘将在下一篇讲解）！结果充分表明，访问DOM的次数越多，代码的运行速度越慢。因此，能减少DOM访问的次数则尽量减少，尽量留在ECMAScript这端处理。

2、HTML集合 & 遍历DOM

操作DOM另一个耗能点就是遍历DOM，一般我们会收集一个HTML Collection（集合），比如用getElementsByTagName()，或者用document.links等，我想大家对此都不陌生。收集的结果是一个类似数组的集合，它处于一种“实时状态”实时存在，这意味着当底层文档对象更新时，它也会自动更新。怎么讲？很简单举个栗子：

<ul id="list">    <li>1</li>    <li>2</li>    <li>3</li><ul>

    var lis = document.getElementsByTagName("li");    alert(lis.length);  //3    var li = document.createElement("li");    li.innerHTML = "4";    document.getElementById("list").appendChild(li);    alert(lis.length); //4 (实时更新)

而这正是低效之源！很简单，跟数组的优化操作一样，缓存个length变量就ok了（读取一个集合的length比读取一个普通数组的lengh要慢很多，因为每次都要查询）：

    console.time(0);    var lis0 = document.getElementsByTagName("li");    var str0 = '';    for(var i=0;i<lis0.length;i++){        str0 += lis0[i].innerHTML;    }    console.timeEnd(0);    console.time(1);    var lis1 = document.getElementsByTagName("li");    var str1 = '';    for(var i=0,len=lis1.length;i<len;i++){        str1 += lis1[i].innerHTML;    }    console.timeEnd(1);

我们看看性能提升能有多少？（Safari浏览器下运行）

当集合的长度大的时候（demo是1000），性能提升还是很明显的。

而《高性能JavaScript》提出了另一个优化策略，它指出，“由于遍历数组比遍历集合快，因此如果先将集合元素拷贝到数组中，那么访问它的属性会更快”（注：不算拷贝数组的时间，而纯粹比较数组的访问时间和html集合的访问时间）

console.time(1);var lis1 = document.getElementsByTagName('li');var str1 = '';for(var i = 0, len = lis1.length; i < len; i++) {  str1 += lis1[i].innerHTML;}console.timeEnd(1);var lis2 = document.getElementsByTagName('li');var a = [];for(var i = 0, len = lis2.length; i < len; i++)  a[i] = lis2[i];console.time(2);var str2 = '';for(var i = 0, len = a.length; i < len; i++) {  str2 += a[i].innerHTML;}console.timeEnd(2);

本节的最后介绍两个原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，后者返回一个数组（注意，它们的返回值不像HTML集合一样会动态变化），前者返回匹配的第一个元素。（注：其实并不是所有时候它的性能都优于前者的HTML集合遍历）
IE7-浏览器不兼容

    var lis = document.querySelectorAll("li");    alert(lis.length);  //3    var li = document.createElement("li");    li.innerHTML = "4";    document.getElementById("list").appendChild(li);    alert(lis.length); //3

但是因为它是类似CSS的选择方法，所以在做组合选择的时候，效率会提升，又方便。比如做如下的组合查询：

var elements = document.querySelectorAll('#menu a');var elements = document.querySelectorAll('div.warning, div.notice');

DOM优化总结

1. 尽量减少DOM的访问，而把运算放在ECMAScript这一端
2. 尽量缓存局部变量，比如length等等
3. 最后介绍了两个新的API querySelector()以及querySelectorAll()，在做组合选择的时候可以大胆使用。

转载自 韩子迟高性能JavaScript DOM编程

=========================================================

而下面主要讲的是DOM编程可能最耗时的地方，重排和重绘。

3、重排和重绘

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

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

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

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

1. 重排和重绘的代价究竟多大

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

var times = 15000;// code1 每次过桥+重排+重绘console.time(1);for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a';}console.timeEnd(1);// code2 只过桥console.time(2);var str = '';for(var i = 0; i < times; i++) { var tmp = document.getElementById('myDiv2').innerHTML; str += 'a';}document.getElementById('myDiv2').innerHTML = str;console.timeEnd(2);// code3 console.time(3);var _str = '';for(var i = 0; i < times; i++) { _str += 'a';}document.getElementById('myDiv3').innerHTML = _str;console.timeEnd(3);

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

2.重排何时发生

很显然，每次重排，必然会导致重绘，那么，重排会在哪些情况下发生？

1、添加或者删除可见的DOM元素
2、元素位置改变
3、元素尺寸改变
4、元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
5、页面渲染初始化（这个无法避免）
6、浏览器窗口尺寸改变

这些都是显而易见的，或许你已经有过这样的体会，不间断地改变浏览器窗口大小，导致UI反应迟钝（某些低版本IE下甚至直接挂掉），现在你可能恍然大悟，没错，正是一次次的重排重绘导致的！

3. 渲染树变化的排队和刷新

思考下面代码：

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属性被请求了，队列就会立即执行，所以总共有两次重排与重绘。所以尽量不要在布局信息改变时做查询。

4. 最小化重排和重绘

我们还是看上面的这段代码：

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

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

var ele = document.getElementById('myDiv');// 1. 重写styleele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';// 2. add styleele.style.cssText += 'border-;eft: 1px;'// 3. use classele.className = 'active';

5. 让元素脱离动画流

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

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

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

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

重绘重排优化总结

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

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

转载自高性能JavaScript 重排与重绘