遍历dom时如何优化JS性能

1. 遍历DOM

当遍历父节点下面的所有子节点时，例如：

<div id="parent">
  <li>1</li>
  <li>2</li>
  9000个
  <li>9003</li>
</div>

var div=document.getElementById("div");

1) nextSibling方法

var f=div.firstChild;
var name='';
do{
  name=div.nodeName;
}while(f=f.nextSibling)

2) childNodes

var li_arr=div.childNodes;
for(var i=0, len=arr.length; i<len; i++){
  name=li_arr[i].nodeName;
}

两种方法的运行时间几乎相等，但是在IE中nextSibling比childNodes快很多，IE6中快16倍，IE7中快105倍。推荐使用第一种方法。

2. 元素节点

childNodes、nextSibling等都包含空格或者换行符之类，因此是使用时会增加一些不必要的操作。在实际使用时可以用children代替childNodes，nextElementSibling代替nextSibling，以此类推。

3. 选择器API

jQuery中提供了CSS选择器，进行DOM操作，最新的浏览器也提供了一个名叫querySeletorAll()的原生DOM方法，这种方法比使用js和dom来遍历查找元素快很多。例如：

var li_arr=document.querySeletorAll("#div li");

该方法不会返回HTML集合，因此返回的节点不会对应实时的文档结构。