本文講述了JavaScript提升性能的常用技巧。分享給大家供大家參考，具體如下：

1.注意作用域

隨著作用域鏈中的作用域數(shù)量的增加,訪問當(dāng)前作用域以外的變量的時(shí)間也在增加.訪問全局變量總是要比訪問局部變量慢,因?yàn)橐闅v作用域鏈. 
1). 避免全局查找   將在一個(gè)函數(shù)中會(huì)多次用到的全局對(duì)象存儲(chǔ)為局部變量總是沒錯(cuò)的.

2). 避免 with 語(yǔ)句  with會(huì)創(chuàng)建自己的作用域,因此會(huì)增加其中執(zhí)行代碼的作用域鏈的長(zhǎng)度.

2.選擇正確的方法

性能問題的一部分是和用于解決問題的算法或者方法有關(guān)的.

1). 避免不必要的屬性查找

在計(jì)算機(jī)科學(xué)中,算法的復(fù)雜度是使用O符號(hào)來(lái)表示的.最簡(jiǎn)單,最快捷的算法是常數(shù)值,即O(1).之后,算法變得越來(lái)越復(fù)雜并花更長(zhǎng)時(shí)間執(zhí)行.常用的JavaScript算法類型有:

常數(shù) : 不管有多少值,執(zhí)行的時(shí)間都是恒定的.一般表示簡(jiǎn)單值和存儲(chǔ)在變量的值.

對(duì)數(shù) : 總的執(zhí)行時(shí)間和值的數(shù)量相關(guān),但是要完成算法并不一定要獲取每個(gè)值. 例如:二分查找

線性 : 總執(zhí)行時(shí)間和值的數(shù)量直接相關(guān). 例如 :遍歷某個(gè)數(shù)組中的所有元素

平方 : 總執(zhí)行時(shí)間和值的數(shù)量有關(guān)，每個(gè)值至少要獲取n次．例如：插入排序

立方:  總執(zhí)行時(shí)間和值的數(shù)量有關(guān)，每個(gè)值至少要獲取n的平方次

使用變量和數(shù)組要比訪問對(duì)象上的屬性更有效率．對(duì)象上的任何屬性的查找都要比訪問變量或者數(shù)組花更長(zhǎng)時(shí)間，因?yàn)楸仨氃谠玩溨袑?duì)擁有該名稱的屬性進(jìn)行一次搜索．

一般來(lái)講，只要能減少算法的復(fù)雜度，就要盡可能減少．盡可能多地使用局部變量將屬性查找替換為值查找．進(jìn)一步講，如果即可以用數(shù)字化的數(shù)組位置進(jìn)行訪問，也可以使用命名屬性(諸如NodeList對(duì)象),那么使用數(shù)組位置.

2). 優(yōu)化循環(huán)

a. 減值迭代   在很多情況下,從最大值開始,在循環(huán)中不斷減值的迭代器更加高效.
b. 簡(jiǎn)化終止條件   由于每次循環(huán)過(guò)程都會(huì)計(jì)算終止條件,所以必須保證它盡可能快.
c. 簡(jiǎn)化循環(huán)體   循環(huán)體是執(zhí)行最多的,所以要確保其被最大限度地優(yōu)化.確保沒有某些可以被很容易移出循環(huán)的密集計(jì)算.
d. 使用后測(cè)試循環(huán)   最常用的for循環(huán)和while循環(huán)都是前測(cè)試循環(huán).而如do-while這種后測(cè)試循環(huán),可以避免最初終止條件的計(jì)算,因此更快. 

3). 展開循環(huán)   當(dāng)循環(huán)的次數(shù)是確定的,消除循環(huán)并使用多次函數(shù)調(diào)用往往更快.如著名的Duff裝置

4). 避免雙重解釋

當(dāng)JavaScript 代碼想解析 JavaScript 的時(shí)候就會(huì)存在雙重解釋的懲罰.如下例:

eval("alert('Hello world!')");
//某些代碼求值

修正:

alert('Hello world');

var sayHi = new Function("alert('Hello world!')");   

修正:

var sayHi = function(){
  alert("Hellow world!');
};

setTimeout("alert('Hellow world!')",500);

修正:

setTimeout(function)({
   alert('Hellow world!');
},500);

5). 其他方法

原生方法較快--只要有可能,使用原生方法而不是自己用JavaScript重寫一個(gè).原生方法是用諸如C/C++之類的編譯型語(yǔ)言寫出來(lái)的,所以要比JavaScript的快很多很多.JavaScript中最容易被忘記的就是可以在Math對(duì)象中找到的復(fù)雜的數(shù)學(xué)運(yùn)算;這些方法要比任何用JavaScript寫的同樣方法,如正弦,余弦快的多.

Switch 語(yǔ)句較快--如果有一系復(fù)雜的if-else語(yǔ)句,可以轉(zhuǎn)換成單個(gè)switch語(yǔ)句則可以得到更快的代碼.還可以通過(guò)將case語(yǔ)句按最可能的到最不可能在順序進(jìn)行組織,來(lái)進(jìn)一步優(yōu)化switch語(yǔ)句.

