《JavaScript高级程序设计》性能探究之优化DOM交互

本文来自《JavaScript高级程序设计》阅读笔记

 

 

优化DOM交互

 

-------- DOM操作与交互要消耗大量时间，因为它们往往需要重新渲染整个页面或者某一个部分。

 

 

1. 最小化现场更新

• 现场更新：因为需要立即（现场）对页面对用户的显示进行更新。
• 现场更新越多，代码完成执行所花的时间久越长

举例：

给列表添加10个项目。

var list = document.getElementById("myList"),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      list.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

 

   ------ 这样添加一个项目，需要添加li元素，给它添加文本节点，10个项目的话，需要20次的现场更新。

 

  比较好的方式还是创建文档碎片来创建DOM结构，接着将其添加到List元素中，为了避免现场更新和页面闪烁。

 

 

var list = document.getElementById("myList"),
      fragment = document.createDocumentFragment(),
      item,
      i;
for(i=0;i<10;i++){
      item = document.createElement("li");
      fragment.appendChild(item);
      item.appendChild(document.createTextNode("Item "+i));
}

list.appendChild(fragment);

 

     2.  使用innerHTML

当把innerHTML设置为某一个值，后台会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的，所以执行快得多。

     3.  使用事件代理

     4.  注意HTMLCollection

优化HTMLCollection访问最重要的地方就是循环。

举例：

var images = document.getElementsByTagName("img"),
      i,
      len;
for(i=0;len = images.length;i++){

}

 

发生以下情况时候回返回HTMLCollection对象

• 进行对getElementsByTagName()的调用
• 获取元素的childNodes属性
• 获取元素的attributes属性
• 访问特殊的集合，如document.forms、document.images等