高性能Javascript(2) DOM编程

第三部分 DOM编程

文档对象模型（DOM）是一个独立于语言的，使用XML和HTML文档操作的应用程序接口（API）。在浏览器中，主要与HTML文档打交道，在网页应用中检索XML文档也很常见。DOM APIs主要用于访问这些文档中的数据。尽管DOM是与语言无关的API，在浏览器中的接口却是以JavaScript实现的。客户端大多数脚本程序与文档打交道，DOM就成为JavaScript代码日常行为中重要的组成部分。

2.1 DOM Access and Modification DOM访问和修改

简单来说，正如前面所讨论的那样，访问一个DOM元素的代价就是交一次“过桥费”。修改元素的费用可能更贵，因为它经常导致浏览器重新计算页面的几何变化.如下面的例子：

function innerHTMLLoop() { 
 for (var count = 0; count < 15000; count++) { 
 document.getElementById('here').innerHTML += 'a'; 
 } 
}

此函数在循环中更新页面内容。这段代码的问题是，在每次循环单元中都对DOM元素访问两次：一次读取innerHTML属性能容，另一次写入它。因此，快捷的方法是生成完整的字符串以后一次性的对DOM元素进行修改和访问。

function innerHTMLLoop2() { 
 var content = ''; 
 for (var count = 0; count < 15000; count++) { 
 content += 'a'; 
 } 
 document.getElementById('here').innerHTML += content; 
}

这些结果清楚地表明，访问DOM越多，代码的执行速度就越慢。因此，一般经验法则是：轻轻地触摸DOM，并尽量保持在ECMAScript范围内。

2.2 innerHTML Versus DOM methods innerHTML与DOM方法比较

多年来，在web开发者社区已经对此问题进行了许多讨论：更新页面时，使用虽不标准却被良好支持的innerHTML属性更好呢，还是使用纯DOM方法，document.createElement ()更好呢？如果不考虑标准问题，它们的性能如何？答案是：性能差别不大，但是，在所有浏览器中，innerHTML速度更快一些，除了最新的基于WebKit的浏览器。

function tableInnerHTML() { 
 var i, h = ['<table border="1" width="100%">']; 
 h.push('<thead>'); 
 h.push('<tr><th>id</th><th>yes?</th><th>name</th><th>url</th><th>action</th></tr>'); 
 h.push('</thead>'); 
 h.push('<tbody>'); 
 for (i = 1; i <= 1000; i++) { 
 h.push('<tr><td>'); 
 h.push(i); 
 h.push('</td><td>'); 
 h.push('And the answer is... ' + (i % 2 ? 'yes' : 'no')); 
 h.push('</td><td>'); 
 h.push('my name is #' + i); 
 h.push('</td><td>'); 
 h.push('<a href="http://example.org/' + i + '.html">http://example.org/' + i + '.html</a>'); 
 h.push('</td><td>'); 
 h.push('<ul>'); 
 h.push(' <li><a href="edit.php?id=' + i + '">edit</a></li>'); 
 h.push(' <li><a href="delete.php?id="' + i + '-id001">delete</a></li>'); 
 h.push('</ul>'); 
 h.push('</td>'); 
 h.push('</tr>'); 
 } 
 h.push('</tbody>'); 
 h.push('</table>'); 
 document.getElementById('here').innerHTML = h.join(''); 
};

上面的例子描述了用innerHTML进行生成元素的方式。我们在这里只是记住这几个基本方式就可以了。

2.3 Cloning Nodes 节点克隆

2.4 HTML Collections HTML集合

HTML集合是用于存放DOM节点引用的类数组对象。下列函数的返回值就是一个集合：
     • document.getElementsByName()
     • document.getElementsByClassName()
    • document.getElementsByTagName_r()

下列属性也属于HTML集合：

document.images页面中所有的<img>元素

document.links 所有的<a>元素

document.forms 所有表单

document.forms[0].elements页面中第一个表单的所有字段

这些方法和属性返回HTMLCollection对象，是一种类似数组的列表。它们不是数组（因为它们没有诸如push()或slice()之类的方法），但是提供了一个length属性，和数组一样你可以使用索引访问列表中的元素。

2.4 Expensive collections 昂贵的集合

正如在第四章中将要讨论的，不建议用数组的length属性做循环判断条件。访问集合的length比数组的length还要慢，因为它意味着每次都要重新运行查询过程.

