jQuery代碼優(yōu)化遍歷篇

更新時間：2011年11月01日 17:11:18 作者：

與使用選擇符查找頁面中的元素相對應，jQuery遍歷操作背后的工作機制也很有特色

了解了jQuery對DOM進行遍歷背后的工作機制，可以在編寫代碼時有意識地避免一些不必要的重復操作，從而提升代碼的性能。本文就從jQuery的遍歷機制入手簡單探討一下優(yōu)化jQuery代碼的問題。

jQuery對象棧

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

jQuery為我們操作這個內(nèi)部對象棧提供了兩個非常有用的方法：

.end()
.andSelf()
調用第一個方法只是簡單地彈出一個對象（結果就是回到前一個jQuery對象）。第二個方法更有意思，調用它會在棧中回溯一個位置，然后把兩個位置上的元素集組合起來，并把這個新的、組合之后的元素集推入棧的上方。

利用這個DOM元素?？梢詼p少重復的查詢和遍歷的操作，而減少重復操作也正是優(yōu)化jQuery代碼性能的關鍵所在。

優(yōu)化示例
下面是一個函數(shù)（省略了前后代碼），用于實現(xiàn)表格行條紋效果：

復制代碼代碼如下:

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

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

優(yōu)化這個函數(shù)的方法有兩個，一是連綴。

連綴
連綴優(yōu)化利用的就是jQuery的內(nèi)部對象棧和.end()方法。優(yōu)化后的代碼如下：

復制代碼代碼如下:

 
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表格上執(zhí)行操作。這樣就把兩次選擇符查找減少為一次。

另一個優(yōu)化方法是緩存。

緩存
所謂緩存，在這里就是把之前操作的結果保存起來，以便將來重用。優(yōu)化后的代碼如下：

復制代碼代碼如下:

 
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'); 
}); 
} 

與連綴的方法相比，緩存方式稍嫌冗長，因為額外創(chuàng)建了一個用于保存jQuery對象的變量。但從另一個角度來看，這種方式在代碼中可以實現(xiàn)對選中元素的兩次操作完全分離，而這也許可以滿足我們其他情況下的需求。同樣，因為可以把選中的元素保存在stripe()函數(shù)之外，也就避免了每次調用函數(shù)時重復查詢選擇符的操作。

結論
利用jQuery的內(nèi)部對象棧和緩存，可以減少重復的DOM查詢及遍歷，從而提高腳本執(zhí)行速度。

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

（注：本文基于《jQuery基礎教程（第3版）》相關章節(jié)內(nèi)容編撰而成。）

您可能感興趣的文章: