码迷,mamicode.com
首页 > 编程语言 > 详细

高性能Javascript(2) DOM编程

时间:2014-08-27 00:17:16      阅读:352      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   os   java   使用   io   

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

高性能Javascript(2) DOM编程

标签:des   style   blog   http   color   os   java   使用   io   

原文地址:http://www.cnblogs.com/CBDoctor/p/3938491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!