建站
咨詢
售后
建站咨詢
新聞中心
收藏與使用選擇符查找頁面中的元素相對(duì)應(yīng)，jQuery遍歷操作背后的工作機(jī)制也很有特色。了解了jQuery對(duì)DOM進(jìn)行遍歷背后的工作機(jī)制，可以在編寫代碼時(shí)有意識(shí)地避免一些不必要的重復(fù)操作，從而提升代碼的性能。本文就從jQuery的遍歷機(jī)制入手簡(jiǎn)單探討一下優(yōu)化jQuery代碼的問題。
在網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手，突出企業(yè)的產(chǎn)品/服務(wù)/品牌，幫助企業(yè)鎖定精準(zhǔn)用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無錫營(yíng)銷推廣。創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)十載了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。
jQuery對(duì)象棧
jQuery內(nèi)部維護(hù)著一個(gè)jQuery對(duì)象棧。每個(gè)遍歷方法都會(huì)找到一組新元素(一個(gè)jQuery對(duì)象)，然后jQuery會(huì)把這組元素推入到棧中。而每個(gè)jQuery對(duì)象都有三個(gè)屬性：context、selector和prevObject，其中的prevObject屬性就指向這個(gè)對(duì)象棧中的前一個(gè)對(duì)象，而通過這個(gè)屬性可以回溯到最初的DOM元素集。
jQuery為我們操作這個(gè)內(nèi)部對(duì)象棧提供了兩個(gè)非常有用的方法：
◆ end()
◆ andSelf()
調(diào)用第一個(gè)方法只是簡(jiǎn)單地彈出一個(gè)對(duì)象(結(jié)果就是回到前一個(gè)jQuery對(duì)象)。第二個(gè)方法更有意思，調(diào)用它會(huì)在棧中回溯一個(gè)位置，然后把兩個(gè)位置上的元素集組合起來，并把這個(gè)新的、組合之后的元素集推入棧的上方。
利用這個(gè)DOM元素?？梢詼p少重復(fù)的查詢和遍歷的操作，而減少重復(fù)操作也正是優(yōu)化jQuery代碼性能的關(guān)鍵所在。
優(yōu)化示例
下面是一個(gè)函數(shù)(省略了前后代碼)，用于實(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類的行中刪除該類，另一次是為了給新選中的行添加這個(gè)類。
優(yōu)化這個(gè)函數(shù)的方法有兩個(gè)，一是連綴。
連綴
連綴優(yōu)化利用的就是jQuery的內(nèi)部對(duì)象棧和.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');
- });
- }
第一次調(diào)用.find()會(huì)把表格行推到棧上，然后的.end()方法則把這些行彈出，從而讓下一次調(diào)用.find()仍然是在#news表格上執(zhí)行操作。這樣就把兩次選擇符查找減少為一次。
另一個(gè)優(yōu)化方法是緩存。
緩存
所謂緩存，在這里就是把之前操作的結(jié)果保存起來，以便將來重用。優(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');
- });
- }
與連綴的方法相比，緩存方式稍嫌冗長(zhǎng)，因?yàn)轭~外創(chuàng)建了一個(gè)用于保存jQuery對(duì)象的變量。但從另一個(gè)角度來看，這種方式在代碼中可以實(shí)現(xiàn)對(duì)選中元素的兩次操作完全分離，而這也許可以滿足我們其他情況下的需求。同樣，因?yàn)榭梢园堰x中的元素保存在stripe()函數(shù)之外，也就避免了每次調(diào)用函數(shù)時(shí)重復(fù)查詢選擇符的操作。
結(jié)論
利用jQuery的內(nèi)部對(duì)象棧和緩存，可以減少重復(fù)的DOM查詢及遍歷，從而提高腳本執(zhí)行速度。
因?yàn)楦鶕?jù)ID在頁面中選擇元素速度極快，以上兩個(gè)例子在優(yōu)化前后不會(huì)有明顯的性能差異。在實(shí)際編碼中，應(yīng)該選擇可讀性最好、最容易維護(hù)的方式。如果真的遇到了性能瓶頸，以上優(yōu)化技術(shù)都可以起到立竿見影的效果。
原文：http://www.ituring.com.cn/article/382
網(wǎng)站題目：jQuery代碼優(yōu)化之遍歷
網(wǎng)頁網(wǎng)址：http://m.fisionsoft.com.cn/article/cohdeop.html
