jQuery無(wú)疑是一個(gè)出色的JavaScript庫(kù)，但它的性能如何？在其易用性和優(yōu)異Web頁(yè)面性能之間進(jìn)行折衷是否值得？它的性能是不是真的很優(yōu)異？本文將回答關(guān)于jQuery性能的問(wèn)題，并提供一些可以改進(jìn)應(yīng)用程序性能的技巧。

51CTO推薦專題： jQuery從入門到精通

度量JavaScript性能要考慮的最重要問(wèn)題是執(zhí)行JavaScript的環(huán)境。因?yàn)榇a是運(yùn)行在客戶端上的，所以它的執(zhí)行依賴于客戶端計(jì)算機(jī)，這使得客戶端機(jī)器成為影響性能的最重要因素。很明顯，運(yùn)行4核CPU的新服務(wù)器執(zhí)行代碼的速度肯定要比400MHz老式處理器快。這是毫無(wú)疑問(wèn)的。不過(guò)，由于您不能控制Web應(yīng)用程序用戶用于訪問(wèn)您的站點(diǎn)的機(jī)器，所以在度量性能時(shí)要考慮關(guān)于硬件的許多因素。

JavaScript性能的另一個(gè)重要方面是用于運(yùn)行JavaScript的瀏覽器，JavaScript新手可能不容易發(fā)覺這個(gè)影響因素。每個(gè)瀏覽器內(nèi)部都包含一個(gè)JavaScript引擎，即用于解析和執(zhí)行JavaScript代碼并處理Web應(yīng)用程序頁(yè)面的本機(jī)代碼。因此，JavaScript的性能嚴(yán)重依賴于客戶端使用的瀏覽器，并且在某些情況下，您可以控制用戶使用的瀏覽器。本文提供一些關(guān)于JavaScript性能的指導(dǎo)原則，并解釋不同瀏覽器對(duì)性能的影響。

創(chuàng)建性能測(cè)試

關(guān)于性能測(cè)試的***步是創(chuàng)建一個(gè)合適的性能測(cè)試。jQuery以及其他JavaScript庫(kù)在代碼中扮演的最重要角色就是使用選擇查找特定頁(yè)面元素。我在最初的性能測(cè)試中就以這方面為重點(diǎn)。一個(gè)良好的性能測(cè)試應(yīng)該真正地發(fā)揮JavaScript庫(kù)的全部力量，用包含數(shù)千個(gè)頁(yè)面元素的頁(yè)面測(cè)試它。應(yīng)該運(yùn)行所有選擇方法，讓我看到哪個(gè)選擇方法最快，哪個(gè)最慢。測(cè)試應(yīng)該事先知道正確的答案，從而確定JavaScript庫(kù)是否正確地執(zhí)行選擇方法。***，應(yīng)該顯示所有結(jié)果，并附帶所用的運(yùn)行時(shí)間，讓我能夠在所有庫(kù)之間進(jìn)行比較。

我差點(diǎn)忽略了性能測(cè)試的最重要方面：它應(yīng)該是免費(fèi)的。畢竟這個(gè)系列文章的不成文規(guī)則就是相互利用彼此的成果，因此我繼續(xù)發(fā)揚(yáng)這種精神，在此使用一個(gè)現(xiàn)成的JavaScript庫(kù)性能測(cè)試。這個(gè)測(cè)試稱為SlickSpeedSelectorsTest，它非常適合我的需求。它將jQuery1.2.6（撰寫本文時(shí)的***版本）與其他4個(gè)流行的JavaScript庫(kù)（MooTools、Prototype、YUI和Dojo）進(jìn)行比較。然后，它使用帶有數(shù)千個(gè)頁(yè)面元素的頁(yè)面運(yùn)行40個(gè)選擇測(cè)試。換句話說(shuō)，這是我所希望的***性能測(cè)試。我將在***個(gè)性能測(cè)試分析中使用該測(cè)試。

