如何書寫高質(zhì)量jQuery代碼(使用jquery性能問題)
1.正確引用jQuery
1.盡量在body結(jié)束前才引入jQuery,而不是在head中。
2.借助第三方提供的CDN來(lái)引入jQuery,同時(shí)注意當(dāng)使用第三方CDN出現(xiàn)問題時(shí),要引入本地的jQuery文件。(對(duì)于已經(jīng)使用了cdn的網(wǎng)站可以忽略,現(xiàn)在用戶帶寬都升級(jí)了,這個(gè)可以忽略了,放別人機(jī)器不一定穩(wěn)定)
3.如果在</body>前引入script文件的話,就不用寫document.ready了,因?yàn)檫@時(shí)執(zhí)行js代碼時(shí)DOM已經(jīng)加載完畢了。
<body> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script> </body>
2.優(yōu)化jQuery選擇器
高效正確的使用jQuery選擇器是熟練使用jQuery的基礎(chǔ),而掌握jQuery選擇器需要一定的時(shí)間積累,我們開始學(xué)習(xí)jQuery時(shí)就應(yīng)該注意選擇器的使用。
<div id="nav" class="nav"> <a class="home" href="http://www.dbjr.com.cn">腳本之家</a> <a class="articles" href="http://www.dbjr.com.cn/list/list_172_1.htm">jQuery教程</a> </div>
如果我們選擇class為home的a元素時(shí),可以使用下邊代碼:
$('.home'); //1 $('#nav a.home'); //2 $('#nav').find('a.home'); //3
1.方法1會(huì)使jQuery在整個(gè)DOM中查找class為home的a元素,性能可想而知。
2.方法2為要查找的元素添加了上下文,在這里變?yōu)椴檎襥d為nav的子元素,查找性能得到了很大提升。
3.方法3使用了find方法,它的速度更快,所以方法三最好。
關(guān)于jQuery選擇器的性能優(yōu)先級(jí),ID選擇器快于元素選擇器,元素選擇器快于class選擇器。因?yàn)镮D選擇器和元素選擇器是原生的JavaScript操作,而類選擇器不是,大家順便可以看下find context 區(qū)別,find() children區(qū)別。
3.緩存jQuery對(duì)象
緩存jQuery對(duì)象可以減少不必要的DOM查找,關(guān)于這點(diǎn)大家可以參考下緩存jQuery對(duì)象來(lái)提高性能。
4.正確使用事件委托
事件委托可以使事件更好的執(zhí)行,在動(dòng)態(tài)添加的元素上綁定事件也需要委托來(lái)實(shí)現(xiàn),在新版本的jQuery中推薦大家使用on來(lái)給元素綁定一個(gè)或多個(gè)事件的處理函數(shù)。
<table id="t"> <tr> <td>我是單元格</td> </tr> </table>
比如我們要在上邊的單元格上綁定一個(gè)單擊事件,不注意的朋友可能隨手寫成下邊的樣子:
$('#t').find('td').on('click', function () { $(this).css({ 'color': 'red', 'background': 'yellow' }); });
這樣會(huì)為每個(gè)td綁上事件,在為100個(gè)單元格綁定click事件的測(cè)試中,兩者性能相差7倍之多,好的做法應(yīng)該是下邊寫法:
$('#t').on('click', 'td', function () { $(this).css({ 'color': 'red', 'background': 'yellow' }); });
5.精簡(jiǎn)jQuery代碼
如在上述代碼中我們對(duì)jQuery代碼進(jìn)行了適當(dāng)?shù)暮喜?,類似的還有.attr()方法等,我們沒有寫成下邊的方式:
$('#t').on('click', 'td', function () { $(this).css('color', 'red').css('background', 'yellow'); });
6.減少DOM操作
剛開始使用jQuery時(shí)可能會(huì)頻繁的操作DOM,這是相當(dāng)耗費(fèi)性能的。如我們要在body中動(dòng)態(tài)輸出一個(gè)表格,一些朋友會(huì)這樣寫:
var $t = $('body'); $t.append('<table>'); $t.append('<tr><td>1</td></tr>'); $t.append('</table>');
好的做法:
$('body').append('<table><tr><td>1</td></tr></table>');
這樣在拼接完table串后再添加到body中,對(duì)DOM的操作只需一次。群里以前有朋友就因?yàn)檫@個(gè)導(dǎo)致在IE下輸出時(shí)出現(xiàn)問題,而關(guān)于字符串的拼接可以參考下最快創(chuàng)建字符串的方法。
7.不使用jQuery
原生函數(shù)總是最快的,這點(diǎn)不難理解,在代碼書寫中我們不應(yīng)該忘記原生JS。
就先總結(jié)這幾條吧,每條建議并不難理解,但總結(jié)全面的話還是要花費(fèi)不少時(shí)間的。如在減少代碼段中,如果需要根據(jù)條件從數(shù)組中得到新數(shù)組時(shí),可以使用$.grep() 方法,如果你在使用jQuery時(shí)有自己必得的話,歡迎在留言中和大家分享!
下面是其它網(wǎng)友的補(bǔ)充:
注意定義jQuery變量的時(shí)候添加var關(guān)鍵字
這個(gè)不僅僅是jQuery,所有javascript開發(fā)過(guò)程中,都需要注意,請(qǐng)一定不要定義成如下:
$loading = $('#loading'); //這個(gè)是全局定義,不知道哪里位置倒霉引用了相同的變量名,就會(huì)郁悶至死的
請(qǐng)使用一個(gè)var來(lái)定義變量
如果你使用多個(gè)變量的話,請(qǐng)如下方式定義:
var page = 0,
$loading = $('#loading'),
$body = $('body');
不要給每一個(gè)變量都添加一個(gè)var關(guān)鍵字,除非你有嚴(yán)重的強(qiáng)迫癥
定義jQuery變量
申明或者定義變量的時(shí)候,請(qǐng)記住如果你定義的是jQuery的變量,請(qǐng)?zhí)砑右粋€(gè)$符號(hào)到變量前,如下:
var$loading = $('#loading');
這里定義成這樣的好處在于,你可以有效的提示自己或者其它閱讀你代碼的用戶,這是一個(gè)jQuery的變量。
DOM操作請(qǐng)務(wù)必記住緩存(cache)
在jQuery代碼開發(fā)中,我們常常需要操作DOM,DOM操作是非常消耗資源的一個(gè)過(guò)程,而往往很多人都喜歡這樣使用jQuery:
$('#loading').html('完畢');
$('#loading').fadeOut();
代碼沒有任何問題,你也可以正常運(yùn)行出結(jié)果,但是這里注意你每次定義并且調(diào)用$('#loading')的時(shí)候,都實(shí)際創(chuàng)建了一個(gè)新的變量,如果你需要重用的話,記住一定要定義到一個(gè)變量里,這樣可以有效的緩存變量?jī)?nèi)容,如下:
var $loading = $('#loading');
$loading.html('完畢');$loading.fadeOut();
這樣性能會(huì)更好。
使用鏈?zhǔn)讲僮?/strong>
上面那個(gè)例子,我們可以寫的更簡(jiǎn)潔一些:
var $loading = $('#loading');
$loading.html('完畢').fadeOut();
精簡(jiǎn)jQuery代碼
盡量把一些代碼都整合到一起,請(qǐng)勿這樣編碼:
// ??!反面人物$button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #202020');
$target.css('color','#fff');
});
應(yīng)該這樣書寫:
$button.click(function(){
$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});
避免使用全局類型的選擇器
請(qǐng)勿如下方式書寫:$('.something > *');
這樣書寫更好:$('.something').children();
不要疊加多個(gè)ID
請(qǐng)勿如下書寫:$('#something #children');
這樣就夠了:$('#children');
多用邏輯判斷||或者&&來(lái)提速
請(qǐng)勿如下書寫:
if(!$something) {
$something = $('#something ');
}
這樣書寫性能更好:
$something= $something|| $('#something');
盡量使用更少的代碼
與其這樣書寫:if(string.length > 0){..}
不如這樣書寫:if(string.length){..}
盡量使用 .on方法
如果你使用比較新版本的jQuery類庫(kù)的話,請(qǐng)使用.on,其它任何方法都是最終使用.on來(lái)實(shí)現(xiàn)的。
盡量使用最新版本的jQuery
最新版本的jQuery擁有更好的性能,但是最新的版本可能不支持ie6/7/8,所以大家需要自己針對(duì)實(shí)際情況選擇。
盡量使用原生的Javascript
如果使用原生的Javascript也可以實(shí)現(xiàn)jQuery提供的功能的話,推薦使用原生的javascript來(lái)實(shí)現(xiàn)。
相關(guān)文章
jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼,具體實(shí)現(xiàn)思路及代碼如下,感興趣的朋友可以學(xué)習(xí)下2013-07-07jQuery中的replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換功能
這篇文章主要介紹了jQuery之replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換,使用jQuery的replace()方法可以很方便地實(shí)現(xiàn)不同尺寸圖片的切換,需要的朋友可以參考下2023-06-06jquery取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法
這篇文章主要介紹了jquery取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值的方法,比較實(shí)用,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)的AJAX簡(jiǎn)單彈出層效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的AJAX簡(jiǎn)單彈出層效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)彈出層效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用介紹
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用,需要的朋友可以參考下。2011-10-10