jQuery效能最佳化的38個建議

jQuery效能最佳化的38個建議

 想必大家對於jQuery這個最流行的javascript類庫都不陌生，而且只要是前端開發人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實際使用效率，將介紹一些書寫高品質jQuery代碼的原則，不單單會告訴你如何去書寫，也會告訴你為什麼這樣書寫，希望大家會覺得有所協助

一、注意定義jQuery變數的時候添加var關鍵字

這個不僅僅是jQuery，所有javascript開發過程中，都需要注意，請一定不要定義成如下：

$loading = $('#loading'); //這個是全域定義，不知道哪裡位置倒黴引用了相同的變數名，就會鬱悶至死的

二、請使用一個var來定義變數

如果你使用多個變數的話，請如下方式定義：

 

 

 代碼如下:var page = 0,

   $loading = $('#loading'),

   $body = $('body');

不要給每一個變數都添加一個var關鍵字，除非你有嚴重的強迫症

三、定義jQuery變數是添加$符號

申明或者定義變數的時候，請記住如果你定義的是jQuery的變數，請添加一個$符號到變數前，如下：

代碼如下:var $loading = $('#loading');

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

四、DOM操作請務必記住緩衝（cache）

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

 代碼如下:

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

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

代碼沒有任何問題，你也可以正常運行出結果，但是這裡注意你每次定義並且調用$('#loading')的時候，都實際建立了一個新的變數，如果你需要重用的話，記住一定要定義到一個變數裡，這樣可以有效緩衝變數內容，如下：

 代碼如下:var $loading = $('#loading');

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

這樣效能會更好。

五、使用鏈式操作

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

代碼如下:

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

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

 

六、精簡jQuery代碼

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

 代碼如下:

// ！！反面人物

$button.click(function(){

    $target.css('width','50%');

    $target.css('border','1px solid #202020');

    $target.css('color','#fff');

});

應該這樣書寫：

 代碼如下:$button.click(function(){

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

});

七、避免使用全域類型的選取器

請勿如下方式書寫：$('.something > *');

這樣書寫更好：$('.something').children();

八、不要疊加多個ID

請勿如下書寫：$('#something #children');

這樣就夠了：$('#children');

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

請勿如下書寫：

 代碼如下:

if(!$something) {

    $something = $('#something ');

}

這樣書寫效能更好：

代碼如下:$something= $something|| $('#something');

十、盡量使用更少的代碼

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

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

十一、盡量使用.on方法

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

十二、盡量使用最新版本的jQuery

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

十三、盡量使用原生的Javascript

如果使用原生的Javascript也可以實現jQuery提供的功能的話，推薦使用原生的javascript來實現。

十四、總是從#id選取器來繼承

這是jQuery選取器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。

 代碼如下:$('#content').hide();

或者從ID選取器繼承來選擇多個元素:

 代碼如下:$('#content p').hide();

十五、在class前面使用tag

jQuery中第二快的選取器就是tag選取器（如$(‘head')），因為它和直接來自於原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(並且不要忘了就近的ID)

 代碼如下:var receiveNewsletter = $('#nslForm input.on');

jQuery中class選取器是最慢的，因為在IE瀏覽器下它會遍曆所有的DOM節點。盡量避免使用class選取器。也不要用tag來修飾ID。下面的例子會遍曆所有的div元素來尋找id為'content'的那個節點：

 代碼如下:var content = $('div#content'); // 非常慢，不要使用

用ID來修飾ID也是畫蛇添足：

 代碼如下:var traffic_light = $('#content #traffic_light'); // 非常慢，不要使用

十六、使用子查詢

將父物件緩衝起來以備將來的使用

 

 代碼如下:var header = $('#header');

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

// 或者

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

十七、 最佳化選取器以適用Sizzle的“從右至左”模型

自版本1.3之後，jQuery採用了Sizzle庫，與之前的版本在選取器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選取器具體些，而左邊的選取器選擇範圍較寬泛些：

複製代碼 代碼如下:var linkContacts = $('.contact-links div.side-wrapper');

而不要使用

 代碼如下:var linkContacts = $('a.contact-links .side-wrapper');

十八、 採用find()，而不使用上下文尋找

.find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回尋找時，可能需要更多時間:

 代碼如下:var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6

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

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

十九、 編寫屬於你的選取器

如果你經常在代碼中使用選取器，那麼擴充jQuery的$.expr[':']對象吧，編寫你自己的選取器。下面的例子中，我建立了一個abovethefold選取器，用來選擇不可見的元素：

 代碼如下:$.extend($.expr[':'], {

 abovethefold: function(el) {

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

 }

});

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

二十、 緩衝jQuery對象

將你經常用的元素緩衝起來：

代碼如下:

var header = $('#header');

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

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

 

當要進行DOM插入時，將所有元素封裝成一個元素

 

二十一、直接的DOM操作很慢。儘可能少的去更改HTML結構。

 

代碼如下:

var menu = '<ul id="menu">';

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

menu += '<li>' + i + '</li>';

}