對(duì)比JavaScript庫(kù)的性能

對(duì)于***個(gè)性能測(cè)試，我使用的運(yùn)行環(huán)境是2.2GHz處理器、2GBRAM和Firefox3.0.3（非常重要）。我在該配置下運(yùn)行5次測(cè)試，圖1顯示了5次運(yùn)行的平均結(jié)果。

 
圖 1.性能測(cè)試1的結(jié)果

從***次測(cè)試能夠得出什么結(jié)論？現(xiàn)在我們僅關(guān)注總體結(jié)果，而不是每次測(cè)試。在獲得一些總體結(jié)論之后，我將稍后在本文中關(guān)注每個(gè)測(cè)試。

結(jié)論1：YUI慢到了極點(diǎn)

對(duì)，與其他庫(kù)相比，YUI真的很慢。仔細(xì)查看每個(gè)測(cè)試，找出為什么這個(gè)庫(kù)在選擇元素組（例如“p,a”）時(shí)非常慢。對(duì)于要求具有很好性能的頁(yè)面而言，這個(gè)庫(kù)是最差的選擇。

結(jié)論2：Mootools、jQuery和Dojo的運(yùn)行時(shí)間幾乎一樣

與其他兩個(gè)庫(kù)相比，這3個(gè)庫(kù)是非?？斓模⑶褼ojo是它們當(dāng)中最快的，而jQuery是最慢的。但是從全局考慮，它們之間的速度是很接近的。

結(jié)論3：這些庫(kù)之間的相對(duì)差別還是比較明顯的

度量最快時(shí)間/最慢時(shí)間以確定速度的相對(duì)差別，您可以看到相對(duì)差別為332%。這個(gè)差別是比較大的，這表明使用Firefox時(shí)選擇不同的JavaScript庫(kù)會(huì)對(duì)性能有影響。
但是要記住，這些結(jié)論僅基于一個(gè)瀏覽器的結(jié)果。這是基于Firefox3.0.3得出的結(jié)論?，F(xiàn)在我們進(jìn)入下一小節(jié)，我將在不同的瀏覽器上運(yùn)行該測(cè)試。

#p#

在不同瀏覽器上的JavaScript性能

面對(duì)不同瀏覽器運(yùn)行JavaScript會(huì)得出的不同結(jié)果（性能和時(shí)間都不同），許多初級(jí)Web程序員覺得不可思議。盡管這對(duì)初級(jí)Web程序員而言是個(gè)挫折（他們擔(dān)心要編寫額外的代碼來(lái)處理不同的瀏覽器），但是有經(jīng)驗(yàn)的Web程序員在Netscape和InternetExplorer的早期就知道如何處理該問(wèn)題。這也是使用JavaScript庫(kù)的一個(gè)亮點(diǎn)，因?yàn)樗鼈兌贾?jǐn)慎處理許多或大部分瀏覽器差異。

JavaScript速度差異的主要原因是每個(gè)瀏覽器都使用自己的JavaScript引擎。JavaScript引擎是用于解析JavaScript并根據(jù)Web應(yīng)用程序執(zhí)行它的本機(jī)代碼。因此，JavaScript的執(zhí)行速度與底層引擎直接相關(guān)。在最近幾個(gè)月，許多瀏覽器公司越來(lái)越關(guān)注他們的瀏覽器的性能，這是有原因的。隨著某些頁(yè)面的JavaScript變得日益復(fù)雜，JavaScript引擎的快慢能夠影響Web應(yīng)用程序的響應(yīng)速度。因此，當(dāng)Google和Firefox等公司談?wù)撍鼈兊腏avaScript引擎時(shí)，它們就會(huì)談及下一代引擎的速度要快10倍。這對(duì)Web應(yīng)用程序而言是很重要的，因?yàn)榈讓覬avaScript引擎的速度直接導(dǎo)致更復(fù)雜的Web應(yīng)用程序的出現(xiàn)。

