引言

jQuery可以說是web開發(fā)領(lǐng)域應(yīng)用最為廣泛的輕量級javascript庫，不僅專業(yè)的web開發(fā)者使用它，很多剛?cè)腴T的web開發(fā)者或者web愛好者也通過使用jQuery輕松地融入到了javascript的開發(fā)。

而如果你還希望在這方面做得更好，就應(yīng)學(xué)習(xí)和了解最佳實踐。最佳實踐（Best Practice）是隨某一技術(shù)領(lǐng)域的發(fā)展而逐漸建立起來的關(guān)于最新技術(shù)和開發(fā)方法的信息，在web開發(fā)領(lǐng)域也非常有用。

本文內(nèi)容參考了杰出前端工程師 Addy Osmani 的 jQuery Performance TIPs & Tricks ，如果有興趣，你也可以自己看看這位大師的這個演說PPT，Addy Osmani本人也是jQuery的核心團隊（jQuery Core teams）的成員之一。
為什么需要遵循jQuery最佳實踐

web開發(fā)領(lǐng)域?qū)τ谛阅艿淖非笫怯啦煌?。jQuery雖然是非常強大的開發(fā)工具，但不當?shù)氖褂梅椒ㄈ詴o瀏覽器帶來額外的工作和負擔，也會使開發(fā)的web應(yīng)用占用更多的系統(tǒng)資源，運行起來也更慢。而我們都知道，好的web應(yīng)用需要的是清爽靈活。

如何判斷javascript的性能呢？現(xiàn)在，這種性能測試都可以歸納為運行速度，簡單的說，同一項功能，某一種寫法如果比另一種寫法運行起來更快，那么這種寫法就可以實現(xiàn)更好的性能。當然，這里只單純從性能角度來考慮，并不包含代碼的可維護性。如果你想自己測試不同的javascript代碼段的性能，推薦使用 jsPerf.com ，這個站點可以幫助你輕松創(chuàng)建javascript性能測試用例，還可以保存和分享測試結(jié)果。jQuery團隊也使用它進行javascript性能測試。
jQuery使用建議
1.使用最新版

新版本的jQuery提供的API會在性能上有所提升，而且修復(fù)了一些存在的bug。由于非常多的網(wǎng)站都在使用jQuery，所以jQuery每一個新版本的更改都會經(jīng)過非常嚴格的測試，升級一般都不會帶來問題。

此外，新版本的jQuery可能會在API上做非常有用的改動，讓開發(fā)工作更加簡單。比如在jQuery 1.7之前，事件綁定使用bind()、delegate()以及l(fā)ive()這幾個方法。雖然都是事件綁定，但每個方法各有針對，這就產(chǎn)生了“什么時候應(yīng)該使用哪個”的麻煩事。而從jQuery 1.7開始，新增并推薦使用on()和off()這2個方法來完成所有的事件綁定與移除，理解起來就要容易多了。
2.理解你的選擇符

在jQuery中，不是所有的選擇符（Selectors）都是同等性能的。也就是說，雖然某一些元素你可以用很多種不同的選擇符寫法來選取，但不要認為它們在性能上也是一樣的。

jQuery的選擇符的運行速度是不同的，從最快到最慢依次是：

