高性能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.
使用事件托管技术最小化事件句柄数量

秒客网