現(xiàn)在，您知道JavaScript引擎是JavaScript執(zhí)行速度的一個(gè)因素，那么讓我們?cè)诓煌臑g覽器上運(yùn)行剛才在Firefox上運(yùn)行的測(cè)試，并嘗試找出不同的引擎對(duì)JavaScript性能的影響。記住，這個(gè)測(cè)試與我前面在Firefox上運(yùn)行的測(cè)試是一樣的，因此除了JavaScript引擎以外，其他所有東西都是相同的。圖2顯示了測(cè)試結(jié)果。

 
圖2. 性能測(cè)試2的結(jié)果

看完這些測(cè)試結(jié)果之后，您首先注意到的是在這些瀏覽器中運(yùn)行得到的時(shí)間差很大。在Chrome1.0上運(yùn)行jQuery需要168毫秒，而在IE6上運(yùn)行需要1728秒。這是難以置信的時(shí)間差！jQuery選擇方法在IE6上運(yùn)行比在Chrome上運(yùn)行慢10倍！現(xiàn)在，您知道為什么Google喜歡夸耀它的JavaScript引擎，以及為什么某些瀏覽器很少介紹自己的JavaScript引擎。這些差別還是比較大的。

您應(yīng)該注意到，jQuery在Firefox或一些其他瀏覽器上運(yùn)行時(shí)速度排在第3位，而在另一些瀏覽器上排在第1位。事實(shí)上，這些結(jié)果表明，根據(jù)性能進(jìn)行分類的話，這些庫(kù)可以分為兩組，而不管使用什么瀏覽器。Mootools、Dojo和jQuery通常屬于一個(gè)組別，而Prototype和YUI屬于另一個(gè)組別，前一組要比后一組快得多。

#p#

性能測(cè)試結(jié)論

我覺得所有這些結(jié)論都需要專門花一個(gè)小節(jié)進(jìn)行闡述，因?yàn)樗鼈儗?duì)JavaScript開發(fā)人員非常重要。我仍然嘗試總結(jié)上面的性能結(jié)果，并且沒有忘記本文是以jQuery為主題的。

結(jié)論1：Mootools、jQuery和Dojo在性能方面不分上下

 
圖3. 測(cè)試結(jié)果的平均值（Mootools、jQuery 和 Dojo）

查看它們?cè)谒?個(gè)瀏覽器上進(jìn)行的測(cè)試，在求取平均值之后，您可以看到這3個(gè)庫(kù)的性能幾乎是一樣的。（理想情況下，我們應(yīng)該調(diào)查每個(gè)瀏覽器的市場(chǎng)份額。但是調(diào)整這些數(shù)字很難，因?yàn)槭褂肑avaScript庫(kù)的站點(diǎn)不一定由“平均用戶”訪問(wèn)）。

結(jié)論2：Prototype和YUI的性能很慢

看看這兩個(gè)庫(kù)在5個(gè)瀏覽器中的測(cè)試結(jié)果與jQuery的對(duì)比。在求取它們的平均值之后，您可以發(fā)現(xiàn)這兩個(gè)庫(kù)的性能差別有多大。它們?cè)谌我鉃g覽器中平均比jQuery慢300%。

 
圖4. 測(cè)試結(jié)果的平均值（jQuery、Prototype 和 YUI）

結(jié)論3：如果對(duì)性能要求比較高時(shí)，選擇Mootools、jQuery和Dojo之一獲得的性能幾乎一樣

根據(jù)以上的平均值，選擇這3個(gè)庫(kù)之一比選擇另外兩個(gè)庫(kù)之一能夠獲得更多的性能優(yōu)勢(shì)。從在所有瀏覽器上運(yùn)行得出的平均值看，它們的性能是相當(dāng)?shù)?。因此，?dāng)您選擇JavaScript庫(kù)時(shí)，選擇這3個(gè)庫(kù)之一是不會(huì)錯(cuò)的。

結(jié)論4：如果對(duì)性能要求比較高時(shí)，不要選擇Prototype或YUI

