首页 > 代码库 > javascript之DOM优化

javascript之DOM优化

DOM访问和操作是现代网页应用中很重要的一部分。但每次你通过“桥梁”从ECMAScript到DOM时,都会被收取“过路费”。为减少DOM编程中的性能损失,具体要注意的有:

 

一。最小化DOM访问,在javascript端做尽可能多的事。

 

Js代码  收藏代码
  1. function innerHTMLLoop() {  
  2. for (var count = 0; count < 15000; count++) {  
  3. document.getElementById(‘here‘).innerHTML += ‘a‘;  
  4. }  
  5. }  
  6. function innerHTMLLoop2() {  
  7. var content = ‘‘;  
  8. for (var count = 0; count < 15000; count++) {  
  9. content += ‘a‘;  
  10. }  
  11. document.getElementById(‘here‘).innerHTML += content;  
  12. }  

 innerHTMLLoop2显然要比innerHTMLLoop更好。

 

 

 

二。在反复访问的地方使用局部变量存放DOM引用。

(此点结合第三点一起)

 

三。小心地处理HTML集合,因为他们表现出“存在性”,总是对底层文档重新查询。将集合length属性缓存到一个变量中,在迭代中使用这个变。如果经常操作这个集合,可以将集体拷贝到数组中。

 

Js代码  收藏代码
  1. HTML集合有:  
  2. document.getElementsByName()  
  3. document.getElementsByClassName()  
  4. document.getElementsByTagName_r()  
  5. document.images  
  6. document.links  
  7. document.forms  
  8. document.forms[0].elements  

这些方法和属性返回HTMLCollection 对象,是一种类似数组的列表。它们不是数组(因为它们没有诸

 

如push()或slice()之类的方法),但是提供了一个length 属性,和数组一样你可以使用索引访问列表中的

元素。例如,document.images[1]返回集合中的第二个元素。正如DOM 标准中所定义的那样,HTML 集合

是一个“虚拟存在,意味着当底层文档更新时,

 

Js代码  收藏代码
  1. var alldivs = document.getElementsByTagName_r(‘div‘);  
  2. for (var i = 0; i < alldivs.length; i++) {  
  3. document.body.appendChild(document.createElement(‘div‘))  
  4. }  
  5. 这段代码看上去只是简单地倍增了页面中div 元素的数量。它遍历现有div,每次创建一个新的div 并附  
  6. 加到body 上面。但实际上这是个死循环,因为循环终止条件alldivs.length 在每次迭代中都会增加,它反  
  7. 映出底层文档的当前状态。  

 

 

将一个HTML集合拷贝给一个数组:

 

Js代码  收藏代码
  1. function toArray(coll) {  
  2. for (var i = 0, a = [], len = coll.length; i < len; i++) {  
  3. a[i] = coll[i];  
  4. }  
  5. return a;  
  6. }  

 

 

 

Js代码  收藏代码
  1. var coll = document.getElementsByTagName_r(‘div‘);  
  2. var ar = toArray(coll);  
  3. //slower  
  4. function loopCollection() {  
  5. for (var count = 0; count < coll.length; count++) {  
  6. }  
  7. }  
  8. // faster  
  9. function loopCopiedArray() {  
  10. for (var count = 0; count < arr.length; count++) {  
  11. }  
  12. }  
  13. // faster  
  14. function loopCacheLengthCollection() {  
  15. var coll = document.getElementsByTagName_r(‘div‘),  
  16. len = coll.length;  
  17. for (var count = 0; count < len; count++) {  
  18. }  
  19. }  

 

 

 

 

一般来说,对于任何类型的DOM 访问,如果同一个DOM 属性或方法被访问一次以上,最好使用一个

局部变量缓存此DOM 成员。当遍历一个集合时,第一个优化是将集合引用存储于局部变量,并在循环之

外缓存length 属性。然后,如果在循环体中多次访问同一个集合元素,那么使用局部变量缓存它。

 

