高性能JavaScript之浏览器中的DOM

文档对象模型（DOM）是一个独立于语言的，用于操作 XML 和 HTML 文档的程序接口。在浏览器中，通常会把 DOM 和 JavaScript 独立实现（放在两个不同的库中）。这对性能意味着什么？天生就慢！就像两座岛屿之间有座收费桥，每次交流都要交过桥费。并且，当我们要修改 HTML 中元素的时候更为昂贵，因为会涉及到 HTML 回流和重绘。

// 操作 DOM 元素
function addHTML() {
	for (var count = 0; count < 10000; count++) {
		document.getElementById('p').innerHTML += 'a';
	}
}
// 上述问题在于每次循环 p 元素都被访问两次：一次读取 innerHTML 值，一次修改它
// 可以修改为：
function addHTML() {
	var content = '';
	for(var count = 0; count < 10000; count++) {
		content += 'a';
	}
	document.getElementById('p').innerHTML = content;
}

总结：减少访问 DOM 的次数，把运算尽量放到 script 里面。