jQuery程式碼優化：遍歷篇

與使用選擇符查詢頁面中的元素相對應，jQuery遍歷操作背後的工作機制也很有特色。瞭解了jQuery對DOM進行遍歷背後的工作機制，可以在編寫程式碼時有意識地避免一些不必要的重複操作，從而提升程式碼的效能。本文就從jQuery的遍歷機制入手簡單探討一下優化jQuery程式碼的問題。

jQuery物件棧

jQuery內部維護著一個jQuery物件棧。每個遍歷方法都會找到一組新元素（一個jQuery物件），然後jQuery會把這組元素推入到棧中。而每個jQuery物件都有三個屬性：context、selector和prevObject，其中的prevObject屬性就指向這個物件棧中的前一個物件，而通過這個屬性可以回溯到最初的DOM元素集。

jQuery為我們操作這個內部物件棧提供了兩個非常有用的方法：

• .end()
• .andSelf()

呼叫第一個方法只是簡單地彈出一個物件（結果就是回到前一個jQuery物件）。第二個方法更有意思，呼叫它會在棧中回溯一個位置，然後把兩個位置上的元素集組合起來，並把這個新的、組合之後的元素集推入棧的上方。

利用這個DOM元素棧可以減少重複的查詢和遍歷的操作，而減少重複操作也正是優化jQuery程式碼效能的關鍵所在。

優化示例

下面是一個函式（省略了前後程式碼），用於實現表格行條紋效果：

function stripe() {
    $('#news').find('tr.alt').removeClass('alt');
    $('#news tbody').each(function() {
        $(this).children(':visible').has('td')
        .filter(':group(3)').addClass('alt');
    });
}

stripe()函式兩次使用了ID選擇符#news查詢元素：一次是為了從帶有alt類的行中刪除該類，另一次是為了給新選中的行新增這個類。

優化這個函式的方法有兩個，一是連綴。

連綴

連綴優化利用的就是jQuery的內部物件棧和.end()方法。優化後的程式碼如下：

function stripe() {
    $('#news').
    find('tr.alt').removeClass('alt').end()
    find('tbody').each(function() {
           $(this).children(':visible').has('td')
           .filter(':group(3)').addClass('alt');
    });
}

第一次呼叫.find()會把表格行推到棧上，然後的.end()方法則把這些行彈出，從而讓下一次呼叫.find()仍然是在#news表格上執行操作。這樣就把兩次選擇符查詢減少為一次。

另一個優化方法是快取。

快取

所謂快取，在這裡就是把之前操作的結果儲存起來，以便將來重用。優化後的程式碼如下：

var $news = $('#news');
function stripe() {
    $news.find('tr.alt').removeClass('alt');
    $news.find('tbody').each(function() {
        $(this).children(':visible').has('td')
        .filter(':group(3)').addClass('alt');
    });
}

與連綴的方法相比，快取方式稍嫌冗長，因為額外建立了一個用於儲存jQuery物件的變數。但從另一個角度來看，這種方式在程式碼中可以實現對選中元素的兩次操作完全分離，而這也許可以滿足我們其他情況下的需求。同樣，因為可以把選中的元素儲存在stripe()函式之外，也就避免了每次呼叫函式時重複查詢選擇符的操作。

結論

利用jQuery的內部物件棧和快取，可以減少重複的DOM查詢及遍歷，從而提高指令碼執行速度。

因為根據ID在頁面中選擇元素速度極快，以上兩個例子在優化前後不會有明顯的效能差異。在實際編碼中，應該選擇可讀性最好、最容易維護的方式。如果真的遇到了效能瓶頸，以上優化技術都可以起到立竿見影的效果。

（注：本文基於《jQuery基礎教程（第3版）》相關章節內容編撰而成。）

---

相關連結：

• jQuery程式碼優化：選擇符篇
• jQuery程式碼優化：基本事件篇
• jQuery程式碼優化：事件委託篇