如果要求JavaScript庫(kù)具有較高的性能，或者打算創(chuàng)建一個(gè)大型的JavaScript項(xiàng)目，那么就不應(yīng)該選擇這兩個(gè)庫(kù)之一。這兩個(gè)庫(kù)的性能要比其他庫(kù)遜色得多。

結(jié)論5：瀏覽器對(duì)性能的影響是JavaScript庫(kù)的9倍

我認(rèn)為這是本文所有結(jié)論中最重要的結(jié)論。您可以在特定情況下討論哪個(gè)JavaScript庫(kù)最快，但它最終的影響卻是很小的！對(duì)于性能而言，瀏覽器的影響比庫(kù)本身要大得多。回顧一下圖3和圖4的平均值，您可以看到3個(gè)最快的庫(kù)中，最慢那個(gè)（Dojo）僅比最快那個(gè)（jQuery）慢15%。只有15%！

然而，您看看jQuery在最快的瀏覽器（Chrome1.0）和最慢的瀏覽器（IE6）上運(yùn)行的速度差別，這個(gè)差別竟然達(dá)到1000%！從這兩個(gè)數(shù)字看，15%對(duì)1000%而言是微不足道的。至此，關(guān)于3個(gè)較快的庫(kù)中哪個(gè)是最快的爭(zhēng)論可以停止了，因?yàn)樗鼈儗?duì)最終結(jié)果的影響是微乎其微的。

結(jié)論6：如果JavaScript性能對(duì)Web應(yīng)用程序很重要，并且您可以控制選擇什么瀏覽器，那么就選擇最快的瀏覽器

在某些情況下，您可以控制使用什么瀏覽器訪問(wèn)站點(diǎn)。如果能夠控制使用什么瀏覽器，那么您就是很幸運(yùn)的。我就碰到這樣幸運(yùn)的項(xiàng)目。在這種情況下，如果您擁有一個(gè)復(fù)雜的JavaScript應(yīng)用程序，或者您認(rèn)為性能很重要，那么您就應(yīng)該控制用戶用于訪問(wèn)Web應(yīng)用程序的瀏覽器。這些測(cè)試已經(jīng)清楚地顯示了瀏覽器的影響。如果您的JavaScript應(yīng)用程序的訪問(wèn)量很大，那么您可以告訴用戶，他們必須使用Chrome。

結(jié)論7：如果您不能控制用戶使用的瀏覽器，那么要首先考慮在IE6上的性能

但是，在大部分情況下，我們都無(wú)法控制用戶使用什么瀏覽器訪問(wèn)我們的站點(diǎn)。不過(guò)，很大一部分用戶都使用IE6瀏覽網(wǎng)頁(yè)。到目前為止的測(cè)試中，這個(gè)瀏覽器的JavaScript引擎是最慢的。但是由于仍然有大量用戶使用它，并且良好的Web設(shè)計(jì)需要“適應(yīng)最糟糕的情況”，這意味著您可以考慮根據(jù)IE6設(shè)計(jì)您的JavaScript應(yīng)用程序。

#p#

jQuery性能調(diào)優(yōu)

本文的第二部分將討論如何改進(jìn)jQuery代碼的性能。前一部分表明選擇jQuery作為JavaScript庫(kù)指向了正確的性能方向。如果您正在閱讀本文，您可能已經(jīng)使用了jQuery。但是底層庫(kù)速度快并不意味著您編寫的所有代碼都是高質(zhì)量的。如果您沒有回過(guò)頭來(lái)想想應(yīng)該怎么做，使用jQuery仍然會(huì)編寫出非常慢的代碼。

這個(gè)部分介紹一些性能調(diào)優(yōu)知識(shí)，以及改進(jìn)jQuery代碼速度的***實(shí)踐技巧。

技巧#1-盡可能多地通過(guò)ID進(jìn)行搜索，而不是CLASS

 
圖5. ID搜索和CLASS搜索對(duì)比