位運(yùn)算符較快--當(dāng)進(jìn)行數(shù)學(xué)運(yùn)算的時(shí)候,位運(yùn)算操作要比任何布爾運(yùn)算或者算數(shù)運(yùn)算快.選擇性的用位運(yùn)算換算數(shù)運(yùn)算可以極大提升復(fù)雜計(jì)算的性能.諸如取模,邏輯與和邏輯或都可以考慮用位運(yùn)算來(lái)替換.

3 . 最小化語(yǔ)句數(shù)

1). 多個(gè)變量聲明

如:

//4個(gè)語(yǔ)句---很浪費(fèi)
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();

優(yōu)化:

var count = 5,
color = "blue", 
values = [1,2,3],
noiw = new Date();

在大多數(shù)情況下這種優(yōu)化都非常容易做,并且要比單個(gè)變量分別聲明快很多.

2). 插入迭代值

如:

var name = values[i];
i++;

優(yōu)化:

var name = values[i++];

3). 使用數(shù)組和對(duì)象字面量

如:

var values = new Array(); --->  var values = [];
var obj = new Object(); ---> var obj = {};

4. 優(yōu)化DOM交互

1). 最小化現(xiàn)場(chǎng)更新

一旦你需要訪問DOM部分是已經(jīng)顯示的頁(yè)面的一部分,那么你就是在進(jìn)行一個(gè)現(xiàn)場(chǎng)更新.之所以叫現(xiàn)場(chǎng)更新,是因?yàn)樾枰⒓?現(xiàn)場(chǎng))對(duì)頁(yè)面對(duì)用戶的顯示進(jìn)行更新.不管是插入單個(gè)字符,還是移除整個(gè)片段,都有一個(gè)性能懲罰,因?yàn)闉g覽器要重新計(jì)算無(wú)數(shù)尺寸以進(jìn)行更新.

例:

var list = document.getElementById("myList");
for(var i = 0;i < 10;i++){
  var item = document.createElement("li");
  list.appendChild(item);
  item.appendChild(document.createTextNode("Item "+i));
}

這樣添加10個(gè)項(xiàng)目,這個(gè)操作總共要完成20個(gè)現(xiàn)場(chǎng)更新.  下面用創(chuàng)建文檔碎片的方法改進(jìn):

var list = document.getElementById("myList");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 10;i++){
   fragment.appendChild(item);
   item.appendChild(document.createTextNode("Item "+i));
}
list.appendChlid(fragment);

在這個(gè)例子中只有一次現(xiàn)場(chǎng)更新,它發(fā)生在所有項(xiàng)目都創(chuàng)建好之后.文檔碎片用作一個(gè)臨時(shí)的占位符,放置新創(chuàng)建的項(xiàng)目.然后使用appendChild()將所有項(xiàng)目添加到列表用.記住,當(dāng)給appendChild()傳入文檔碎片時(shí),只有碎片中的子節(jié)點(diǎn)被添加到目標(biāo),碎片本身不會(huì)被添加的.

一旦需要更新DOM,請(qǐng)考慮使用文檔碎片來(lái)構(gòu)建DOM結(jié)構(gòu),然后將其添加到現(xiàn)存的文檔中.

2). 使用innerHTML

有兩種在頁(yè)面上創(chuàng)建DOM節(jié)點(diǎn)的方法:使用諸如createElement(),appendChild()之類的DOM方法,以及使用innerHTML對(duì)于小的DOM更改而言,兩種方法效率都差不多.而對(duì)于大的DOM更改,使用innerHTML要比使用標(biāo)準(zhǔn)DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快很多.同樣,一次使用innerHTML比多次使用innerHTML也要快相當(dāng)多.

3). 使用事件代理(簡(jiǎn),略)

4). 注意NodeList

最小化訪問NodeList的次數(shù)可以極大的改進(jìn)腳本的性能.

發(fā)生以下情況時(shí)會(huì)返回NodeList對(duì)象:

a. 進(jìn)行了對(duì)getElementsByTagName()的調(diào)用
b. 獲取了元素的childNodes屬性
c. 獲取了元素的attributes屬性
d. 訪問了特殊的集合,如document.forms  ,  document.images等等

要了解當(dāng)使用NodeList對(duì)象時(shí),合理使用會(huì)極大提升代碼執(zhí)行速度.

前面介紹的 函數(shù)節(jié)流  也是很重要的一方面。特別是多重循環(huán)，非常耗性能時(shí)，此方法很有用的。

PS：對(duì)于javascript進(jìn)行壓縮，減少代碼體積也是提升javascript性能的有效途徑。這里就為大家推薦2款非常實(shí)用的壓縮工具：

JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress

jsmin在線js壓縮工具：
http://tools.jb51.net/code/jsmincompress

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論