2015-06-21

JavaScript高质量代码之重绘和重排

什么是重排和重绘

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

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

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

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

重排和重绘的代价有多大？我们下面还是引用一个实际列子：

window.onload = function() {  
	var times = 15000;

	console.time(1);
	for(var i = 0; i < times; i++) {
	  document.getElementById('myDiv1').innerHTML += 'a'; //访问+重排+重绘
	}
	console.timeEnd(1);

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

	console.time(3);
	var _str = '';
	for(var i = 0; i < times; i++) {
	  _str += 'a';
	}
	document.getElementById('myDiv3').innerHTML = _str;
	console.timeEnd(3);
}

我的google浏览器测试结果：

1
2
3

1: 1900.673ms
2: 6.174ms
3: 0.495ms

从测试结果可以看出：重排和重绘消耗最大，访问DOM对于重排和重绘来说，消耗不算多！

减少重排和重绘

现在我们知道重绘和重排消耗非常大，那么该如何尽量减少（不可避免的）页面重绘和重排呢？
那么思考下面代码：

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

// not good
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';  //不会多次访问DOM

// not good
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.scrollTop = '80px';  //不要在样式改变时做布局信息的查询
ele.style.padding = '5px';  

// good
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

// good
ele.className = 'active';

第一段代码需要说明的是：你可能会说元素的样式改变了三次，每次改变都会引起重排和重绘，所以总共有三次重排重绘过程，但是浏览器并不会这么笨，它会把三次修改“保存”起来（大多数浏览器通过队列化修改并批量执行来优化重排过程），一次完成！
第二段代码需要说明的是：获取布局信息的操作会导致DOM树和渲染树构建一次！

关于fragment元素

我参考的页面里说这个可以提高执行效率，但是需要用数据说话：

var times = 15000;
console.time(1);
var div = document.getElementById('myDiv2');
for(var i = 0; i < times; i++) {
	var li = document.createElement('li');
	li.innerHTML = 'item ' + i;
	div.appendChild(li);
}
console.timeEnd(1);

console.time(2);
var fragment = document.createDocumentFragment();
for(var i = 0; i < times; i++) {
	var li = document.createElement('li');
	li.innerHTML = 'item ' + i;
	fragment.appendChild(li);
}
document.getElementById('myDiv1').appendChild(fragment);
console.timeEnd(2);

测试结果是fragment然并卵，测试数据并没什么差别：

1 2	1: 50.436ms 2: 50.710ms

参考页面：
[1].高性能JavaScript DOM编程
[2].高性能JavaScript 重排与重绘

感谢您的阅读，有不足之处请在评论为我指出！

yangyuji

一个屌丝，码农，程序猿

JavaScript高质量代码之重绘和重排

什么是重排和重绘

减少重排和重绘

关于fragment元素