摘要：使用局部變量來訪問集合元素訪問任何類型的，當同一個屬性或者方法被訪問同一次以上時，最好使用一個局部變量緩存該成員。當遍歷一個集合的時候，第一個要優化的就是將集合引用存儲在局部變量中，并在循環之外緩存屬性。

  
本文章記錄本人在深入學習Javascirpt DOM中看書理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。

簡單了解重繪和重排

在渲染dom樹中為每個需要顯示的dom樹節點存放至少一個節點，隱藏的dom元素在渲染樹中沒有對應的節點。然后將頁面的元素看作一個具有填、邊距、邊框和位置的盒子，也就是經常提到的盒模型。如果dom樹和渲染樹構造完畢，瀏覽器就會顯示或者說是繪制頁面的上的元素了。

當dom改變影響了元素的幾何屬性（寬和高）時候，如改變邊距寬度或者在段落中添加文字將發生一系列后續動作，瀏覽器就會重新計算元素的幾何屬性，而且其他元素的幾何屬性和位置也會因此收到影響。瀏覽器是渲染樹上受到影響的部分失效，然后重構渲染樹，這個過程叫做重排。當重排完畢后，瀏覽器會在繪制進程中重新繪制屏幕上受到影響的部分。

有一些屬性修改是不會影響幾何屬性的，例如：改變一個元素的背景色不會影響它的高度和寬度。這種情況，只需要重繪，因為元素的布局沒有發生變化。

什么情況下會觸發重繪和重排

添加或刪除可見的dom元素。

元素的位置改變。

元素的尺寸改變。

內容改變，如文本改變或圖片被另一個尺寸的圖片所代替。

最初的頁面渲染。

瀏覽器窗口大小改變。

某一些改變可能導致重排整個頁面，例如：當一個滾動條出現時。

如何減少重排和重繪

由于重排與重繪的代價較高，提高程序響應速度是一個好策略是減少此類的操作發生的機會。

例1，應該將多個dom風格改變后合并到一個批次中一次性執行。

var el = document.getElementById("demo");
el.style.broderLeft = "1px";
el.style.broderRight = "2px";
el.style.padding = "5px";

上面的代碼改變了3個樣式屬性，每次改變都會影響元素的幾何屬性。導致瀏覽器重排了3次。現在大多數瀏覽器都優化了這種情況，只進行一次重排，但是在舊版本的瀏覽器中，效率非常的底下。

實現相同效果但效率更高的方法：將所有改變合并在一起執行，只修改dom一次。使用cssText。

el.style.cssText = "border-left: 1px;border-right: 2px;padding: 5px";

還有另外一種優化方式就是修改css的類名稱，而不是修改元素的內聯風格代碼。這種方法適合用于那些風格不依賴于運行邏輯且不需要計算的情況下。改變后的css類名稱更加清晰，更便于維護。

el.className += " active";

例2，當需要對dom元素進行多次的修改時，可以通過以下步驟減少重繪和重排次數。

從文檔流中摘除該元素。

對其應用多重改變。

將元素帶回文檔中。

這個過程中引發兩次重排：第1步引發一次，第3步引發一次。如果忽略了這兩個步驟，那么第2步中每次改變都會引發一次重排。

經歷3步后可以將dom從文檔中摘除：

隱藏元素

使用一個文檔片斷在一存在dom之外創建一個子樹，然后將它復制到文檔。

將原始文檔復制到一個脫離文檔的節點中，修改副本，然后覆蓋原始元素。

避免大部分重排

重排有時候只影響渲染數的一小部分，但也能影響一大部分。甚至整個渲染樹。瀏覽器需要重排ud部分越小。應用程序的響應速度越快，因此，當一個頁面頂部的動畫推移差不多整個頁面時，將引發巨大的重排動作，使用戶感到動畫不流暢。渲染數的大多數節點需要重新計算，這使情況更加糟糕。

以下步驟可以避免大部分頁面進行重排：

使用絕對定位坐標定位頁面動畫元素，使它位于頁面布局流之外。

啟動元素動畫，當它擴大時候，將會臨時覆蓋部頁面。這是一個重繪過程，但是只能影響頁面一小部分，避免重排以及重繪一大塊也頁面。

當動畫結束時候，重新定位。

