优化DOM交互

DOM操作与交互要消耗大量时间，所以优化DOM交互有重大意义。

1、最小化现场更新

　　　　如果需要访问的DOM部分是已经显示的页面的一部分，那么这就是在进行一个现场更新。现场更新得越多，代码完成执行所需要的时间越多；完成一个操作所需要的 现场更新次数越少，则代码执行得越快。

　　下面是反模式例子：

 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));
    }

　　在上面的例子中每次循环进行了两次的现场更新，一共进行了20次的现场更新，在每次的现场更新中，浏览器都需要重新计算无数尺寸进行更新。改进方法如下，使用createDocumentFragment文档片段来构建DOM结构，可以看作是一种“虚拟内存”。

　　

 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);

　　在上面的方法中，只进在list.appendChild(fragment)中进行了一次的现场更新，故此性能更优。

2、使用innerHTML

　　　　使用innerHTML要比使用标准的DOM方法创建同样多的DOM结构要来的快。

　　　将前面的第一个例子改写如下：

var list = document.getElementById("myList"),
    html = "",
    i;
for (i = 0; i < 10; i++) {
    html += "<li>Item " + i + "</li>";
}
list.innerHTML = html;

　　虽然字符串的连接存在性能的损失，但是这种方式还是要比进行多个DOM操作来得快。

3、使用事件代理

　　页面上的事件处理程序的数量与页面响应用户交互的速度成负相关。可以使用事件冒泡的方法，在祖先上注册事件处理程序，从而减少其数量。

4、注意HTMLCollection的使用

　　时刻注意要减少HTMLCollection集合的访问次数。例如可以把将长度计算移到for循环的初始化部分，在for循环中保存需要访问的HTMLCollection元素。

　　例子：

var images = document.getElementById("img"),
    image,
    i,len;
for(i=0,len=images.length;i<len;i++){
    image = images[i];
    //进行更多的处理
}

以上内容参考《javascript高级程序设计》