jQuery的性能優化

 

摘要: 我一直在尋找有關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>  複製代碼 28. 緩慢載入內容不只能提升載入速度，也能提升SEO優化（Lazy load content for speed and SEO  benefits） 使用Ajax來載入你的網站吧，這樣能夠節約服務器端載入時間。你能夠從一個常見的側邊欄widget開始。