javascript性能优化 之 DOM交互

在javascript各个方面，DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间，因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。

1、最小化DOM更新

　　看下面例子：

    var list = document.getElementById("ul");
    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        list.appendChild(item);
    }
    //这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

　　我们可以使用 文档碎片 来最小化DOM更新。

    var list = document.getElementById("ul");
    var fragment = document.createDocumentFragment();

    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        fragment.appendChild(item);
    }
    list.appendChild(fragment);

　　更多关于 文档碎片，详见之前文章 《文档碎片》

2、使用innerHTML

　　对于比较大的DOM更改，使用innerHTML要比createElement()和appendChild()快。

    var list = document.getElementById("ul");
    var html = "";

    for (var i=0; i < 10; i++){
        html += "<li>item" + i + "<li>";
    }
    list.innerHTML = html;

3、使用事件委托

　　详见之前文章 《javascript性能优化 之 事件委托》

4、注意NodeList

　　最小化访问NodeList的次数可以极大的改进脚本的性能，因为每次访问NodeList，都会运行一次基于文档的查询。

    var imgs = document.getElementsByTagName("img");

    for (var i=0, len=imgs.length; i < len; i++){
        var image = imgs[i];
        //more code
    }
    //这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

　　更多关于 NodeList，详见之前文章 《深入理解 NodeList》

 本文转自挨踢前端博客园博客，原文链接http://www.cnblogs.com/duanhuajian/archive/2013/04/28/3049602.html如需转载请自行联系原作者

@挨踢前端