一、注意定義jQuery變量的時(shí)候添加var關(guān)鍵字

這個(gè)不僅僅是jQuery，所有javascript開(kāi)發(fā)過(guò)程中，都需要注意，請(qǐng)一定不要定義成如下：

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

二、請(qǐng)使用一個(gè)var來(lái)定義變量

如果你使用多個(gè)變量的話，請(qǐng)如下方式定義：

代碼如下:

varpage = 0,

$loading = $('#loading'),

$body = $('body');

不要給每一個(gè)變量都添加一個(gè)var關(guān)鍵字，除非你有嚴(yán)重的強(qiáng)迫癥

三、定義jQuery變量是添加$符號(hào)

申明或者定義變量的時(shí)候，請(qǐng)記住如果你定義的是jQuery的變量，請(qǐng)?zhí)砑右粋€(gè)$符號(hào)到變量前，如下：

代碼如下:

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

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

四、DOM操作請(qǐng)務(wù)必記住緩存（cache）

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

代碼如下:

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

$('#loading').fadeOut();

代碼沒(méi)有任何問(wèn)題，你也可以正常運(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)讲僮?/p>

上面那個(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)。

十四、總是從#id選擇器來(lái)繼承

這是jQuery選擇器的一條黃金法則。jQuery選擇一個(gè)元素最快的方法就是用ID來(lái)選擇了。

代碼如下:

$('#content').hide();

或者從ID選擇器繼承來(lái)選擇多個(gè)元素:

代碼如下:

$('#contentp').hide();

十五、在class前面使用tag

jQuery中第二快的選擇器就是tag選擇器（如$(‘head')），因?yàn)樗椭苯觼?lái)自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來(lái)修飾class(并且不要忘了就近的ID)

代碼如下:

varreceiveNewsletter = $('#nslForm input.on');

jQuery中class選擇器是最慢的，因?yàn)樵贗E瀏覽器下它會(huì)遍歷所有的DOM節(jié)點(diǎn)。盡量避免使用class選擇器。也不要用tag來(lái)修飾ID。下面的例子會(huì)遍歷所有的div元素來(lái)查找id為'content'的那個(gè)節(jié)點(diǎn)：

代碼如下:

varcontent = $('div#content'); // 非常慢，不要使用

用ID來(lái)修飾ID也是畫蛇添足：

代碼如下:

vartraffic_light = $('#content #traffic_light'); // 非常慢，不要使用

十六、使用子查詢

將父對(duì)象緩存起來(lái)以備將來(lái)的使用

代碼如下:

varheader = $('#header');

var menu = header.find('.menu');

// 或者

var menu = $('.menu', header);

十七、 優(yōu)化選擇器以適用Sizzle的“從右至左”模型

自版本1.3之后，jQuery采用了Sizzle庫(kù)，與之前的版本在選擇器引擎上的表現(xiàn)形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇范圍較寬泛些：

代碼如下:

varlinkContacts = $('.contact-links div.side-wrapper');

而不要使用

代碼如下:

varlinkContacts = $('a.contact-links .side-wrapper');

十八、 采用find()，而不使用上下文查找

.find()函數(shù)的確快些。但是如果一個(gè)頁(yè)面有許多DOM節(jié)點(diǎn)時(shí)，需要來(lái)回查找時(shí)，可能需要更多時(shí)間:

代碼如下:

vardivs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6

var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The besttime

var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

十九、 編寫屬于你的選擇器

如果你經(jīng)常在代碼中使用選擇器，那么擴(kuò)展jQuery的$.expr[':']對(duì)象吧，編寫你自己的選擇器。下面的例子中，我創(chuàng)建了一個(gè)abovethefold選擇器，用來(lái)選擇不可見(jiàn)的元素：

代碼如下:

$.extend($.expr[':'],{

abovethefold: function(el) {

return $(el).offset().top < $(window).scrollTop() +$(window).height();

}

});

var nonVisibleElements = $('div:abovethefold'); // 選擇元素

二十、 緩存jQuery對(duì)象

將你經(jīng)常用的元素緩存起來(lái)：

代碼如下:

var header = $('#header');

var divs = header.find('div');

var forms = header.find('form');

