減少對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集合后可以用數組緩存