第三部分 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.
使用事件托管技术最小化事件句柄数量