欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何書寫高質(zhì)量jQuery代碼(使用jquery性能問題)

 更新時間：2014年06月30日 01:31:56   投稿：mdxy-dxy  
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁中也已經(jīng)開始使用jQuery，今天總結(jié)下怎么書寫更好的jQuery代碼使jQuery代碼更好、更快的執(zhí)行，希望本篇jQuery教程一改大家以前不合理的做法

1.正確引用jQuery

1.盡量在body結(jié)束前才引入jQuery，而不是在head中。
2.借助第三方提供的CDN來引入jQuery，同時注意當使用第三方CDN出現(xiàn)問題時，要引入本地的jQuery文件。（對于已經(jīng)使用了cdn的網(wǎng)站可以忽略，現(xiàn)在用戶帶寬都升級了，這個可以忽略了，放別人機器不一定穩(wěn)定）
3.如果在</body>前引入script文件的話，就不用寫document.ready了，因為這時執(zhí)行js代碼時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選擇器需要一定的時間積累，我們開始學(xué)習(xí)jQuery時就應(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元素時，可以使用下邊代碼：

$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3

1.方法1會使jQuery在整個DOM中查找class為home的a元素，性能可想而知。
2.方法2為要查找的元素添加了上下文，在這里變?yōu)椴檎襥d為nav的子元素，查找性能得到了很大提升。
3.方法3使用了find方法，它的速度更快，所以方法三最好。

關(guān)于jQuery選擇器的性能優(yōu)先級，ID選擇器快于元素選擇器，元素選擇器快于class選擇器。因為ID選擇器和元素選擇器是原生的JavaScript操作，而類選擇器不是，大家順便可以看下find context 區(qū)別，find() children區(qū)別。

3.緩存jQuery對象

緩存jQuery對象可以減少不必要的DOM查找，關(guān)于這點大家可以參考下緩存jQuery對象來提高性能。

4.正確使用事件委托
事件委托可以使事件更好的執(zhí)行，在動態(tài)添加的元素上綁定事件也需要委托來實現(xiàn)，在新版本的jQuery中推薦大家使用on來給元素綁定一個或多個事件的處理函數(shù)。

<table id="t">
 <tr>
  <td>我是單元格</td>
 </tr>
</table>

比如我們要在上邊的單元格上綁定一個單擊事件，不注意的朋友可能隨手寫成下邊的樣子：

$('#t').find('td').on('click', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

這樣會為每個td綁上事件，在為100個單元格綁定click事件的測試中，兩者性能相差7倍之多，好的做法應(yīng)該是下邊寫法：

$('#t').on('click', 'td', function () {
 $(this).css({ 'color': 'red', 'background': 'yellow' });
});

5.精簡jQuery代碼
如在上述代碼中我們對jQuery代碼進行了適當?shù)暮喜ⅲ愃频倪€有.attr()方法等，我們沒有寫成下邊的方式：

$('#t').on('click', 'td', function () {
 $(this).css('color', 'red').css('background', 'yellow');
});

6.減少DOM操作
剛開始使用jQuery時可能會頻繁的操作DOM，這是相當耗費性能的。如我們要在body中動態(tài)輸出一個表格，一些朋友會這樣寫：

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中，對DOM的操作只需一次。群里以前有朋友就因為這個導(dǎo)致在IE下輸出時出現(xiàn)問題，而關(guān)于字符串的拼接可以參考下最快創(chuàng)建字符串的方法。

7.不使用jQuery

原生函數(shù)總是最快的，這點不難理解，在代碼書寫中我們不應(yīng)該忘記原生JS。

就先總結(jié)這幾條吧，每條建議并不難理解，但總結(jié)全面的話還是要花費不少時間的。如在減少代碼段中，如果需要根據(jù)條件從數(shù)組中得到新數(shù)組時，可以使用$.grep() 方法，如果你在使用jQuery時有自己必得的話，歡迎在留言中和大家分享！

下面是其它網(wǎng)友的補充：

注意定義jQuery變量的時候添加var關(guān)鍵字
　　這個不僅僅是jQuery，所有javascript開發(fā)過程中，都需要注意，請一定不要定義成如下：

$loading = $('#loading'); //這個是全局定義，不知道哪里位置倒霉引用了相同的變量名，就會郁悶至死的

請使用一個var來定義變量
　　如果你使用多個變量的話，請如下方式定義：

復(fù)制代碼 代碼如下:

var page = 0,
  $loading = $('#loading'),
  $body = $('body');

不要給每一個變量都添加一個var關(guān)鍵字，除非你有嚴重的強迫癥
定義jQuery變量
　　申明或者定義變量的時候，請記住如果你定義的是jQuery的變量，請?zhí)砑右粋€$符號到變量前，如下：

var$loading = $('#loading');

這里定義成這樣的好處在于，你可以有效的提示自己或者其它閱讀你代碼的用戶，這是一個jQuery的變量。

DOM操作請務(wù)必記住緩存（cache）

在jQuery代碼開發(fā)中，我們常常需要操作DOM，DOM操作是非常消耗資源的一個過程，而往往很多人都喜歡這樣使用jQuery：

復(fù)制代碼 代碼如下:

$('#loading').html('完畢');
$('#loading').fadeOut();

代碼沒有任何問題，你也可以正常運行出結(jié)果，但是這里注意你每次定義并且調(diào)用$('#loading')的時候，都實際創(chuàng)建了一個新的變量，如果你需要重用的話，記住一定要定義到一個變量里，這樣可以有效的緩存變量內(nèi)容，如下：

復(fù)制代碼 代碼如下:

var $loading = $('#loading');
$loading.html('完畢');$loading.fadeOut();

這樣性能會更好。

使用鏈式操作

　　上面那個例子，我們可以寫的更簡潔一些：

復(fù)制代碼 代碼如下:

var $loading = $('#loading');
$loading.html('完畢').fadeOut();

精簡jQuery代碼

　　盡量把一些代碼都整合到一起，請勿這樣編碼：

復(fù)制代碼 代碼如下:

// ！！反面人物$button.click(function(){
    $target.css('width','50%');
    $target.css('border','1px solid #202020');
    $target.css('color','#fff');
});

應(yīng)該這樣書寫：

復(fù)制代碼 代碼如下:

$button.click(function(){
    $target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});

避免使用全局類型的選擇器

　　請勿如下方式書寫：$('.something > *');
　　這樣書寫更好：$('.something').children();

不要疊加多個ID

　　請勿如下書寫：$('#something #children');
　　這樣就夠了：$('#children');

多用邏輯判斷||或者&&來提速

　　請勿如下書寫：

復(fù)制代碼 代碼如下:

if(!$something) {
    $something = $('#something ');
}

　　這樣書寫性能更好：

$something= $something|| $('#something');
 
 
盡量使用更少的代碼

　　與其這樣書寫：if(string.length > 0){..}

　　不如這樣書寫：if(string.length){..}

盡量使用 .on方法
　　如果你使用比較新版本的jQuery類庫的話，請使用.on，其它任何方法都是最終使用.on來實現(xiàn)的。

　　盡量使用最新版本的jQuery
　　最新版本的jQuery擁有更好的性能，但是最新的版本可能不支持ie6/7/8，所以大家需要自己針對實際情況選擇。

　　盡量使用原生的Javascript
　　如果使用原生的Javascript也可以實現(xiàn)jQuery提供的功能的話，推薦使用原生的javascript來實現(xiàn)。

相關(guān)文章

最新評論