•     ID選擇符（$(#ElementId)）
•     元素選擇符（$(form)，$(input)等）
•     Class選擇符（$(.someClass)）
•     偽類和屬性選擇符（$(:hidden)，$([attribute=value])等）

由于瀏覽器支持的原生DOM操作方法（比如document.getElementById()）就可用，所以ID選擇符和元素選擇符是最快的。而稍慢的Class選擇符是因為IE6-IE8不支持原生的getElementsByClassName()，而在支持這個原生方法的其他現(xiàn)代瀏覽器中，Class選擇符仍是很快的。

至于最慢的偽類和屬性選擇符，則是因為瀏覽器并不提供對應(yīng)功能的可用原生方法。盡管jQuery嘗試了使用querySelector()和querySelectorAll()這兩個原生選擇符API（屬于css查詢API）來提升部分jQuery選擇符在部分現(xiàn)代瀏覽器中的性能，但綜合起來，仍然是比較慢的。當然，這也是在于jQuery對偽類和屬性選擇符這個API要求較高，不僅要支持input[type="text"]這種css中合法的選擇符，還要支持p:first這類用于元素過濾，但在css中不合法的選擇符?？傊琷Query的偽類和屬性選擇符功能很強大，但請慎重使用。
3.緩存你操作的元素

var parents = $('.parents');
var children = $('.parents').find('.child'); //bad

緩存是指保存jQuery選擇符的返回結(jié)果，方便之后再次調(diào)用。每一個$('.whatever')都會重新從DOM中搜索并返回一個jQuery包裝集（jQuery collection），因此要避免重復(fù)使用。

原生javascript中，建立局部變量來緩存數(shù)據(jù)或?qū)ο?，有利于精簡代碼、優(yōu)化性能。這里也是一樣的道理。
4.鏈式語法

var parents = $('.parents').doSomething().doSomethingElse();

jQuery中大部分方法都返回jQuery包裝集并支持這種鏈式語法。javasript的性能優(yōu)化要點之一是最小化語句數(shù)，因此鏈式語法不僅寫起來更容易，運行起來也會更快。
5.使用事件代理

利用事件冒泡，指定一個位于dom較高層級的元素（比如document）的事件處理程序，就可以管理某一類型的所有事件。減少了頁面中添加的事件處理程序，自然可以提升整體性能。
6.最小化現(xiàn)場更新

如果你進行操作的DOM部分是已經(jīng)顯示的頁面的一部分，那么你就是在進行一個現(xiàn)場更新?，F(xiàn)場更新需要瀏覽器重新計算尺寸，涉及到重繪（repaint）和回流（reflow），有較高的性能花費，因此應(yīng)減少使用。

在新增內(nèi)容時，建議先把要新增的代碼段合并完全，最后再使用單個append()方法添加到頁面。而如果元素存在復(fù)雜的交互，比如反復(fù)地添加和移除，detach()這個針對性的方法就是最佳的選擇。
7.不在不必要的時候使用jQuery方法

$('.nav_link').bind('click', function() {
  console.log('nav id: ' + $(this).attr('id'));  //bad

$.data(elem, key, value);  //significantly faster

};

jQuery方法不一定是最好的方法。這里使用$(this).attr('id')獲取當前事件元素的ID，為當前事件元素創(chuàng)建了jQuery包裝集，然后調(diào)用attr()屬性獲取方法。但這都是額外的性能花費。事實上，this在事件函數(shù)內(nèi)就表示當前事件元素，直接使用this.id就可以獲取元素ID，這種原生DOM屬性的寫法要更快。
8.適當使用jQuery工具函數(shù)

操作jQuery包裝集的方法（也就是寫在$.fn中的方法），其中一部分也有作為jQuery工具函數(shù)（直接寫在$中的方法）的同類方法。由于jQuery工具函數(shù)在使用中不涉及創(chuàng)建jQuery包裝集，因此，在部分情況下，可以通過換用jQuery工具函數(shù)提升性能。

比如，在DOM中存儲數(shù)據(jù)，一般的做法是：

$('#elem').data(key, value);  //common way

但改為下邊的寫法會快很多：

需要的注意的是，雖然下面這種方法更快，但作為參數(shù)傳入的元素不能用選擇符，而要用元素本身。
結(jié)語

我自己整理和寫本文內(nèi)容時，也感覺很有收獲。jQuery是一個很強大的工具，但進一步說，也只提供了web開發(fā)的最基本的內(nèi)容，更高級更復(fù)雜的內(nèi)容，還需要自己不斷學(xué)習(xí)和創(chuàng)作。在這個過程中，遵循最佳實踐，養(yǎng)成良好的習(xí)慣，會有很大的益處，并逐漸做得更出色！

最新評論