如何優(yōu)化JavaScript的性能

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何優(yōu)化JavaScript的性能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

話不多說，提到j(luò)avascript難免會聯(lián)想到文檔對象模型(DOM)，它作用于XML和HTML文檔的程序接口(API)，位于瀏覽器中，主要用來與HTML文檔打交道。同樣也用于Web程序中獲取XML文檔，并使用DOM API來訪問文檔中的數(shù)據(jù)。盡管DOM是個與語言無關(guān)的API，它在瀏覽器中的接口卻是用javascript實(shí)現(xiàn)的?？蛻舳四_本編程大多數(shù)時(shí)候是在和底層文檔(underlying document) 打交道，DOM就成為現(xiàn)在javascript編程中的重要部分。

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

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

一、超載運(yùn)輸

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

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

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

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

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

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

二、觸手可及

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

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

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

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

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

上面element.className 賦值在currentClassName局部變量，避免了多次查找?guī)淼男阅荛_銷。（多次需要全局對象成員，那就賦值在最容易拿到的地方，這樣可以減少去搜索和查找）

總結(jié)

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

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

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

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

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

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

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

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

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

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)部對象，所以Math.floor()其實(shí)并沒有多少查詢方法和調(diào)用時(shí)間，速度是最快的。

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

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

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

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

上述就是小編為大家分享的如何優(yōu)化JavaScript的性能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。