|
如何優(yōu)化JavaScript腳本的性能 作者：ShiningRay @ Nirvana Studio 隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)速和機(jī)器速度的提高,，越來(lái)越多的網(wǎng)站用到了豐富客戶端技術(shù),。而現(xiàn)在Ajax則是最為流行的一種方式。JavaScript是一種解釋型語(yǔ)言,，所以性能無(wú)法達(dá)到和C/Java之類的水平,，限制了它能在客戶端所做的事情，為了能改進(jìn)他的性能,，我想基于我以前給JavaScript做過(guò)的很多測(cè)試來(lái)談?wù)勛约旱慕?jīng)驗(yàn),，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。 語(yǔ)言層次方面循環(huán)循環(huán)是很常用的一個(gè)控制結(jié)構(gòu),，大部分東西要依靠它來(lái)完成,，在JavaScript中，我們可以使用for(;;),while(),for(in)三種循環(huán),，事實(shí)上,，這三種循環(huán)中for(in)的效率極差，因?yàn)樗枰樵兩⒘墟I,，只要可以,，就應(yīng)該盡量少用。for(;;)和while循環(huán),，while循環(huán)的效率要優(yōu)于for(;;),，可能是因?yàn)?font face="Times New Roman, serif">for(;;)結(jié)構(gòu)的問(wèn)題，需要經(jīng)常跳轉(zhuǎn)回去,。 局部變量和全局變量局部變量的速度要比全局變量的訪問(wèn)速度更快,，因?yàn)槿肿兞科鋵?shí)是全局對(duì)象的成員，而局部變量是放在函數(shù)的棧當(dāng)中的,。 不使用Eval使用eval相當(dāng)于在運(yùn)行時(shí)再次調(diào)用解釋引擎對(duì)內(nèi)容進(jìn)行運(yùn)行,，需要消耗大量時(shí)間。這時(shí)候使用JavaScript所支持的閉包可以實(shí)現(xiàn)函數(shù)模版（關(guān)于閉包的內(nèi)容請(qǐng)參考函數(shù)式編程的有關(guān)內(nèi)容） 減少對(duì)象查找因?yàn)?font face="Times New Roman, serif">JavaScript的解釋性,，所以a.b.c.d.e,，需要進(jìn)行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c,，如此往下,。所以如果這樣的表達(dá)式重復(fù)出現(xiàn)，只要可能,，應(yīng)該盡量少出現(xiàn)這樣的表達(dá)式,，可以利用局部變量，把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢,。 這一點(diǎn)可以和循環(huán)結(jié)合起來(lái),，因?yàn)槲覀兂３Ｒ鶕?jù)字符串、數(shù)組的長(zhǎng)度進(jìn)行循環(huán),，而通常這個(gè)長(zhǎng)度是不變的,，比如每次查詢a.length，就要額外進(jìn)行一個(gè)操作,，而預(yù)先把var len=a.length,，則就少了一次查詢。 字符串連接如果是追加字符串,，最好使用s+=anotherStr操作,，而不是要使用s=s+anotherStr。 如果要連接多個(gè)字符串,，應(yīng)該少使用+=,，如 s+=a; s+=b; s+=c; 應(yīng)該寫成s+=a + b + c； 而如果是收集字符串,，比如多次對(duì)同一個(gè)字符串進(jìn)行+=操作的話,，最好使用一個(gè)緩存。怎么用呢,？使用JavaScript數(shù)組來(lái)收集,，最后使用join方法連接起來(lái)，如下 var buf = new Array(); for(var i = 0; i < 100; i++){ buf.push(i.toString()); } var all = buf.join(""); 類型轉(zhuǎn)換類型轉(zhuǎn)換是大家常犯的錯(cuò)誤,，因?yàn)?font face="Times New Roman, serif">JavaScript是動(dòng)態(tài)類型語(yǔ)言,，你不能指定變量的類型。 1. 把數(shù)字轉(zhuǎn)換成字符串,，應(yīng)用"" + 1，雖然看起來(lái)比較丑一點(diǎn),，但事實(shí)上這個(gè)效率是最高的,，性能上來(lái)說(shuō)： ("" +) > String() > .toString() > new String() 這條其實(shí)和下面的“直接量”有點(diǎn)類似，盡量使用編譯時(shí)就能使用的內(nèi)部操作要比運(yùn)行時(shí)使用的用戶操作要快,。 String()屬于內(nèi)部函數(shù),，所以速度很快，而.toString()要查詢?cè)椭械暮瘮?shù)，所以速度遜色一些,，new String()用于返回一個(gè)精確的副本,。 2. 浮點(diǎn)數(shù)轉(zhuǎn)換成整型，這個(gè)更容易出錯(cuò),，很多人喜歡使用parseInt(),，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換,，我們應(yīng)該使用Math.floor()或者Math.round(),。 另外，和第二節(jié)的對(duì)象查找中的問(wèn)題不一樣,，Math是內(nèi)部對(duì)象,，所以Math.floor()其實(shí)并沒(méi)有多少查詢方法和調(diào)用的時(shí)間，速度是最快的,。 3. 對(duì)于自定義的對(duì)象,，如果定義了toString()方法來(lái)進(jìn)行類型轉(zhuǎn)換的話，推薦顯式調(diào)用toString(),，因?yàn)閮?nèi)部的操作在嘗試所有可能性之后,，會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String，所以直接調(diào)用這個(gè)方法效率會(huì)更高 使用直接量其實(shí)這個(gè)影響倒比較小,，可以忽略,。什么叫使用直接量，比如,，JavaScript支持使用[param,param,param,...]來(lái)直接表達(dá)一個(gè)數(shù)組,，以往我們都使用new Array(param,param,...)，使用前者是引擎直接解釋的,，后者要調(diào)用一個(gè)Array內(nèi)部構(gòu)造器,，所以要略微快一點(diǎn)點(diǎn)。 同樣,，var foo = {}的方式也比var foo = new Object();快,，var reg = /../;要比var reg=new RegExp()快。 字符串遍歷操作對(duì)字符串進(jìn)行循環(huán)操作,，譬如替換,、查找，應(yīng)使用正則表達(dá)式,，因?yàn)楸旧?font face="Times New Roman, serif">JavaScript的循環(huán)速度就比較慢,，而正則表達(dá)式的操作是用C寫成的語(yǔ)言的API，性能很好,。 高級(jí)對(duì)象自定義高級(jí)對(duì)象和Date,、RegExp對(duì)象在構(gòu)造時(shí)都會(huì)消耗大量時(shí)間,。如果可以復(fù)用，應(yīng)采用緩存的方式,。 DOM相關(guān)插入HTML很多人喜歡在JavaScript中使用document.write來(lái)給頁(yè)面生成內(nèi)容,。事實(shí)上這樣的效率較低，如果需要直接插入HTML,，可以找一個(gè)容器元素,，比如指定一個(gè)div或者span，并設(shè)置他們的innerHTML來(lái)將自己的HTML代碼插入到頁(yè)面中,。 對(duì)象查詢使用[“”]查詢要比.items()更快,，這和前面的減少對(duì)象查找的思路是一樣的，調(diào)用.items()增加了一次查詢和函數(shù)的調(diào)用,。 創(chuàng)建DOM節(jié)點(diǎn)通常我們可能會(huì)使用字符串直接寫HTML來(lái)創(chuàng)建節(jié)點(diǎn),，其實(shí)這樣做
所以應(yīng)該是用document.createElement()方法，而如果文檔中存在現(xiàn)成的樣板節(jié)點(diǎn),，應(yīng)該是用cloneNode()方法,，因?yàn)槭褂?font face="Times New Roman, serif">createElement()方法之后，你需要設(shè)置多次元素的屬性,，使用cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要?jiǎng)?chuàng)建很多元素,，應(yīng)該先準(zhǔn)備一個(gè)樣板節(jié)點(diǎn)。 定時(shí)器如果針對(duì)的是不斷運(yùn)行的代碼,，不應(yīng)該使用setTimeout,，而應(yīng)該是用setInterval。setTimeout每次要重新設(shè)置一個(gè)定時(shí)器,。 其他腳本引擎據(jù)我測(cè)試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,，無(wú)論是執(zhí)行速度還是內(nèi)存管理上，因?yàn)?font face="Times New Roman, serif">JScript現(xiàn)在基本也不更新了,。但SpiderMonkey不能使用ActiveXObject 文件優(yōu)化文件優(yōu)化也是一個(gè)很有效的手段,，刪除所有的空格和注釋，把代碼放入一行內(nèi),，可以加快下載的速度,，注意，是下載的速度而不是解析的速度,，如果是本地,，注釋和空格并不會(huì)影響解釋和執(zhí)行速度。 總結(jié)本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運(yùn)行性能的一些方法,，其實(shí)這些經(jīng)驗(yàn)都基于幾條原則：
同時(shí),，一些基本的算法上的優(yōu)化，同樣可以用在JavaScript中,，比如運(yùn)算結(jié)構(gòu)的調(diào)整,，這里就不再贅述了。但是由于JavaScript是解釋型的,，一般不會(huì)在運(yùn)行時(shí)對(duì)字節(jié)碼進(jìn)行優(yōu)化,，所以這些優(yōu)化仍然是很重要的。 當(dāng)然,，其實(shí)這里的一些技巧同樣使用在其他的一些解釋型語(yǔ)言中,，大家也可以進(jìn)行參考。 參考
附錄由于是以前做過(guò)的測(cè)試,，測(cè)試代碼已經(jīng)不全,，我補(bǔ)充了一部分如下： |
|
|