menu += '</ul>';

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

// 千萬不要這樣做：

$('#header').prepend('<ul id="menu"></ul>');

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

$('#menu').append('<li>' + i + '</li>');

}

二十二、 儘管jQuery不會拋出異常，但開發人員也應該檢查對象

 

儘管jQuery不會拋出大量的異常給使用者，但是開發人員也不要依賴於此。jQuery通常會執行了一大堆沒用的函數之後才確定一個對象是否存在。所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。

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

為了獲得更好的效能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為後面的幾個將會調用$.ajax()。

二十四、緩衝jQuery結果，以備後來使用

你經常會獲得一個javasript應用對象——你可以用App.來儲存你經常選擇的對象，以備將來使用：

 

 代碼如下:

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

// 之後在你的應用中調用：

App.hiddenDivs.find('span');

二十五、採用jQuery的內建函式data()來儲存狀態

不要忘了採用.data()函數來儲存資訊：

 代碼如下:

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

// 之後在你的應用中調用:

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

二十六、 使用jQuery utility函數

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

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

當jQuery載入之後，首先給HTML添加一個叫”JS”的class

 代碼如下:$('HTML').addClass('JS');

只有當使用者啟用JavaScript的時候，你才能添加CSS樣式。例如：

 代碼如下:/* 在css中 */

.JS #myDiv{display:none;}

所以當JavaScript啟用的時候，你可以將整個HTML內容隱藏起來，用jQuery來實現你想實現的（譬如：收合某些面板或當使用者點擊它們時展開）。而當Javascript沒有啟用的時候，瀏覽器呈現所有的內容，搜尋引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。

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

有時候採用$(window).load()比$(document).ready()更快，因為後者不等所有的DOM元素都下載完之前執行。你應該在使用它之前測試它。

二十九、使用Event Delegation

當你在一個容器中有許多節點，你想對所有的節點都綁定一個事件，delegation很適合這樣的應用情境。使用Delegation，我們僅需要在父級綁定事件，然後查看哪個子節點(目標節點)觸發了事件。當你有一個很多資料的table的時候，你想對td節點設定事件，這就變得很方便。先獲得table，然後為所有的td節點設定delegation事件：

 代碼如下:$("table").delegate("td", "hover", function(){

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

});

三十、使用ready事件的簡寫

如果你想壓縮js外掛程式，節約每一個位元組，你應該避免使用$(document).onready()

代碼如下:// 也不要使用

$(document).ready(function (){

// 代碼

});

// 你可以如此簡寫：

$(function (){

// 代碼

});

三十一、jQuery單元測試

測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如Selenium，Funcunit，QUit，QMock來測試你的代碼（尤其是外掛程式）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。

三十二、 標準化你的jQuery代碼

經常標準化你的代碼，看看哪個查詢比較慢，然後替換它。你可以用Firebug控制台。你也可以使用jQuery的快捷函數來使測試變得更容易些：

 代碼如下:

// 在Firebug控制台記錄資料的捷徑

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

 

// 擷取UNIX時間戳記

$.time();

 

// 在Firebug記錄執行代碼時間

$.lt();

$('div');

$.lt();

 

// 將代碼塊放在一個for迴圈中測試執行時間

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

 

三十三、使用HMTL5

新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍曆，以及更優良的載入效能。所以如果可能的話請使用HTML5。

三十四、如果給15個以上的元素加樣式時，直接給DOM元素添加style標籤

要給少數的元素加樣式，最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標籤更有效些。這個方法可以避免在代碼中使用寫入程式碼(hard code)。

複製代碼 代碼如下:

$('<style type="text/css"> div.class { color: red; } </style>')

.appendTo('head');

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

將Javascript代碼放在不同的檔案中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選取器。也便於管理代碼。

三十六、壓縮成一個主JS檔案，將下載次數保持到最少

當你已經確定了哪些檔案是應該被載入的，那麼將它們打包成一個檔案。用一些開源的工具可以自動幫你完成，如使用Minify(和你的後端代碼整合)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等線上工具可以為你壓縮檔。我最喜歡的是JSCompressor。

三十七、需要的時候使用原生的Javasript

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

三十八、 緩慢載入內容不僅能提高負載入速度，也能提高SEO最佳化 （Lazy load content for speed and SEO benefits）

使用Ajax來載入你的網站吧，這樣可以節約伺服器端載入時間。你可以從一個常見的側邊欄widget開始。