在jQuery代碼中兩種常見的搜索技術(shù)是通過(guò)元素的ID進(jìn)行搜索和通過(guò)元素的CLASS進(jìn)行搜索。在使用常規(guī)JavaScript的JavaScript庫(kù)之前，通過(guò)ID查找頁(yè)面元素還是相當(dāng)簡(jiǎn)單的?？梢允褂胓etElementById()方法快速找到元素。但是如果沒有JavaScript庫(kù)，要查找CLASS會(huì)更加困難，在必要情況下，我們還通過(guò)在其ID中進(jìn)行編碼幫助查找。

使用jQuery時(shí)，搜索CLASS就像搜索頁(yè)面上的ID一樣簡(jiǎn)單，因此這兩個(gè)搜索似乎是可互換的。然而實(shí)際情況并非如此。通過(guò)ID搜索比通過(guò)CLASS搜索要快得多。當(dāng)通過(guò)ID進(jìn)行搜索時(shí)，jQuery實(shí)際上僅使用內(nèi)置的getElementById()方法，但通過(guò)CLASS進(jìn)行搜索時(shí)必須遍歷頁(yè)面上的所有元素，以查找匹配項(xiàng)。很明顯，當(dāng)頁(yè)面越大并且越復(fù)雜時(shí)，通過(guò)CLASS進(jìn)行搜索會(huì)導(dǎo)致響應(yīng)非常慢，而通過(guò)ID進(jìn)行搜索不會(huì)隨著頁(yè)面變大而變慢。

前面運(yùn)行的jQuery性能測(cè)試結(jié)果支持這一數(shù)據(jù)。讓我們查看每個(gè)測(cè)試，看看需要注意jQuery代碼的什么地方。在這個(gè)例子中，分別看看通過(guò)ID和CLASS進(jìn)行搜索時(shí)的測(cè)試結(jié)果。

這些測(cè)試是不同的，但它們得出的數(shù)據(jù)表明通過(guò)ID進(jìn)行搜索比通過(guò)CLASS進(jìn)行搜索快得多。這如何影響到j(luò)Query代碼？在編寫搜索時(shí)，您要記住這些技巧：如果既可選擇CLASS又可選擇ID，那么通常要選擇ID。如果需要在您的代碼中搜索某些元素，一定要給它們分配ID。清單1顯示了一個(gè)實(shí)際的jQuery測(cè)試，您可以在您的機(jī)器上運(yùn)行它對(duì)此進(jìn)行驗(yàn)證：

$(document).ready(function(){  
console.info("StartTest");  
vard=newDate();  
console.info(d.getSeconds()+""+d.getMilliseconds());  
vartestBody="";  
for(vari=0;i<1000;i++)  
{  
testBody+="<divclassdivclass='testable"+i+"'>";  
}  
$("body").append(testBody);  
for(vari=0;i<1000;i++)  
{  
$(".testable"+i);  
}  
 
vard=newDate();  
console.info(d.getSeconds()+""+d.getMilliseconds());  
console.time("StartIDTest");  
 
testBody="";  
for(vari=0;i<1000;i++)  
{  
testBody+="<dividdivid='testable"+i+"'>";  
}  
$("body").append(testBody);  
for(vari=0;i<1000;i++)  
{  
$("#testable"+i);  
}  
vard=newDate();  
console.info(d.getSeconds()+""+d.getMilliseconds());  
console.info("EndTest");  
});  

ID測(cè)試耗時(shí)218毫秒，而CLASS測(cè)試耗時(shí)19.9秒！甚至在專門為該測(cè)試構(gòu)建的簡(jiǎn)單頁(yè)面上，ID搜索也要比CLASS搜索快100倍！

技巧#2-提供盡可能多的搜索信息

 
圖6. 盡可能多地提供信息

