DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery代碼優化 遍歷篇
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版)》相關章節內容編撰而成。)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved