高性能JavaScript 重排与重绘

先回顾下前文高性能JavaScript DOM编程，主要提了两点优化，一是尽可能减小DOM的访问，而把运算放在ECMAScript这一端，二是尽可能缓存局部变量，好比length等等，最后介绍了两个新的API querySelector()以及querySelectorAll()，在作组合选择的时候能够大胆使用。而本文主要讲的是DOM编程可能最耗时的地方，重排和重绘。

一、什么是重排和重绘

---

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

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

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

并非全部的DOM变化都会影响几何属性，好比改变一个元素的背景色并不会影响元素的宽和高，这种状况下只会发生重绘。

二、重排和重绘的代价究竟多大

---

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

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);


// 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms

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

三、重排什么时候发生

---

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

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

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

四、渲染树变化的排队和刷新

---

思考下面代码：

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

五、最小化重排和重绘

---

咱们仍是看上面的这段代码：

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. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

// 2. add style
ele.style.cssText += 'border-;eft: 1px;'

// 3. use class
ele.className = 'active';

六、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。

七、让元素脱离动画流

---

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

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

使用如下步骤能够避免页面中的大部分重排：

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

八、总结

---

重排和重绘是DOM编程中耗能的主要缘由之一，平时涉及DOM编程时能够参考如下几点：

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