jQuery提供如此多的頁(yè)面元素搜索方法，有時(shí)您難以指出哪種方法是***的。有一條經(jīng)驗(yàn)是不會(huì)錯(cuò)的，即為搜索參數(shù)提供盡可能多的信息。因此，假如您正在搜索帶有“clickable”CLASS的所有頁(yè)面元素，如果您提前知道僅有DIV附帶有CLASS，那么就能提高搜索性能。所以，搜索“div.clickable”會(huì)更加快。圖6顯示了支持該技巧的結(jié)果。

考慮到底層JavaScript代碼之后，這就不足為奇了。通過(guò)提供元素標(biāo)記，與CLASS參數(shù)匹配的搜索元素?cái)?shù)量將大大減少，從而將搜索性能提升至與本例中的ID搜索相當(dāng)。開發(fā)人員在編寫jQuery選擇方法時(shí)不能偷懶，盡管jQuery的簡(jiǎn)單讓人產(chǎn)生偷懶的欲望。簡(jiǎn)單讓您放松了警惕。搜索機(jī)制變得如此簡(jiǎn)單，讓我們傾向于僅輸入一條信息。然而，您應(yīng)該總是盡可能多地輸入信息，尤其是已知信息。清單2顯示了一個(gè)很好的例子。

//Assumethereare50oftheseinsomegiantform,andyouneedtovalidate  
//thesefieldsbeforetheyaresubmitted,andtherearehundredsofother  
//elementsonthepageaswell  
<inputtypeinputtype=textclass="notBlank"> 
 
//the"bad"waytovalidatethesefields  
$(".notBlank").each(function(){  
if($(this).val()=="")  
$(this).addClass("error");  
});  
 
//the"good"waytovalidatethesefields  
$("input.notBlank").each(function(){  
if($(this).val()=="")  
$(this).addClass("error");  
});  
 
//the"best"waytovalidatethesefields  
$("input:text.notBlank").each(function(){  
if($(this).val()=="")  
$(this).addClass("error");  
});  

技巧#3-緩存選擇器

***一個(gè)性能技巧利用了幾乎所有jQuery選擇器都返回jQuery對(duì)象這個(gè)特性。這意味著在理想的情況下，您僅需要運(yùn)行選擇器一次，并且能夠輕松地將所有函數(shù)連接在一起，或緩存結(jié)果供以后使用。您也不要擔(dān)心緩存，因?yàn)榕c總體可用內(nèi)存相比，返回的對(duì)象是很小的。清單3給出了一些關(guān)于如何利用緩存的例子。

//Imagineafunctionthathidesallthediv'swithaclassof"hideable"  
//whenabuttonispressed.TheseDIV'smightreappearlaterwhen  
//workingwiththepage,sothebuttoncanbepressedanynumberof  
//times,andtheDIV'sthathavereappeared  
//willagainbemadetobehidden.  
 
$("#ourHideButton").click(function(){  
$(".hideable").hide();  
});  
 
//AsyousawintheCLASSversusIDexample,though,asearchfor  
//CLASSisveryinefficient  
//Ifthisbuttonispressedoften,itcouldleadtoaslowresponse  
//Insteadoftheaboveexample,youshouldwriteyourcodelikethis  
 
varhideable;  
 
$("#ourHideButton").click(function(){  
if(hideable)  
hideable.hide();  
else  
hideable=$(".hideable").hide();  
});  
 
//YoucancacheyoursearchinaJavaScriptvariableandreuseiteverytime  
//thebuttonispressed.BecausejQueryalmostalwaysreturnsthe  
//jQueryobject,youcansaveitthefirsttimeitiscalledforfutureuse  

在我的***一個(gè)關(guān)于性能的示例代碼中，將查看我在本系列的***篇文章中提到的小部件（見參考資料）。這個(gè)小部件是在表的左上角上的復(fù)選框，它允許您選擇或取消選擇該列上的所有復(fù)選框。這個(gè)小部件在電子郵件應(yīng)用程序中非常常見，用于選擇或取消選擇所有消息。

