最近剛閱讀完《高性能javascript》，想談?wù)剬?duì)js性能優(yōu)化的看法。理解有些不同，可能還需要各位多多提醒。

話(huà)不多說(shuō)，提到j(luò)avascript難免會(huì)聯(lián)想到文檔對(duì)象模型(DOM)，它作用于XML和HTML文檔的程序接口(API)，位于瀏覽器中，主要用來(lái)與HTML文檔打交道。同樣也用于Web程序中獲取XML文檔，并使用DOM API來(lái)訪(fǎng)問(wèn)文檔中的數(shù)據(jù)。盡管DOM是個(gè)與語(yǔ)言無(wú)關(guān)的API，它在瀏覽器中的接口卻是用javascript實(shí)現(xiàn)的。客戶(hù)端腳本編程大多數(shù)時(shí)候是在和底層文檔(underlying document) 打交道，DOM就成為現(xiàn)在javascript編程中的重要部分。

瀏覽器通常會(huì)把DOM和js獨(dú)立實(shí)現(xiàn)。比如在IE中，javascript的實(shí)現(xiàn)名為Jscript，位于jscript.dll文件中；DOM的實(shí)現(xiàn)則存在另一個(gè)庫(kù)中，名為mshtml.dll（內(nèi)部稱(chēng)為T(mén)rident）。這個(gè)分離允許的其他技術(shù)和語(yǔ)言，比如VBScript，能共享使用DOM以及Trident提供的渲染函數(shù)。Safari中的DOM和渲染使用的Webkit中的WebCode實(shí)現(xiàn)，javascript部分是由獨(dú)立的javascriptCode引擎（最新版本的名字為SquirrelFish）來(lái)實(shí)現(xiàn)。Google Chrome同樣使用WebKit中的WebCore庫(kù)來(lái)渲染頁(yè)面，但javascript引擎是他們自己研發(fā)的，名為V8。Firefox的javascript引擎名為SpiderMonkey（最新版的名字為T(mén)raceMonkey），與名為Gecko的渲染引擎相互獨(dú)立。

把DOM和javascript（這里指ECMAScript，JavaScript使用的ECMAScript版本為ECMAScript-262）各自想象一個(gè)島嶼，它們之間用收費(fèi)橋梁連接。ECMAScript每次訪(fǎng)問(wèn)DOM，都需要途經(jīng)這座橋，并交納“過(guò)橋費(fèi)”。訪(fǎng)問(wèn)DOM的次數(shù)越多，費(fèi)用越高。所以想辦法減少過(guò)橋次數(shù)就可以減少費(fèi)用。

一、超載運(yùn)輸

上面提到“過(guò)橋費(fèi)”很貴啊，那么我們盡量使需要多次去訪(fǎng)問(wèn)DOM的時(shí)候全部整合到一次。比如最簡(jiǎn)單的例子：

function innerHTMLLoop(){
   for(var count = 0;count < 15000 ;count++){
      document.getElementById('here').innerHTML +='a';
  } 
}

這個(gè)函數(shù)循環(huán)修改頁(yè)面元素的內(nèi)容。這段代碼存在循環(huán)迭代，該元素都被訪(fǎng)問(wèn)兩次，一次是讀取innerHTML屬性值，另一次是重寫(xiě)它。（意味著每次循環(huán)都必須付“過(guò)橋費(fèi)”）。

為了減少費(fèi)用，我們采取一種更高效的方法，例：

function innerHTMLLoop2(){
   var content = ' ';
   for(var count = 0;count < 15000 ;count++){
      content +='a';
  } 
  document.getElementById('here').innerHTML +=content;
}

這樣只需要付一次“過(guò)橋費(fèi)”，就可以完成相同的功能。運(yùn)行速度在不同的瀏覽器中都有大幅度的提升，例如IE6中，使用innerHTMLLoop2()比使用innerHTMLLoop()快155倍。（所以現(xiàn)實(shí)當(dāng)中好多大卡車(chē)超載也是為了省這個(gè)費(fèi)用，一次性多賺點(diǎn)。不過(guò)還是量力而行。程序也是一樣，均衡存乎萬(wàn)物之間。）

二、觸手可及

盡管使用優(yōu)化過(guò)的javascript引擎的新型瀏覽器，對(duì)于對(duì)象成員引用也存在一些性能問(wèn)題。對(duì)象在原型鏈中存在的未知越深，找到它也就越慢，例如不太常見(jiàn)的寫(xiě)法：window.location.href。每次遇到點(diǎn)操作符，嵌套成員會(huì)導(dǎo)致Javascipt引擎搜索所有對(duì)象成員。對(duì)象成員嵌套得越深，讀取速度就會(huì)越慢。執(zhí)行l(wèi)ocation.href總是比window.location.href要快，后者也比window.location.href.toString()要快。如果這些屬性不是對(duì)象的實(shí)例屬性，那么成員解析還需要搜索原型鏈，這會(huì)花更多的時(shí)間。

由于類(lèi)似的性能問(wèn)題都是與對(duì)象成員有關(guān)，因此應(yīng)該盡可能避免使用它們。更準(zhǔn)確地說(shuō)，應(yīng)當(dāng)注意，只在必要時(shí)使用對(duì)象成員。例如，在同一個(gè)函數(shù)中沒(méi)有必要多次讀取同一個(gè)對(duì)象成員。例：

function hasEitherClass(element,className1,className2){
   return element.className == className1 || element.className == className2; 
}