Js代码  收藏代码
  1. // slow  
  2. function collectionGlobal() {  
  3. var coll = document.getElementsByTagName_r(‘div‘),  
  4. len = coll.length,  
  5. name = ‘‘;  
  6. for (var count = 0; count < len; count++) {  
  7. name = document.getElementsByTagName_r(‘div‘)[count].nodeName;  
  8. name = document.getElementsByTagName_r(‘div‘)[count].nodeType;  
  9. name = document.getElementsByTagName_r(‘div‘)[count].tagName;  
  10. }  
  11. return name;  
  12. };  
  13. // faster  
  14. function collectionLocal() {  
  15. var coll = document.getElementsByTagName_r(‘div‘),  
  16. len = coll.length,  
  17. name = ‘‘;  
  18. for (var count = 0; count < len; count++) {  
  19. name = coll[count].nodeName;  
  20. name = coll[count].nodeType;  
  21. name = coll[count].tagName;  
  22. }  
  23. return name;  
  24. // fastest  
  25. function collectionNodesLocal() {  
  26. var coll = document.getElementsByTagName_r(‘div‘),  
  27. len = coll.length,  
  28. name = ‘‘,  
  29. el = null;  
  30. for (var count = 0; count < len; count++) {  
  31. el = coll[count];  
  32. name = el.nodeName;  
  33. name = el.nodeType;  
  34. name = el.tagName;  
  35. }  
  36. return name;  
  37. };  

 

 

 

四。可能的话,使用速度更快的API,诸如querySelectorAll()和firstElementChild

下列浏览器支持选择器API:Internet Explorer 8,Firefox 3.5,Safari 3.1,Chrome 1,Opera 10。

具体用法此处不详解。

 

五。注重重绘和重排版:批量修改风格,离线操作DOM树,缓存并减少对布局信息的访问。

 

当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据

结构:一棵DOM树(表示页面结构),一棵渲染树(表示DOM节点如何显示)。

 

重排版的情况:

添加或删除可见的DOM元素

元素位置改变

元素尺寸改变(因为边距,填充,边框宽度,宽度,高度等属性改变)

内容改变,例如文本改变或图片被另一个不同尺寸的所替代

最初的页面渲染

浏览器窗口改变尺寸

 

(1)批量修改

 

重排版和重绘代价昂贵,所以,提高程序响应速度一个好策略是减少此类操作发生的机会。为减少发生

次数,你应该将多个DOM 和风格改变合并到一个批次中一次性执行。

 

 

Js代码  收藏代码
  1. var el = document.getElementById(‘mydiv‘);  
  2. el.style.borderLeft = ‘1px‘;  
  3. el.style.borderRight = ‘2px‘;  
  4. el.style.padding = ‘5px‘;  
  5.   
  6. //better  
  7. var el = document.getElementById(‘mydiv‘);  
  8. el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px;‘;  
  9.   
  10. 如果你打算保持当前的风格,你可以将它附加在cssText 字符串的后面。  
  11. el.style.cssText += ‘; border-left: 1px;‘;  
  12.   
  13. //or  
  14. var el = document.getElementById(‘mydiv‘);  
  15. el.className = ‘active‘;  

 

 

(2)离线操作DOM

 

Js代码  收藏代码
  1. var data = [  
  2. {  
  3. "name": "Nicholas",  
  4. "url": "http://nczonline.net"  
  5. },  
  6. {  
  7. "name": "Ross",  
  8. "url": "http://techfoolery.com"  
  9. }  
  10. ];  
  11. //一个通用的函数,用于将新数据更新到指定节点中  
  12. function appendDataToElement(appendToElement, data) {  
  13. var a, li;  
  14. for (var i = 0, max = data.length; i < max; i++) {  
  15. a = document.createElement(‘a‘);  
  16. a.href = data[i].url;  
  17. a.appendChild(document.createTextNode(data[i].name));  
  18. li = document.createElement(‘li‘);  
  19. li.appendChild(a);  
  20. appendToElement.appendChild(li);  
  21. }  
  22. };  
  23.   
  24. <strong>//减少重排版的一个方法是通过改变display 属性,临时从文档上移除<ul>元素然后再恢复它。</strong>  
  25. var ul = document.getElementById(‘mylist‘);  
  26. ul.style.display = ‘none‘;  
  27. appendDataToElement(ul, data);  
  28. ul.style.display = ‘block‘;  
  29.   
  30. <strong>//在文档之外创建并更新一个文档片断,然后将它附加在原始列表上。  
  31. 文档片断是一个轻量级的document 对象,它被设计专用于更新、移动节点之类的任务</strong>  
  32. var fragment = document.createDocumentFragment();  
  33. appendDataToElement(fragment, data);  
  34. document.getElementById(‘mylist‘).appendChild(fragment);  
  35.   
  36. <strong>//创建要更新节点的副本,然后在副本上操作,最后用新节点覆盖老节点</strong>  
  37. var old = document.getElementById(‘mylist‘);  
  38. var clone = old.cloneNode(true);  
  39. appendDataToElement(clone, data);  
  40. old.parentNode.replaceChild(clone, old);  

推荐尽可能使用文档片断(第二种解决方案)因为它涉及最少数量的DOM 操作和重排版。唯一潜在的

 

缺点是,当前文档片断还没有得到充分利用,开发者可能不熟悉此技术。

 

(3)缓存布局信息

 

尽量减少对布局信息的查询次数,查询时将它赋给局部变量,并用局部变量参与计算。

 

Js代码  收藏代码
  1. //timeout中的代码  
  2. myElement.style.left = 1 + myElement.offsetLeft + ‘px‘;  
  3. myElement.style.top = 1 + myElement.offsetTop + ‘px‘;  
  4. if (myElement.offsetLeft >= 500) {  
  5. stopAnimation();  
  6. }  
  7.   
  8. //优化后  
  9. current++  
  10. myElement.style.left = current + ‘px‘;  
  11. myElement.style.top = current + ‘px‘;  
  12. if (current >= 500) {  
  13. stopAnimation();  
  14. }  

 

 

六。动画中使用绝对坐标,使用拖放代理。

 

七。使用事件托管技术最小化事件句柄数量。

 

当页面中存在大量元素,而且每个元素有一个或多个事件句柄与之挂接(例如onclick)时,可能会影

响性能。连接每个句柄都是有代价的,无论其形式是加重了页面负担(更多的页面标记和JavaScript 代码)

还是表现在运行期的运行时间上。你需要访问和修改更多的DOM 节点,程序就会更慢,特别是因为事件

挂接过程都发生在onload(或DOMContentReady)事件中,对任何一个富交互网页来说那都是一个繁忙的

时间段。挂接事件占用了处理时间,另外,浏览器需要保存每个句柄的记录,占用更多内存。当这些工作

结束时,这些事件句柄中的相当一部分根本不需要(因为并不是100%的按钮或者链接都会被用户点到),

所以很多工作都是不必要的。