//HereisthecodeasIoriginallypresenteditinthatarticle.Let'ssee  
//ifwecanimprovetheperformanceinanywayfromthethingswelearnedhere  
 
functionselectAll()  
{  
varchecked=$("#selectall").attr("checked");  
$(".selectable").each(function(){  
varsubChecked=$(this).attr("checked");  
if(subChecked!=checked)  
 $(this).click();  
});  
}  
 
//Here'stheimprovedfunction.ThesearchfortheIDof"selectall"is  
//OKas-is,becausewesawhowfasttheIDsearchis.  
//ThesearchfortheCLASSof"selectable"wasnotwell-designedthough,  
//becausewesawasearchbyCLASSisveryinefficient.  
//Firststepwasimprovingthesearchbysupplyingasmuchinformationasweknow.  
//WenarrowedthesearchtoonlycheckboxeswiththeCLASSofselectable.  
//Thisshouldimproveoursearch  
//Further,wecancachethissearchbecausewewillonlyneedtoperformitonce  
//Finally,wecanperformthissearchbeforetheselectallcheckboxiseven  
//checked(whenthepageisfinishedloading),sothatthesearchiscompleted  
//andcachedbeforetheuserevenusesit.  
//These3simpleperformancestepsgavemea200%increaseinspeedwhentested  
//onapagewith200rowsofdata.  
 
varselectable=$(":checkbox.selectable");  
functionselectAll()  
{  
varchecked=$("#selectall").attr("checked");  
selectable.each(function(){  
varsubChecked=$(this).attr("checked");  
if(subChecked!=checked)  
 $(this).click();  
});  
}  

#p#

關(guān)于性能的要點(diǎn)

使用JavaScript時(shí)，速度和性能絕對(duì)不是小問(wèn)題。在現(xiàn)實(shí)中，創(chuàng)建jQuery的開發(fā)人員和處理瀏覽器內(nèi)置JavaScript引擎的開發(fā)人員都非常關(guān)注性能問(wèn)題。事實(shí)上，在最近6個(gè)月以來(lái)，瀏覽器開發(fā)的最重要問(wèn)題就是JavaScript引擎的速度。瀏覽器開發(fā)者都致力于在下一年迅速提升JavaScript的執(zhí)行性能，從而大大提高jQuery代碼和JavaScript引擎的速度。來(lái)自這些“速度之戰(zhàn)”的消息表明，提升JavaScript性能是大勢(shì)所趨。

領(lǐng)導(dǎo)jQuery項(xiàng)目的JohnResig一直都在談?wù)撍?**“Sizzle”選擇引擎。他從頭編寫了一個(gè)選擇引擎，并聲稱初步結(jié)果表明它比Firefox要快4倍。這是巨大的速度提升！在我撰寫本文的***部分時(shí)，jQuery1.3已經(jīng)發(fā)布，并且包含了Sizzle選擇引擎。jQuery聲稱，在所有瀏覽器上運(yùn)行的總體結(jié)果表明選擇引擎的1.3版本比1.2.6版本的快49%。此外，1.3發(fā)布版在HTML注入（向DOM添加新的元素）上改進(jìn)了6倍，在函數(shù)定位上改進(jìn)了3倍。在我完成本文時(shí)，很多人都更新到了***的jQuery發(fā)布版，這是非常令人激動(dòng)的！

影響JavaScript性能的另一個(gè)因素是瀏覽器，如前所述，它的影響是所選的庫(kù)的9倍。Firefox和Chrome在“最快JavaScript引擎”之戰(zhàn)中各有勝負(fù)，而Safari的參與讓競(jìng)爭(zhēng)更加激烈。從我們上面的測(cè)試中，可以看到Chrome在JavaScript引擎性能方面遠(yuǎn)遠(yuǎn)超過(guò)Firefox，但是Firefox3.1將包含新的TracemonkeyJavaScript引擎，屆時(shí)其速度將比當(dāng)前的JavaScript引擎3.0快20至40倍（這是他們聲稱的，不是我的觀點(diǎn)），真不可思議！在未來(lái)一兩年內(nèi)，您將看到底層JavaScript引擎和JavaScript庫(kù)的速度得到巨大改進(jìn)，從而導(dǎo)致使用JavaScript的Web應(yīng)用程序?qū)⒆兊酶訌?fù)雜。