以上的代碼，element.className讀取了2次。意味著在該函數(shù)語(yǔ)句中2次成員查找都是通過(guò)讀取屬性值，那么有必要子啊第一次查找到值后就將其存儲(chǔ)在局部變量中，因?yàn)榫植孔兞康淖x取速度要快很多。例：

function hasEitherClass(element,className1,className2){
   var currentClassName = element.className;
   return currentClassName == className1 || currentClassName == className2; 
}

上面element.className 賦值在currentClassName局部變量，避免了多次查找?guī)?lái)的性能開(kāi)銷(xiāo)。（多次需要全局對(duì)象成員，那就賦值在最容易拿到的地方，這樣可以減少去搜索和查找）

總結(jié)

雖然我還有很多要講，但是太多太多的方式可以進(jìn)行性能優(yōu)化，以后有更好的再補(bǔ)充。不過(guò)優(yōu)化就是跟人找方法用最小的力量去做最大的事情一樣，說(shuō)俗點(diǎn)就是“懶”，我們讓程序也懶。

下面是一些關(guān)于客戶(hù)端JS性能的一些優(yōu)化的小技巧：

1.[頂]關(guān)于JS的循環(huán)，循環(huán)是一種常用的流程控制。JS提供了三種循環(huán)：for(;;)、while()、for(in)。在這三種循環(huán)中 for(in)的效率最差，因?yàn)樗枰樵?xún)Hash鍵，因此應(yīng)盡量少用for(in)循環(huán)，for(;;)、while()循環(huán)的性能基本持平。當(dāng)然，推 薦使用for循環(huán)，如果循環(huán)變量遞增或遞減，不要單獨(dú)對(duì)循環(huán)變量賦值，而應(yīng)該使用嵌套的++或－－運(yùn)算符。

2.如果需要遍歷數(shù)組，應(yīng)該先緩存數(shù)組長(zhǎng)度，將數(shù)組長(zhǎng)度放入局部變量中，避免多次查詢(xún)數(shù)組長(zhǎng)度。

3.局部變量的訪(fǎng)問(wèn)速度要比全局變量的訪(fǎng)問(wèn)速度更快，因?yàn)槿肿兞科鋵?shí)是window對(duì)象的成員，而局部變量是放在函數(shù)的棧里的。

4.盡量少使用eval，每次使用eval需要消耗大量時(shí)間，這時(shí)候使用JS所支持的閉包可以實(shí)現(xiàn)函數(shù)模板。

5.盡量避免對(duì)象的嵌套查詢(xún)，對(duì)于obj1.obj2.obj3.obj4這個(gè)語(yǔ)句，需要進(jìn)行至少3次查詢(xún)操作，先檢查obj1中是否包含 obj2，再檢查obj2中是否包含obj3，然后檢查obj3中是否包含obj4...這不是一個(gè)好策略。應(yīng)該盡量利用局部變量，將obj4以局部變量 保存，從而避免嵌套查詢(xún)。

6.使運(yùn)算符時(shí)，盡量使用+＝，－＝、*＝、\=等運(yùn)算符號(hào)，而不是直接進(jìn)行賦值運(yùn)算。

7.[頂]當(dāng)需要將數(shù)字轉(zhuǎn)換成字符時(shí)，采用如下方式："" + 1。從性能上來(lái)看，將數(shù)字轉(zhuǎn)換成字符時(shí)，有如下公式：("" +) > String() > .toString() > new String()。String()屬于內(nèi)部函數(shù)，所以速度很快。而.toString()要查詢(xún)?cè)椭械暮瘮?shù)，所以速度遜色一些，new String()需要重新創(chuàng)建一個(gè)字符串對(duì)象，速度最慢。

8.[頂]當(dāng)需要將浮點(diǎn)數(shù)轉(zhuǎn)換成整型時(shí)，應(yīng)該使用Math.floor()或者M(jìn)ath.round()。而不是使用parseInt(),該方法用于將字符串轉(zhuǎn)換成數(shù)字。而且Math是內(nèi)部對(duì)象，所以Math.floor()其實(shí)并沒(méi)有多少查詢(xún)方法和調(diào)用時(shí)間，速度是最快的。

9.盡量作用JSON格式來(lái)創(chuàng)建對(duì)象，而不是var obj=new Object()方法。因?yàn)榍罢呤侵苯訌?fù)制，而后者需要調(diào)用構(gòu)造器，因而前者的性能更好。

10.當(dāng)需要使用數(shù)組時(shí)，也盡量使用JSON格式的語(yǔ)法，即直接使用如下語(yǔ)法定義數(shù)組：[parrm,param,param...],而不是采用 new Array(parrm,param,param...)這種語(yǔ)法。因?yàn)槭褂肑SON格式的語(yǔ)法是引擎直接解釋的。而后者則需要調(diào)用Array的構(gòu)造器。

11.[頂]對(duì)字符串進(jìn)行循環(huán)操作，例如替換、查找，就使用正則表達(dá)式。因?yàn)镴S的循環(huán)速度比較慢，而正則表達(dá)式的操作是用C寫(xiě)成的API，性能比較好。

最后有一個(gè)基本原則，對(duì)于大的JS對(duì)象，因?yàn)閯?chuàng)建時(shí)時(shí)間和空間的開(kāi)銷(xiāo)都比較大，因此應(yīng)該盡量考慮采用緩存。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論