引言

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

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

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

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

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

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

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

在jQuery中，不是所有的選擇符（Selectors）都是同等性能的。也就是說，雖然某一些元素你可以用很多種不同的選擇符寫法來選取，但不要認(rèn)為它們?cè)谛阅苌弦彩且粯拥摹?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

};

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

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

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

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

但改為下邊的寫法會(huì)快很多：

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

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

最新評(píng)論