DOM操作性能注意

减少对dom的操作

function innerHTMLLoop1() {　　
    for (var count = 0; count < 10000; count++) {　　　　 
        document.getElementById("test").innerHTML += "增加内容";　　 
    } 
}

function innerHTMLLoop2() {
　　var content = "";  　　
    for(var count = 0; count < 10000; count++) {  　　　　
        content += "增加内容";  　　
    }  　　
    document.getElementById("test").innerHTML += content;  
}

两个函数做的事一样，但第二个函数做的dom操作明显比第一个少

循环操作前先缓存集合的长度

for(var i = 0, len = allDivs.length; i < len; i++) {
    // todo somethings
}

尽量使用原生的api去操作元素

以下是一些常用的api

Paste_Image.png

上图列举的所有属性能被FF，safari，chrome，opera所支持，ie6-8只支持children。
遍历children比childNodes更快，因为集合项少了。HTML源码中的空格实际上是文本节点，但他们不包含在children中。

访问数组要比访问html集合的元素快，获得html集合后可以用数组缓存