jQuery的性能優化，你知道幾條

我一直在尋找有關jQuery性能優化方面的小竅門，能讓我那臃腫的動態網頁應用變得輕便些。找了不少文章後，我決定將最好最經常使用的一些優化性能的建議列出來

=================================================================
1、選擇器性能優化建議
=================================================================

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. varreceiveNewsletter = $('#nslForm input.on');

複製代碼

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

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

複製代碼

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

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

複製代碼

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

1. varheader = $('#header');
   
2. varmenu = header.find('.menu');
   
3. // 或者
   
4. varmenu = $('.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節點時，須要來回查找時，可能須要更多時間:

1. vardivs = $('.testdiv','#pageBody');// 2353 on Firebug 3.6
   
2. vardivs = $('#pageBody').find('.testdiv');// 2324 on Firebug 3.6 - The best time
   
3. vardivs = $('#pageBody .testdiv');// 2469 on Firebug 3.6

複製代碼

6. 利用強大的鏈式操做
採用jQuery的鏈式操做比緩存選擇器更有效：

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

複製代碼

記住，永遠不要讓相同的選擇器在你的代碼裏出現屢次：
（1）爲了區分普通的JavaScript對象和jQuery對象，能夠在變量首字母前加上$符號。

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

1. $.extend($.expr[':'], {
   
2. abovethefold:function(el) {
   
3. return$(el).offset().top < $(window).scrollTop() + $(window).height();
   
4. }
   
5. });
   
6. varnonVisibleElements = $('div:abovethefold');// 選擇元素

複製代碼

=================================================================
2、優化DOM操做建議
=================================================================

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

1. varheader = $('#header');
   
2. vardivs = header.find('div');
   
3. varforms = header.find('form');

複製代碼

9. 當要進行DOM插入時，將全部元素封裝成一個元素
這裏的基本思想是在內存中創建你確實想要的東西，而後更新DOM。這並非一個jQuery最佳實踐，但必須進行有效的JavaScript操做 。直接的DOM操做速度很慢
直接的DOM操做很慢。儘量少的去更改HTML結構。

1. varmenu = '<ul id="menu">';
   
2. for(vari = 1; i < 100; i++) {
   
3. menu += '<li>'+ i + '</li>';
   
4. }
   
5. menu += '</ul>';
   
6. $('#header').prepend(menu);
   
7. // 千萬不要這樣作：
   
8. $('#header').prepend('<ul id="menu"></ul>');
   
9. for(vari = 1; i < 100; i++) {
   
10. $('#menu').append('<li>'+ i + '</li>');
    
11. }

複製代碼

冒泡事件： 除非在特殊狀況下, 不然每個js事件(例如:click, mouseover等.)都會冒泡到父級節點。當咱們須要給多個元素調用同個函數時這點會頗有用。代替這種效率不好的多元素事件監聽的方法就是, 你只需向它們的父節點綁定一次。 好比, 咱們要爲一個擁有不少輸入框的表單綁定這樣的行爲: 當輸入框被選中時爲它添加一個class傳統的作法是，直接選中input，而後綁定focus等，以下所示：

1. $("#entryform input").bind("focus",function(){
   
2.     $(this).addClass("selected");
   
3. }).bind("blur",function(){
   
4.     $(this).removeClass("selected");
   
5. });

複製代碼

固然上面代碼能幫咱們完成相應的任務，但若是你要尋求更高效的方法，請使用以下代碼：

1. $("#entryform").bind("focus",function(e){
   
2.     var$cell = $(e.target); // e.target 捕捉到觸發的目標元素
   
3.     $cell.addClass("selected");
   
4. }).bind("blur",function(e){
   
5.     var$cell = $(e.target);
   
6.     $cell.removeClass("selected");
   
7. });

複製代碼

經過在父級監聽獲取焦點和失去焦點的事件，對目標元素進行操做。在上面代碼中，父級元素扮演了一個調度員的角色, 它能夠基於目標元素綁定事件。若是你發現你給不少元素綁定了同一個事件監聽, 那麼如今的你確定知道哪裏作錯了。同理，在Table操做時，咱們也可使用這種方式加以改進代碼：普通的方式

1. $('#myTable td').click(function(){
   
2.     $(this).css('background','red');
   
3. });
   
4. 改進方式：
   
5. $('#myTable').click(function(e) {
   
6. var$clicked = $(e.target);
   
7. $clicked.css('background','red');
   
8. });

複製代碼

假設有100個td，在使用普通的方式的時候，你綁定了100個事件。在改進方式中，你只爲一個元素綁定了1個事件，至因而100個事件的效率高，仍是1個事件的效率高，相信你也能自行分辨了。

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

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

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

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

複製代碼

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

1. $('#head').data('name','value');
   
2. // 以後在你的應用中調用:
   
3. $('#head').data('name');

複製代碼

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

15. 爲HTML塊添加「JS」的class
當jQuery載入以後，首先給HTML添加一個叫」JS」的class
$('HTML').addClass('JS');
只有當用戶啓用JavaScript的時候，你才能添加CSS樣式。例如
/* 在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. $("table").delegate("td","hover",function(){
   
2. $(this).toggleClass("hover");
   
3. });

複製代碼

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

1. / 也不要使用
   
2. $(document).ready(function(){
   
3. // 代碼
   
4. });
   
5. // 你能夠如此簡寫：
   
6. $(function(){
   
7. // 代碼
   
8. });

複製代碼

=================================================================
4、測試jQuery
=================================================================

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

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

1. // 在Firebug控制檯記錄數據的快捷方式
   
2. $.l($('div'));
   
3. // 獲取UNIX時間戳
   
4. $.time();
   
5. // 在Firebug記錄執行代碼時間
   
6. $.lt();
   
7. $('div');
   
8. $.lt();
   
9. // 將代碼塊放在一個for循環中測試執行時間
   
10. $.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. $('<style type="text/css"> div.class { color: red; } </style>')
   
2. .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="[color=blue !important][url=https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js]https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js[/url]"></script>

複製代碼

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