jQuery性能優化指南

這是一篇關於jQuery性能優化的文章，下面我們就與大家一起分享。

我一直在尋找有關jQuery性能優化方面的小竅門，能讓我那臃腫的動態網頁應用變得輕便些。找了很多文章後，我決定將最好最常用的一些優化性能的建議列出來。我也做了一個jQuery性能優化的簡明樣式表，你可以打印出來或者設為桌面背景。

一、選擇器性能優化建議

1. 總是從#id選擇器來繼承

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

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

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

1 $('#content

p').hide();

2. 在class前面使用tag

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

1 var

receiveNewsletter = $('#nslForm

input.on');

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

1 var

content = $('div#content');

//

非常慢，不要使用

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

1 var

traffic_light = $('#content

#traffic_light');

//

非常慢，不要使用

3. 使用子查詢

將父對象緩存起來以備將來的使用

var

header = $('#header');

var

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

//

或者

var

menu = $('.menu',

header);

來看個例子

4. 優化選擇器以適用Sizzle的“從右至左”模型

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

var

linkContacts = $('.contact-links

div.side-wrapper');

而不要使用

var

linkContacts = $('a.contact-links

.side-wrapper');

5. 采用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

6. 利用強大的鏈式操作

采用jQuery的鏈式操作比緩存選擇器更有效：

$('li.menu-item').click(function

() {alert('test

click');})

.css('display',

'block')

.css('color',

'red')

fadeTo(2,

0.7);

7. 編寫屬於你的選擇器

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

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

{

abovethefold:

function(el)

{

return

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

}

});

var

nonVisibleElements = $('div:abovethefold');

//

選擇元素

二、優化DOM操作建議

8. 緩存jQuery對象

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

var

header = $('#header');

var

divs = header.find('div');

var

forms = header.find('form');

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

直接的DOM操作很慢。盡可能少的去更改HTML結構。

var

menu = '

id="menu">';

for

(var

i = 1;

i < 100;

i++)

• '

   

  + i +

menu

+= '';

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

//

千萬不要這樣做：

$('#header').prepend('

id="menu">');

for

(var

i = 1;

i < 100;

i++) {

$('#menu').append('

• 
  

   

  + i +');

}

10. 盡管jQuery不會拋出異常，但開發者也應該檢查對象

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

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

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

12. 緩存jQuery結果，以備後來使用

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

App.hiddenDivs

= $('div.hidden');

//

之後在你的應用中調用：

App.hiddenDivs.find('span');

13. 采用jQuery的內部函數data()來存儲狀態

不要忘了采用.data()函數來存儲信息：

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

'value');

//

之後在你的應用中調用:

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

14. 使用jQuery utility函數

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

15. 為HTML塊添加“JS”的class

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

1

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

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

/*

在css中 */

.JS

#myDiv{display:none;}

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

閱讀更多相關內容

三、關於優化事件性能的建議

16. 推遲到$(window).load

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

17. 使用Event Delegation

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

$("table").delegate("td",

"hover",

function(){

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

});

閱讀更多相關內容

18. 使用ready事件的簡寫

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

//

也不要使用

$(document).ready(function

(){

//

代碼

});

//

你可以如此簡寫：

$(function

(){

//

代碼

});

四、測試jQuery

19. jQuery單元測試

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

20. 標准化你的jQuery代碼

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

在Firebug控制台記錄數據的快捷方式

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

//

獲取UNIX時間戳

$.time();

1

//

在Firebug記錄執行代碼時間

$.lt();

$('div');

$.lt();

//

將代碼塊放在