在下面的例子中，在循环中访问每个元素的三个属性。最慢的版本每次都要访问全局的document，优化后的版本缓存了一个指向集合的引用，最快的版本将集合的当前元素存入局部变量。所有三个版本都缓存了集合的length属性。

// slow 
function collectionGlobal() { 
 var coll = document.getElementsByTagName_r('div'), 
 len = coll.length, 
 name = ''; 
 for (var count = 0; count < len; count++) { 
 name = document.getElementsByTagName_r('div')[count].nodeName; 
 name = document.getElementsByTagName_r('div')[count].nodeType; 
 name = document.getElementsByTagName_r('div')[count].tagName; 
 } 
 return name; 
};

// faster 
function collectionLocal() { 
 var coll = document.getElementsByTagName_r('div'), 
 len = coll.length, 
 name = ''; 
 for (var count = 0; count < len; count++) { 
 name = coll[count].nodeName; 
 name = coll[count].nodeType; 
 name = coll[count].tagName; 
 } 
 return name; 
};

// fastest 
function collectionNodesLocal() { 
 var coll = document.getElementsByTagName_r('div'), 
 len = coll.length, 
 name = '', 
 el = null; 
 for (var count = 0; count < len; count++) { 
 el = coll[count]; 
 name = el.nodeName; 
 name = el.nodeType; 
 name = el.tagName; 
 } 
 return name; 
};

关于DOM的操作可提高性能的地方有很多，例如访问兄弟节点和子节点等等。

2.5 The Selectors API 选择器API

识别DOM中的元素时，开发者经常需要更精细的控制，而不仅是getElementById()和getElementsByTagName_r()之类的函数。有时你结合这些函数调用并迭代操作它们返回的节点，以获取所需要的元素，这一精细的过程可能造成效率低下.另一方面，使用CSS选择器是一个便捷的确定节点的方法，因为开发者已经对CSS很熟悉了。许多
JavaScript库为此提供了API，而且最新的浏览器提供了一个名为querySelectorAll()的原生浏览器DOM函数。显然这种方法比使用JavaScript和DOM迭代并缩小元素列表的方法要快。如下所示：

var elements = document.querySelectorAll('#menu a');

elements的值将包含一个引用列表，指向那些具有id="menu"属性的元素。函数querySelectorAll()接收一个CSS选择器字符串参数并返回一个NodeList——由符合条件的节点构成的类数组对象。此函数不返回HTML集合，所以返回的节点不呈现文档的“存在性结构”。这就避免了本章前面提到的HTML集合所固有的性能问题（以及潜在的逻辑问题）。

如果不使用querySelectorAll()，达到同样的目标的代码会冗长一些：
var elements = document.getElementById('menu').getElementsByTagName_r('a');

这种情况下elements将是一个HTML集合，所以你还需要将它拷贝到一个数组中，如果你想得到与
querySelectorAll()同样的返回值类型的话

Summary

DOM访问和操作是现代网页应用中很重要的一部分。但每次你通过桥梁从ECMAScript岛到达DOM岛
时，都会被收取“过桥费”。为减少DOM编程中的性能损失，请牢记以下几点：

• Minimize DOM access, and try to work as much as possible in JavaScript.
最小化DOM访问，在JavaScript端做尽可能多的事情。
• Use local variables to store DOM references you'll access repeatedly.
在反复访问的地方使用局部变量存放DOM引用.
• Be careful when dealing with HTMLcollections because theyrepresent the live, underlying document. Cache
the collection lengthinto a variable and use it when iterating, and make a copy of the collection into an array for
heavy work on collections.
小心地处理HTML集合，因为他们表现出“存在性”，总是对底层文档重新查询。将集合的length属性缓
存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。
• Use faster APIs when available, such as querySelectorAll() and firstElementChild.
如果可能的话，使用速度更快的API，诸如querySelectorAll()和firstElementChild。
• Be mindful of repaints and reflows; batch style changes, manipulate the DOM tree "offline," and cache and
minimize access to layout information.
注意重绘和重排版；批量修改风格，离线操作DOM树，缓存并减少对布局信息的访问。
• Position absolutely during animations, and use drag and drop proxies.

动画中使用绝对坐标，使用拖放代理。
• Use event delegation to minimize the number of event handlers.
使用事件托管技术最小化事件句柄数量