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事件