【轉】DOM性能瓶頸與Javascript性能優化

原文地址：http://www.cnblogs.com/hyddd/archive/2013/02/07/2908960.html

這兩天比較閒，寫了兩篇關於JS性能缺陷與解決方案的文章（《JS特性性能缺陷及JIT的解決方案》，《Javascript垃圾回收淺析》），主要描述了untyped，GC帶來的問題與JIT引擎的解決方案。但相對於Js引擎的問題，我認爲DOM致使的性能問題更值得關注。

 

一.Dom的性能瓶頸及緣由

1. 爲何是DOM

    標準的xml/html的文本解析協議，常見的有DOM與SAX。在解析速度及內存佔用上，SAX比DOM有優點，但爲何瀏覽器選擇DOM解析html？

    （1）DOM VS SAX

    SAX提供一次性解析文本，不生成對象，Iterator模式訪問元素，event-based，PUSH模式觸發，簡單說：App須要向Parser註冊，當Parser遍歷xml時，觸發調用APP 。想深刻體驗，用下javax.xml.parsers.SAXParser。這裏說個題外話，改進版StAX是PULL模式，但這都不重要了，重要是：一次性文本解析，不生成對象。

    DOM解析文本後，生成DOM樹。即：一次性文本解析，生成對象。

    （2）瀏覽器選擇了DOM

    單次效率DOM不如SAX，但SAX不生成對象，瀏覽器不少操做很難知足，好比：元素定位，元素樣式渲染……因此DOM是必然之選。

 

2. DOM的性能問題

    【1】核心問題

    當解析的html文件很大時，生成DOM樹佔用內存較大，同時遍歷（不更新）元素耗時也更長。但這都不是重點，DOM的核心問題是：DOM修改致使的頁面重繪、從新排版！從新排版是用戶阻塞的操做，同時，若是頻繁重排，CPU使用率也會猛漲！

    DOM操做會致使一系列的重繪（repaint）、從新排版（reflow）操做。爲了確保執行結果的準確性，全部的修改操做是按順序同步執行的。大部分瀏覽器都不會在JavaScript的執行過程當中更新DOM。相應的，這些瀏覽器將對對 DOM的操做放進一個隊列，並在JavaScript腳本執行完畢之後按順序一次執行完畢。也就是說，在JavaScript執行的過程，直到發生從新排版，用戶一直被阻塞。

    通常的瀏覽器中（不含IE），repaint的速度遠快於reflow，因此避免reflow更重要。

    致使repaint、reflow的操做：

    * DOM元素的添加、修改（內容）、刪除( Reflow + Repaint)

    * 僅修改DOM元素的字體顏色（只有Repaint，由於不須要調整佈局）

    * 應用新的樣式或者修改任何影響元素外觀的屬性

    * Resize瀏覽器窗口、滾動頁面

    * 讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 

    【2】其餘

    某些Javascript框架中，CSS選擇器，如：var el = $('.hyddd');因爲IE六、7不支持，因此Javascript框架必須經過遍歷整個DOM樹來尋找對象。

 

二. 針對DOM問題，Javascript的應對方案

針對repaint、reflow，Nicholas 大叔在他的《Speed up your JavaScript, Part 4》作了詳細介紹，這裏我也整理一下：

解決問題的關鍵是：減小因DOM操做，引發的reflow。Nicholas總結了一些方法：

【1】在DOM外，執行儘可能多的變動操做。Demo：

// 很差的作法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}   

// 更好的作法
// 使用容器存放臨時變動， 最後再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

【2】操做DOM前，先把DOM節點刪除或隱藏，由於隱藏的節點不會觸發重排。Demo以下：

list.style.display = "none";  
for (var i=0; i < items.length; i++){  
    var item = document.createElement("li");  
    item.appendChild(document.createTextNode("Option " + i);  
    list.appendChild(item);  
}  
list.style.display = "";

【3】一次性，修改樣式屬性。Demo以下：

// 很差的作法
// 這種作法會觸發屢次重排
element.style.backgroundColor = "blue";  
element.style.color = "red";  
element.style.fontSize = "12em";

// 更好的作法是，把樣式都放在一個class下
.newStyle {  
    background-color: blue;  
    color: red;  
    font-size: 12em;  
}  
element.className = "newStyle";

【4】使用緩存，緩存臨時節點。

// 很差的作法
document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft +  
document.getElementById("myDiv").offsetWidth + "px";

// 更好的作法
var myDiv = document.getElementById("myDiv");  
myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";