jQuery:jQuery性能優化28條建議

時間 2019-11-09

原文原文鏈接

http://www.xue5.com/WebDev/jQuery/671700.htmljavascript

直在尋找有關jQuery性能優化方面的小竅門，能讓我那臃腫的動態網頁應用變得輕便些。找了不少文章後，我決定將最好最經常使用的一些優化性能的建議列出來。我也作了一個jQuery性能優化的簡明樣式表，你能夠打印出來或者設爲桌面背景。
1、選擇器性能優化建議

1. 老是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。css

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

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

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

2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head’)），由於它和直接來自於原生的Javascript方法getElementByTagName()。因此最好老是用tag來修飾class(而且不要忘了就近的ID)java

1	var receiveNewsletter = $('#nslForm input.on');

jQuery中class選擇器是最慢的，由於在IE瀏覽器下它會遍歷全部的DOM節點。儘可能避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷全部的div元素來查找id爲’content’的那個節點：jquery

1	var content = $('div#content'); // 很是慢，不要使用

用ID來修飾ID也是多此一舉：git

1	var traffic_light = $('#content #traffic_light'); // 很是慢，不要使用

3. 使用子查詢
將父對象緩存起來以備未來的使用github

1
2
3
4

var header = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);

來看個例子

4. 優化選擇器以適用Sizzle的「從右至左」模型
自版本1.3以後，jQuery採用了Sizzle庫，與以前的版本在選擇器引擎上的表現形式有很大的不一樣。它用「從左至右」的模型代替了「從右至左」的模型。確保最右的選擇器具體些，而左邊的選擇器選擇範圍較寬泛些：ajax

1	var linkContacts = $('.contact-links div.side-wrapper');

而不要使用後端

1	var linkContacts = $('a.contact-links .side-wrapper');

5. 採用find()，而不使用上下文查找
.find()函數的確快些。可是若是一個頁面有許多DOM節點時，須要來回查找時，可能須要更多時間:api

1
2
3

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的鏈式操做比緩存選擇器更有效：

1
2
3
4

$('li.menu-item').click(function () {alert('test click');})
                  .css('display', 'block')
                  .css('color', 'red')
                  fadeTo(2, 0.7);

7. 編寫屬於你的選擇器
若是你常常在代碼中使用選擇器，那麼擴展jQuery的$.expr[':']對象吧，編寫你本身的選擇器。下面的例子中，我建立了一個abovethefold選擇器，用來選擇不可見的元素：

1
2
3
4
5
6

$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrollTop() + $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 選擇元素

2、優化DOM操做建議

8. 緩存jQuery對象
將你常常用的元素緩存起來：

1
2
3

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

9. 當要進行DOM插入時，將全部元素封裝成一個元素
直接的DOM操做很慢。儘量少的去更改HTML結構。

1
2
3
4
5
6
7
8
9
10
11

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不會拋出異常，但開發者也應該檢查對象
儘管jQuery不會拋出大量的異常給用戶，可是開發者也不要依賴於此。jQuery一般會執行了一大堆沒用的函數以後才肯定一個對象是否存在。因此在對一個做一系列引用以前，應先檢查一下這個對象存不存在。

11. 使用直接函數，而不要使用與與之等同的函數
爲了得到更好的性能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，由於後面的幾個將會調用$.ajax()。

12. 緩存jQuery結果，以備後來使用
你常常會得到一個javasript應用對象——你能夠用App.來保存你常常選擇的對象，以備未來使用：

1
2
3

App.hiddenDivs = $('div.hidden');
// 以後在你的應用中調用：
App.hiddenDivs.find('span');

13. 採用jQuery的內部函數data()來存儲狀態
不要忘了採用.data()函數來存儲信息：

1
2
3

$('#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樣式。例如：

1 2	/* 在css中 */ .JS #myDiv{display:none;}

因此當JavaScript啓用的時候，你能夠將整個HTML內容隱藏起來，用jQuery來實現你想實現的（譬如：收起某些面板或當用戶點擊它們時展開）。而當Javascript沒有啓用的時候，瀏覽器呈現全部的內容，搜索引擎爬蟲也會勾去全部內容。我未來會更多的使用這個技巧。

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

16. 推遲到$(window).load
有時候採用$(window).load()比$(document).ready()更快，由於後者不等全部的DOM元素都下載完以前執行。你應該在使用它以前測試它。

17. 使用Event Delegation
當你在一個容器中有許多節點，你想對全部的節點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，咱們僅須要在父級綁定事件，而後查看哪一個子節點(目標節點)觸發了事件。當你有一個不少數據的table的時候，你想對td節點設置事件，這就變得很方便。先得到table，而後爲全部的td節點設置delegation事件：

1
2
3

$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

18. 使用ready事件的簡寫
若是你想壓縮js插件，節約每個字節，你應該避免使用$(document).onready()

1
2
3
4
5
6
7
8

// 也不要使用
$(document).ready(function (){
// 代碼
});
// 你能夠如此簡寫：
$(function (){
// 代碼
});

4、測試jQuery

19. jQuery單元測試
測試JavaSript代碼最好的方法就是人來測試。但你可使用一些自動化的工具如Selenium，Funcunit，QUit，QMock來測試你的代碼（尤爲是插件）。我想在另一個專題來討論這個話題由於實在有太多要說的了。

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

1 2	// 在Firebug控制檯記錄數據的快捷方式 $.l($('div'));

1 2	// 獲取UNIX時間戳 $.time();

1
2
3
4

// 在Firebug記錄執行代碼時間
$.lt();
$('div');
$.lt();

1 2	// 將代碼塊放在一個for循環中測試執行時間 $.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6

5、其餘經常使用jQuery性能優化建議

21. 使用最新版本的jQuery
最新的版本每每是最好的。更換了版本後，不要忘記測試你的代碼。有時候也不是徹底向後兼容的。

22. 使用HMTL5
新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味着使用jQuery須要更少的遍歷，以及更優良的載入性能。因此若是可能的話請使用HTML5。

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

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

24. 避免載入多餘的代碼
將Javascript代碼放在不一樣的文件中是個好的方法，僅在須要的時候載入它們。這樣你不會載入沒必要要的代碼和選擇器。也便於管理代碼。

25. 壓縮成一個主JS文件，將下載次數保持到最少
當你已經肯定了哪些文件是應該被載入的，那麼將它們打包成一個文件。用一些開源的工具能夠自動幫你完成，如使用Minify(和你的後端代碼集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在線工具能夠爲你壓縮文件。我最喜歡的是JSCompressor。

26. 須要的時候使用原生的Javasript
使用jQuery是個很棒的事情，可是不要忘了它也是Javascript的一個框架。因此你能夠在jQuery代碼有必要的時候也使用原生的Javascript函數，這樣能得到更好的性能。

27. 從Google載入jQuery框架
當你的應用正式上線的時候，請從Google CDN載入jQuery，由於用戶能夠從最近的地方獲取代碼。這樣你能夠減小服務器請求，而用戶若是瀏覽其餘網站，而它也使用Google CDN的jQuery時，瀏覽器就會當即從緩存中調出jQuery代碼。

1 2	// 連接特定版本的壓縮代碼 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

28. 緩慢載入內容不只能提升載入速度，也能提升SEO優化（Lazy load content for speed and SEO benefits）使用Ajax來載入你的網站吧，這樣能夠節約服務器端載入時間。你能夠從一個常見的側邊欄widget開始。