當(dāng)要進(jìn)行DOM插入時(shí)，將所有元素封裝成一個(gè)元素

二十一、直接的DOM操作很慢。盡可能少的去更改HTML結(jié)構(gòu)。

代碼如下:

var menu = '

';

for (var i = 1; i < 100; i++) {

menu += '

' + i + '

';

}

menu += '';

$('#header').prepend(menu);

// 千萬(wàn)不要這樣做：

$('#header').prepend('

');

for (var i = 1; i < 100; i++) {

$('#menu').append('

' + i + '

');

}

二十二、 盡管jQuery不會(huì)拋出異常，但開(kāi)發(fā)者也應(yīng)該檢查對(duì)象

盡管jQuery不會(huì)拋出大量的異常給用戶，但是開(kāi)發(fā)者也不要依賴于此。jQuery通常會(huì)執(zhí)行了一大堆沒(méi)用的函數(shù)之后才確定一個(gè)對(duì)象是否存在。所以在對(duì)一個(gè)作一系列引用之前，應(yīng)先檢查一下這個(gè)對(duì)象存不存在。

二十三. 使用直接函數(shù)，而不要使用與與之等同的函數(shù)

為了獲得更好的性能，你應(yīng)該使用直接函數(shù)如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因?yàn)楹竺娴膸讉€(gè)將會(huì)調(diào)用$.ajax()。

二十四、緩存jQuery結(jié)果，以備后來(lái)使用

你經(jīng)常會(huì)獲得一個(gè)javasript應(yīng)用對(duì)象——你可以用App.來(lái)保存你經(jīng)常選擇的對(duì)象，以備將來(lái)使用：

代碼如下:

App.hiddenDivs = $('div.hidden');

// 之后在你的應(yīng)用中調(diào)用：

App.hiddenDivs.find('span');

二十五、采用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)狀態(tài)

不要忘了采用.data()函數(shù)來(lái)存儲(chǔ)信息：

代碼如下:

$('#head').data('name', 'value');

// 之后在你的應(yīng)用中調(diào)用:

$('#head').data('name');

二十六、 使用jQuery utility函數(shù)

不要忘了簡(jiǎn)單實(shí)用的jQuery的utility函數(shù)。我最喜歡的是$.isFunction(), $isArray()和$.each()。

二十七、為HTML塊添加“JS”的class

當(dāng)jQuery載入之后，首先給HTML添加一個(gè)叫”JS”的class

代碼如下:

$('HTML').addClass('JS');

只有當(dāng)用戶啟用JavaScript的時(shí)候，你才能添加CSS樣式。例如：

代碼如下:

/* 在css中 */

.JS #myDiv{display:none;}

所以當(dāng)JavaScript啟用的時(shí)候，你可以將整個(gè)HTML內(nèi)容隱藏起來(lái)，用jQuery來(lái)實(shí)現(xiàn)你想實(shí)現(xiàn)的（譬如：收起某些面板或當(dāng)用戶點(diǎn)擊它們時(shí)展開(kāi)）。而當(dāng)Javascript沒(méi)有啟用的時(shí)候，瀏覽器呈現(xiàn)所有的內(nèi)容，搜索引擎爬蟲也會(huì)勾去所有內(nèi)容。我將來(lái)會(huì)更多的使用這個(gè)技巧。

二十八、推遲到$(window).load

有時(shí)候采用$(window).load()比$(document).ready()更快，因?yàn)楹笳卟坏人械腄OM元素都下載完之前執(zhí)行。你應(yīng)該在使用它之前測(cè)試它。

二十九、使用Event Delegation

當(dāng)你在一個(gè)容器中有許多節(jié)點(diǎn)，你想對(duì)所有的節(jié)點(diǎn)都綁定一個(gè)事件，delegation很適合這樣的應(yīng)用場(chǎng)景。使用 Delegation，我們僅需要在父級(jí)綁定事件，然后查看哪個(gè)子節(jié)點(diǎn)(目標(biāo)節(jié)點(diǎn))觸發(fā)了事件。當(dāng)你有一個(gè)很多數(shù)據(jù)的table的時(shí)候，你想對(duì)td節(jié)點(diǎn)設(shè)置事件，這就變得很方便。先獲得table，然后為所有的td節(jié)點(diǎn)設(shè)置delegation事件：

