jQuery性能優(yōu)化28條建議你值得借鑒
更新時間：2013年02月16日 09:30:24 作者：
一直在尋找有關jQuery性能優(yōu)化方面的小竅門，能讓我那臃腫的動態(tài)網(wǎng)頁應用變得輕便些，我決定將最好最常用的一些優(yōu)化性能的建議列出來,感興趣的你可不要錯過了哈，或許本文所提供的建議對你有所幫助
jQuery性能優(yōu)化28條建議 一直在尋找有關jQuery性能優(yōu)化方面的小竅門，能讓我那臃腫的動態(tài)網(wǎng)頁應用變得輕便些。找了很多文章后，我決定將最好最常用的一些優(yōu)化性能的建議列出來。我也做了一個jQuery性能優(yōu)化的簡明樣式表，你可以打印出來或者設為桌面背景。
一、選擇器性能優(yōu)化建議
1. 總是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。
$('#content').hide();
或者從ID選擇器繼承來選擇多個元素:
$('#content p').hide();
2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head')），因為它和直接來自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID)
var receiveNewsletter = $('#nslForm input.on');
jQuery中class選擇器是最慢的，因為在IE瀏覽器下它會遍歷所有的DOM節(jié)點。盡量避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷所有的div元素來查找id為'content'的那個節(jié)點：
var content = $('div#content'); // 非常慢，不要使用
用ID來修飾ID也是畫蛇添足：
var traffic_light = $('#content #traffic_light'); // 非常慢，不要使用
3. 使用子查詢
將父對象緩存起來以備將來的使用
var header = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);
4. 優(yōu)化選擇器以適用Sizzle的“從右至左”模型
自版本1.3之后，jQuery采用了Sizzle庫，與之前的版本在選擇器引擎上的表現(xiàn)形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇范圍較寬泛些：
var linkContacts = $('.contact-links div.side-wrapper');
而不要使用
var linkContacts = $('a.contact-links .side-wrapper');
5. 采用find()，而不使用上下文查找
.find()函數(shù)的確快些。但是如果一個頁面有許多DOM節(jié)點時，需要來回查找時，可能需要更多時間:
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. 編寫屬于你的選擇器
如果你經(jīng)常在代碼中使用選擇器，那么擴展jQuery的$.expr[':']對象吧，編寫你自己的選擇器。下面的例子中，我創(chuàng)建了一個abovethefold選擇器，用來選擇不可見的元素：
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrollTop() + $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 選擇元素
二、優(yōu)化DOM操作建議
8. 緩存jQuery對象
將你經(jīng)常用的元素緩存起來：
var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');
9. 當要進行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>');
}
10. 盡管jQuery不會拋出異常，但開發(fā)者也應該檢查對象
盡管jQuery不會拋出大量的異常給用戶，但是開發(fā)者也不要依賴于此。jQuery通常會執(zhí)行了一大堆沒用的函數(shù)之后才確定一個對象是否存在。所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。
11. 使用直接函數(shù)，而不要使用與與之等同的函數(shù)
為了獲得更好的性能，你應該使用直接函數(shù)如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為后面的幾個將會調用$.ajax()。
12. 緩存jQuery結果，以備后來使用
你經(jīng)常會獲得一個javasript應用對象——你可以用App.來保存你經(jīng)常選擇的對象，以備將來使用：
App.hiddenDivs = $('div.hidden');
// 之后在你的應用中調用：
App.hiddenDivs.find('span');
13. 采用jQuery的內部函數(shù)data()來存儲狀態(tài)
不要忘了采用.data()函數(shù)來存儲信息：
$('#head').data('name', 'value');
// 之后在你的應用中調用:
$('#head').data('name');
14. 使用jQuery utility函數(shù)
不要忘了簡單實用的jQuery的utility函數(shù)。我最喜歡的是$.isFunction(), $isArray()和$.each()。
15. 為HTML塊添加“JS”的class
當jQuery載入之后，首先給HTML添加一個叫”JS”的class
$('HTML').addClass('JS');
只有當用戶啟用JavaScript的時候，你才能添加CSS樣式。例如：
/* 在css中 */
.JS #myDiv{display:none;}
所以當JavaScript啟用的時候，你可以將整個HTML內容隱藏起來，用jQuery來實現(xiàn)你想實現(xiàn)的（譬如：收起某些面板或當用戶點擊它們時展開）。而當Javascript沒有啟用的時候，瀏覽器呈現(xiàn)所有的內容，搜索引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。
三、關于優(yōu)化事件性能的建議
16. 推遲到$(window).load
有時候采用$(window).load()比$(document).ready()更快，因為后者不等所有的DOM元素都下載完之前執(zhí)行。你應該在使用它之前測試它。
17. 使用Event Delegation
當你在一個容器中有許多節(jié)點，你想對所有的節(jié)點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，我們僅需要在父級綁定事件，然后查看哪個子節(jié)點(目標節(jié)點)觸發(fā)了事件。當你有一個很多數(shù)據(jù)的table的時候，你想對td節(jié)點設置事件，這就變得很方便。先獲得table，然后為所有的td節(jié)點設置delegation事件：
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
18. 使用ready事件的簡寫
如果你想壓縮js插件，節(jié)約每一個字節(jié)，你應該避免使用$(document).onready()
// 也不要使用
$(document).ready(function (){
// 代碼
});
// 你可以如此簡寫：
$(function (){
// 代碼
});
四、測試jQuery
19. jQuery單元測試
測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如Selenium，F(xiàn)uncunit，QUit，QMock來測試你的代碼（尤其是插件）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。
20. 標準化你的jQuery代碼
經(jīng)常標準化你的代碼，看看哪個查詢比較慢，然后替換它。你可以用Firebug控制臺。你也可以使用jQuery的快捷函數(shù)來使測試變得更容易些：
// 在Firebug控制臺記錄數(shù)據(jù)的快捷方式
$.l($('div'));
// 獲取UNIX時間戳
$.time();
// 在Firebug記錄執(zhí)行代碼時間
$.lt();
$('div');
$.lt();
// 將代碼塊放在一個for循環(huán)中測試執(zhí)行時間
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6
五、其他常用jQuery性能優(yōu)化建議
21. 使用最新版本的jQuery
最新的版本往往是最好的。更換了版本后，不要忘記測試你的代碼。有時候也不是完全向后兼容的。
22. 使用HMTL5
新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷，以及更優(yōu)良的載入性能。所以如果可能的話請使用HTML5。
23. 如果給15個以上的元素加樣式時，直接給DOM元素添加style標簽
要給少數(shù)的元素加樣式，最好的方法就是使用jQuey的css()函數(shù)。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標簽更有效些。這個方法可以避免在代碼中使用硬編碼(hard code)。
$('<style type="text/css"> div.class { color: red; } </style>')
.appendTo('head');
24. 避免載入多余的代碼
將Javascript代碼放在不同的文件中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便于管理代碼。
25. 壓縮成一個主JS文件，將下載次數(shù)保持到最少
當你已經(jīng)確定了哪些文件是應該被載入的，那么將它們打包成一個文件。用一些開源的工具可以自動幫你完成，如使用Minify(和你的后端代碼集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。
26. 需要的時候使用原生的Javasript
使用jQuery是個很棒的事情，但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery代碼有必要的時候也使用原生的Javascript函數(shù)，這樣能獲得更好的性能。
27. 從Google載入jQuery框架
當你的應用正式上線的時候，請從Google CDN載入jQuery，因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求，而用戶如果瀏覽其他網(wǎng)站，而它也使用Google CDN的jQuery時，瀏覽器就會立即從緩存中調出jQuery代碼。
// 鏈接特定版本的壓縮代碼
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
28. 緩慢載入內容不僅能提高載入速度，也能提高SEO優(yōu)化 （Lazy load content for speed and SEO benefits）
使用Ajax來載入你的網(wǎng)站吧，這樣可以節(jié)約服務器端載入時間。你可以從一個常見的側邊欄widget開始。
一、選擇器性能優(yōu)化建議
1. 總是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。
復制代碼 代碼如下:
$('#content').hide();
或者從ID選擇器繼承來選擇多個元素:
復制代碼 代碼如下:
$('#content p').hide();
2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head')），因為它和直接來自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID)
復制代碼 代碼如下:
var receiveNewsletter = $('#nslForm input.on');
jQuery中class選擇器是最慢的，因為在IE瀏覽器下它會遍歷所有的DOM節(jié)點。盡量避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷所有的div元素來查找id為'content'的那個節(jié)點：
復制代碼 代碼如下:
var content = $('div#content'); // 非常慢，不要使用
用ID來修飾ID也是畫蛇添足：
復制代碼 代碼如下:
var traffic_light = $('#content #traffic_light'); // 非常慢，不要使用
3. 使用子查詢
將父對象緩存起來以備將來的使用
復制代碼 代碼如下:
var header = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);
4. 優(yōu)化選擇器以適用Sizzle的“從右至左”模型
自版本1.3之后，jQuery采用了Sizzle庫，與之前的版本在選擇器引擎上的表現(xiàn)形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇范圍較寬泛些：
復制代碼 代碼如下:
var linkContacts = $('.contact-links div.side-wrapper');
而不要使用
復制代碼 代碼如下:
var linkContacts = $('a.contact-links .side-wrapper');
5. 采用find()，而不使用上下文查找
.find()函數(shù)的確快些。但是如果一個頁面有許多DOM節(jié)點時，需要來回查找時，可能需要更多時間:
復制代碼 代碼如下:
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. 編寫屬于你的選擇器
如果你經(jīng)常在代碼中使用選擇器，那么擴展jQuery的$.expr[':']對象吧，編寫你自己的選擇器。下面的例子中，我創(chuàng)建了一個abovethefold選擇器，用來選擇不可見的元素：
復制代碼 代碼如下:
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrollTop() + $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 選擇元素
二、優(yōu)化DOM操作建議
8. 緩存jQuery對象
將你經(jīng)常用的元素緩存起來：
復制代碼 代碼如下:
var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');
9. 當要進行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>');
}
10. 盡管jQuery不會拋出異常，但開發(fā)者也應該檢查對象
盡管jQuery不會拋出大量的異常給用戶，但是開發(fā)者也不要依賴于此。jQuery通常會執(zhí)行了一大堆沒用的函數(shù)之后才確定一個對象是否存在。所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。
11. 使用直接函數(shù)，而不要使用與與之等同的函數(shù)
為了獲得更好的性能，你應該使用直接函數(shù)如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為后面的幾個將會調用$.ajax()。
12. 緩存jQuery結果，以備后來使用
你經(jīng)常會獲得一個javasript應用對象——你可以用App.來保存你經(jīng)常選擇的對象，以備將來使用：
復制代碼 代碼如下:
App.hiddenDivs = $('div.hidden');
// 之后在你的應用中調用：
App.hiddenDivs.find('span');
13. 采用jQuery的內部函數(shù)data()來存儲狀態(tài)
不要忘了采用.data()函數(shù)來存儲信息：
復制代碼 代碼如下:
$('#head').data('name', 'value');
// 之后在你的應用中調用:
$('#head').data('name');
14. 使用jQuery utility函數(shù)
不要忘了簡單實用的jQuery的utility函數(shù)。我最喜歡的是$.isFunction(), $isArray()和$.each()。
15. 為HTML塊添加“JS”的class
當jQuery載入之后，首先給HTML添加一個叫”JS”的class
復制代碼 代碼如下:
$('HTML').addClass('JS');
只有當用戶啟用JavaScript的時候，你才能添加CSS樣式。例如：
復制代碼 代碼如下:
/* 在css中 */
.JS #myDiv{display:none;}
所以當JavaScript啟用的時候，你可以將整個HTML內容隱藏起來，用jQuery來實現(xiàn)你想實現(xiàn)的（譬如：收起某些面板或當用戶點擊它們時展開）。而當Javascript沒有啟用的時候，瀏覽器呈現(xiàn)所有的內容，搜索引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。
三、關于優(yōu)化事件性能的建議
16. 推遲到$(window).load
有時候采用$(window).load()比$(document).ready()更快，因為后者不等所有的DOM元素都下載完之前執(zhí)行。你應該在使用它之前測試它。
17. 使用Event Delegation
當你在一個容器中有許多節(jié)點，你想對所有的節(jié)點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，我們僅需要在父級綁定事件，然后查看哪個子節(jié)點(目標節(jié)點)觸發(fā)了事件。當你有一個很多數(shù)據(jù)的table的時候，你想對td節(jié)點設置事件，這就變得很方便。先獲得table，然后為所有的td節(jié)點設置delegation事件：
復制代碼 代碼如下:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
18. 使用ready事件的簡寫
如果你想壓縮js插件，節(jié)約每一個字節(jié)，你應該避免使用$(document).onready()
復制代碼 代碼如下:
// 也不要使用
$(document).ready(function (){
// 代碼
});
// 你可以如此簡寫：
$(function (){
// 代碼
});
四、測試jQuery
19. jQuery單元測試
測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如Selenium，F(xiàn)uncunit，QUit，QMock來測試你的代碼（尤其是插件）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。
20. 標準化你的jQuery代碼
經(jīng)常標準化你的代碼，看看哪個查詢比較慢，然后替換它。你可以用Firebug控制臺。你也可以使用jQuery的快捷函數(shù)來使測試變得更容易些：
復制代碼 代碼如下:
// 在Firebug控制臺記錄數(shù)據(jù)的快捷方式
$.l($('div'));
復制代碼 代碼如下:
// 獲取UNIX時間戳
$.time();
復制代碼 代碼如下:
// 在Firebug記錄執(zhí)行代碼時間
$.lt();
$('div');
$.lt();
復制代碼 代碼如下:
// 將代碼塊放在一個for循環(huán)中測試執(zhí)行時間
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6
五、其他常用jQuery性能優(yōu)化建議
21. 使用最新版本的jQuery
最新的版本往往是最好的。更換了版本后，不要忘記測試你的代碼。有時候也不是完全向后兼容的。
22. 使用HMTL5
新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷，以及更優(yōu)良的載入性能。所以如果可能的話請使用HTML5。
23. 如果給15個以上的元素加樣式時，直接給DOM元素添加style標簽
要給少數(shù)的元素加樣式，最好的方法就是使用jQuey的css()函數(shù)。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標簽更有效些。這個方法可以避免在代碼中使用硬編碼(hard code)。
復制代碼 代碼如下:
$('<style type="text/css"> div.class { color: red; } </style>')
.appendTo('head');
24. 避免載入多余的代碼
將Javascript代碼放在不同的文件中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便于管理代碼。
25. 壓縮成一個主JS文件，將下載次數(shù)保持到最少
當你已經(jīng)確定了哪些文件是應該被載入的，那么將它們打包成一個文件。用一些開源的工具可以自動幫你完成，如使用Minify(和你的后端代碼集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。
26. 需要的時候使用原生的Javasript
使用jQuery是個很棒的事情，但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery代碼有必要的時候也使用原生的Javascript函數(shù)，這樣能獲得更好的性能。
27. 從Google載入jQuery框架
當你的應用正式上線的時候，請從Google CDN載入jQuery，因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求，而用戶如果瀏覽其他網(wǎng)站，而它也使用Google CDN的jQuery時，瀏覽器就會立即從緩存中調出jQuery代碼。
復制代碼 代碼如下:
// 鏈接特定版本的壓縮代碼
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
28. 緩慢載入內容不僅能提高載入速度，也能提高SEO優(yōu)化 （Lazy load content for speed and SEO benefits）
使用Ajax來載入你的網(wǎng)站吧，這樣可以節(jié)約服務器端載入時間。你可以從一個常見的側邊欄widget開始。
相關文章
這篇文章主要介紹了jQuery調用ajax請求的常見方法,實例匯總了三種常見的jQuery調用Ajax的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js 實現(xiàn)一些跨瀏覽器的事件方法詳解及實例的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery插件制作之全局函數(shù)用法,實例分析了jQuery中全局函數(shù)的相關使用技巧,需要的朋友可以參考下2015-06-06
用慣jquery的用戶可能習慣于連寫行為，也就是說在調用一個方法之后，緊跟著調用另一個方法，如此連寫不斷，形成一個珍珠鏈，而且編寫靈活，方便2012-08-08
詳解jquery插件jquery.viewport.js學習使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學習使用方法，具有一定的參考價值，有興趣的可以了解一下2017-09-09
進度條插件在GitHub上多種多樣數(shù)量繁多,這總結出頁面進度條插件的實現(xiàn)要點,來教大家自己動手制作基于jQuery的Web頁面加載進度條插件2016-06-06
這篇文章與大家分享13個超級有用的 jQuery 內容滾動插件和教程。您可能經(jīng)常能看到一些網(wǎng)站上特色區(qū)域的內容以滾動方式變化，這是一種在有限的網(wǎng)頁空間內展示更多內容的良好方式，而且能吸引用戶注意力。2011-07-07
Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因為項目中樹形結構使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達到了，但是風格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺供大家參考2017-08-08
實現(xiàn)easyui的datagrid導出為excel的示例代碼
下面小編就為大家?guī)硪黄獙崿F(xiàn)easyui的datagrid導出為excel的示例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jquery中獲得$.ajax()事件返回的值并添加事件的方法
如果想獲得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想獲得xx的值，要在script中，使用全局變量。利用全局變量引出xx的值。2010-04-04