jQuery性能優化的28個建議

一、選擇器性能優化建議

　　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 2 3 4

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

　　來看個例子

　　4. 優化選擇器以適用Sizzle的“從右至左”模型

　　自版本1.3之後，jQuery採用了Sizzle庫，與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇範圍較寬泛些：

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

　　而不要使用

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

　　5. 採用find()，而不使用上下文查找

　　.find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回查找時，可能需要更多時間:

1 2 3

vardivs = $('.testdiv','#pageBody');// 2353 on Firebug 3.6 vardivs = $('#pageBody').find('.testdiv');// 2324 on Firebug 3.6 - The best time vardivs = $('#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(); } }); varnonVisibleElements = $('div:abovethefold');// 選擇元素

　二、優化DOM操作建議

　　8. 緩存jQuery對象

　　將你經常用的元素緩存起來：

1 2 3

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

　　9. 當要進行DOM插入時，將所有元素封裝成一個元素

　　直接的DOM操作很慢。儘可能少的去更改HTML結構。

1 2 3 4 5 6 7 8 9 10 11

varmenu = '<ul id="menu">'; for(vari = 1; i < 100; i++) { menu += '<li>'+ i + '</li>'; } menu += '</ul>'; $('#header').prepend(menu); // 千萬不要這樣做： $('#header').prepend('<ul id="menu"></ul>'); for(vari = 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沒有啓用的時候，瀏覽器呈現所有的內容，搜索引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。

　　閱讀更多相關內容

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

　　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(){ // 代碼 });

　四、測試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

　五、其他常用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開始。