使用dom方法更新頁面內容的另一個方法就是克隆已有的dom元素，而不是創建新的元素。在大多數瀏覽器上，克隆節點更有效率，但是提高不是很多。如果用克隆節點的方法去創建1000行的表格，只創建一次單元格，然后重復的執行復制操作，這樣會快一些。

所以說：克隆節點與創建節都差不多，而克隆節點方法更加適合那些重復操作同一個dom元素。

我們經常需要從一個dom元素開始，操作周圍的元素，或者遞歸迭代所有的子節點。這時可以使用childNodes集合或者使用nextSibling獲得每個元素的兄弟節點。

var testNextSibling = function(){
    var el = documentgetElementById("demo"), ch = el.firstChild, name = "";
    do {
        name = ch.nodeName; 
    } while (ch = ch.nextSibling);

    return name;
};

var testChildNodes = function(){
    var el = documentgetElementById("demo"), ch = el.childNodes, len = ch.length, name = "";
    for (var i = 0; i < len; i++) {
        name = ch[i].nodeName;
    }
    return name;
};

比較上面兩個功能相同的函數，它們都采用非遞歸方式遍歷一個元素的子節點。在不同的瀏覽器下，這兩個函數運行的時間都基本相同，但是在IE下，nextSibling表現比childNode好。在IE6下，nextSibling比childNode塊16倍，在IE7下，nextSibling塊105倍。所以說，在舊版本的IE下使用nextsibling抓取dom是首選，在其他的情況下，主要看個人和團隊的習慣決定。

訪問任何類型的dom，當同一個dom屬性或者方法被訪問同一次以上時，最好使用一個局部變量緩存該dom成員。當遍歷一個集合的時候，第一個要優化的就是將集合引用存儲在局部變量中，并在循環之外緩存length屬性。然后，如果在循環體中多次訪問同一個集合元素，那么使用局部變量緩存它。

// bad
var collectionGlobal = function(){
    var coll = document.getElementsByTagName("div"), len = coll.length, name = "";
    for (var i = 0; i < coll; i++) {
        name = document.getElementsByTagName("div")[i].nodeName;
        name = document.getElementsByTagName("div")[i].nodeType;
        name = document.getElementsByTagName("div")[i].tagName;
    }
    return name;
};

// good
var collectionGlobal = function(){
    var coll = document.getElementsByTagName("div"), len = coll.length, name = "", el = null;
    for (var i = 0; i < coll; i++) {
        el = coll[i];
        name = el.nodeName;
        name = el.nodeType;
        name = el.tagName;
    }
    return name;
};

使用css選擇器是一個便捷的確定節點的方法。許多js庫提供類似的API，而且最新的瀏覽器提供了一個名為querySelectorAll的元素瀏覽器dom函數。顯然這種方法比使用js和dom迭代并縮小元素列表的方法要快。

var el = document.querySelectorAll("#demo a");

當需要聯合查詢的時候，使用querySelectorAll方法更加的便利。例如，在頁面中，一些div元素的class名稱是demo1，另一些class名稱是demo2，可以使用querySelectorAll一次性獲得這兩類節點。

var el = document.querySelectorAll(".demo1, .demo2");

如果瀏覽器支持querySelectorAll方法的話，那么最好就使用它。。還有另一個函數querySelector獲取節點，它可以返回符合查詢條件的第一個節點。

一個簡單而優雅的處理dom事件的技術是事件托管（事件代理）。它基于這樣一個事實：事件逐層冒泡總能被父級捕獲。采用事件托管技術后，只需要在一個包裝元素上連接一個句柄，用與處理子元素發生的所有事件。

捕獲

達到目標

冒泡

  
因為IE不支持事件捕獲，所以只要實現托管技術使用冒泡就足夠了。

事件托管技術就是只要監聽事件偵測事件是不是從目標元素中發出的。里面會有一些跨瀏覽器的代碼，如果將它們移入一個可復用的庫里面，那么代碼就會變的很干凈。跨瀏覽器部分包括：

訪問事件對象，并判斷事件緣（目標）。

結束文檔樹上冒泡。

阻止默認動作（可選）。

HTML: 



    
我是第1個li
    
我是第2個li
    
我是第3個li




JS:
var oUl = document.getElementById("demo");

oUl.addEventListener("click", function(e){
    // 兼容 ie
    var e = e || window.event,
        target = e.target || e.srcElement;

    alert(target.innerHTML);
});

  
最后，如果文章有什么錯誤和疑問的地方，請指出。與sf各位共勉！