代碼如下:

$("table").delegate("td","hover", function(){

$(this).toggleClass("hover");

});

三十、使用ready事件的簡(jiǎn)寫

如果你想壓縮js插件，節(jié)約每一個(gè)字節(jié)，你應(yīng)該避免使用$(document).onready()

代碼如下:

// 也不要使用

$(document).ready(function (){

// 代碼

});

// 你可以如此簡(jiǎn)寫：

$(function (){

// 代碼

});

三十一、jQuery單元測(cè)試

測(cè)試JavaSript代碼最好的方法就是人來(lái)測(cè)試。但你可以使用一些自動(dòng)化的工具如Selenium，Funcunit，QUit，QMock來(lái)測(cè)試你的代碼（尤其是插件）。我想在另外一個(gè)專題來(lái)討論這個(gè)話題因?yàn)閷?shí)在有太多要說(shuō)的了。

三十二、標(biāo)準(zhǔn)化你的jQuery代碼

經(jīng)常標(biāo)準(zhǔn)化你的代碼，看看哪個(gè)查詢比較慢，然后替換它。你可以用Firebug控制臺(tái)。你也可以使用jQuery的快捷函數(shù)來(lái)使測(cè)試變得更容易些：

代碼如下:

// 在Firebug控制臺(tái)記錄數(shù)據(jù)的快捷方式

$.l($('div'));

// 獲取UNIX時(shí)間戳

$.time();

// 在Firebug記錄執(zhí)行代碼時(shí)間

$.lt();

$('div');

$.lt();

// 將代碼塊放在一個(gè)for循環(huán)中測(cè)試執(zhí)行時(shí)間

$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug3.6

三十三、使用HMTL5

新的HTML5標(biāo)準(zhǔn)帶來(lái)的是更輕巧的DOM結(jié)構(gòu)。更輕巧的結(jié)構(gòu)意味著使用jQuery需要更少的遍歷，以及更優(yōu)良的載入性能。所以如果可能的話請(qǐng)使用HTML5。

三十四、如果給15個(gè)以上的元素加樣式時(shí)，直接給DOM元素添加style標(biāo)簽

要給少數(shù)的元素加樣式，最好的方法就是使用jQuey的css()函數(shù)。然而更15個(gè)以上的較多的元素添加樣式時(shí)，直接給DOM添加style 標(biāo)簽更有效些。這個(gè)方法可以避免在代碼中使用硬編碼(hard code)。

代碼如下:

$(' div.class { color: red; }')

.appendTo('head');

三十五、避免載入多余的代碼

將Javascript代碼放在不同的文件中是個(gè)好的方法，僅在需要的時(shí)候載入它們。這樣你不會(huì)載入不必要的代碼和選擇器。也便于管理代碼。

三十六、壓縮成一個(gè)主JS文件，將下載次數(shù)保持到最少

當(dāng)你已經(jīng)確定了哪些文件是應(yīng)該被載入的，那么將它們打包成一個(gè)文件。用一些開(kāi)源的工具可以自動(dòng)幫你完成，如使用Minify(和你的后端代碼集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。

三十七、需要的時(shí)候使用原生的Javasript

使用jQuery是個(gè)很棒的事情，但是不要忘了它也是Javascript的一個(gè)框架。所以你可以在jQuery代碼有必要的時(shí)候也使用原生的Javascript函數(shù)，這樣能獲得更好的性能。

三十八、緩慢載入內(nèi)容不僅能提高載入速度，也能提高SEO優(yōu)化 （Lazy loadcontent for speed and SEO benefits）

使用Ajax來(lái)載入你的網(wǎng)站吧，這樣可以節(jié)約服務(wù)器端載入時(shí)間。你可以從一個(gè)常見(jiàn)的側(cè)邊欄widget開(kāi)始。

歡迎關(guān)注我的公眾號(hào)（同步更新文章）：DoNet技術(shù)分享平臺(tái)

閱讀原文

總結(jié)

以上是生活随笔為你收集整理的【必备】jQuery性能优化的38个建议的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。