如果您正在決定是使用JavaScript庫(kù)還是自己編寫JavaScript，那么需要考慮的另一件事情是處理和調(diào)試JavaScript庫(kù)所需的全部工作。最近幾年以來(lái)，有數(shù)百位用戶一直在維護(hù)庫(kù)中的每一個(gè)函數(shù)。您可能要忙到深夜，甚至筋疲力盡地編寫自己的函數(shù)。

您更相信誰(shuí)呢？另外，即使您能編寫出比jQuery庫(kù)更快的代碼，您是否想過(guò)使用jQuery庫(kù)能夠獲得更多的優(yōu)勢(shì)？您是否為了辛苦地編寫自己的代碼而放棄使用非常便利的jQuery及其函數(shù)庫(kù)？自己編寫代碼不僅需要大量時(shí)間，并且還會(huì)產(chǎn)生更多bug，因此我還是建議使用現(xiàn)成的jQuery庫(kù)。

我***討論的要點(diǎn)可能會(huì)讓一些人沮喪，但是我們必須考慮編寫這些jQuery庫(kù)的程序員。他們當(dāng)中的一些是最棒的，并且他們編寫的超級(jí)優(yōu)秀的代碼（一般人不能編寫這樣出色的代碼）都收入到這些庫(kù)中。我承認(rèn)自己遠(yuǎn)遠(yuǎn)不如編寫jQuery庫(kù)的程序員。因此，為何不利用他們的智慧？

結(jié)束語(yǔ)

本文從總體上討論了jQuery和JavaScript庫(kù)的性能。通過(guò)對(duì)選擇方法進(jìn)行大量的測(cè)試，您看到這些庫(kù)之間的速度存在巨大的差距，并且jQuery是最快的庫(kù)之一。不過(guò)，即使您選擇了最快的JavaScript庫(kù)，還是不能解決Web應(yīng)用程序的性能問(wèn)題，因?yàn)闉g覽器對(duì)性能的影響比庫(kù)強(qiáng)9倍。如果您能夠控制用戶使用特定的Web瀏覽器，那么就讓他們使用最快的瀏覽器。找到能夠最快地運(yùn)行您的Web應(yīng)用程序的瀏覽器，并讓用戶通過(guò)使用它從中受益。理想情況下，讓最慢的JavaScript瀏覽器消失意味著出現(xiàn)更快的Web應(yīng)用程序。

***，我們快速查看了jQuery和瀏覽器的JavaScript引擎即將推出的改進(jìn)。在我撰寫本文的結(jié)尾部分時(shí)，jQuery1.3已經(jīng)發(fā)布了，它承諾在選擇和代碼的其他方面實(shí)現(xiàn)跳躍式性能改進(jìn)。此外，F(xiàn)irefox還承諾它的下一代JavaScript引擎會(huì)快20至40倍！這些跡象表明，在未來(lái)的一兩年內(nèi)，JavaScript環(huán)境會(huì)在性能上取得重大突破。在不久的將來(lái)，復(fù)雜的Web應(yīng)用程序會(huì)日益流行，因?yàn)榭焖龠\(yùn)行這些程序的條件已經(jīng)成熟。

【編輯推薦】

1. jQuery高級(jí)應(yīng)用：優(yōu)化Web應(yīng)用程序的***絕招
2. jQuery四大天王：核心函數(shù)詳解
3. jQuery中10個(gè)強(qiáng)大的遍歷函數(shù)
4. 即刻提升jQuery性能的十個(gè)技巧
5. 一些應(yīng)該熟記于心的jQuery函數(shù)和技巧