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

1.注意作用域

隨著作用域鏈中的作用域數(shù)量的增加,訪問當前作用域以外的變量的時間也在增加.訪問全局變量總是要比訪問局部變量慢,因為要遍歷作用域鏈. 
1). 避免全局查找   將在一個函數(shù)中會多次用到的全局對象存儲為局部變量總是沒錯的.

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

2.選擇正確的方法

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

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

在計算機科學中,算法的復雜度是使用O符號來表示的.最簡單,最快捷的算法是常數(shù)值,即O(1).之后,算法變得越來越復雜并花更長時間執(zhí)行.常用的JavaScript算法類型有:

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

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

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

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

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

使用變量和數(shù)組要比訪問對象上的屬性更有效率．對象上的任何屬性的查找都要比訪問變量或者數(shù)組花更長時間，因為必須在原型鏈中對擁有該名稱的屬性進行一次搜索．

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

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

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

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

4). 避免雙重解釋

當JavaScript 代碼想解析 JavaScript 的時候就會存在雙重解釋的懲罰.如下例:

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重寫一個.原生方法是用諸如C/C++之類的編譯型語言寫出來的,所以要比JavaScript的快很多很多.JavaScript中最容易被忘記的就是可以在Math對象中找到的復雜的數(shù)學運算;這些方法要比任何用JavaScript寫的同樣方法,如正弦,余弦快的多.

Switch 語句較快--如果有一系復雜的if-else語句,可以轉換成單個switch語句則可以得到更快的代碼.還可以通過將case語句按最可能的到最不可能在順序進行組織,來進一步優(yōu)化switch語句.

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

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

1). 多個變量聲明

如:

//4個語句---很浪費
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)化都非常容易做,并且要比單個變量分別聲明快很多.

2). 插入迭代值

如:

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

優(yōu)化:

var name = values[i++];

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

如:

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

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

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

一旦你需要訪問DOM部分是已經顯示的頁面的一部分,那么你就是在進行一個現(xiàn)場更新.之所以叫現(xiàn)場更新,是因為需要立即(現(xiàn)場)對頁面對用戶的顯示進行更新.不管是插入單個字符,還是移除整個片段,都有一個性能懲罰,因為瀏覽器要重新計算無數(shù)尺寸以進行更新.

例:

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個項目,這個操作總共要完成20個現(xiàn)場更新.  下面用創(chuàng)建文檔碎片的方法改進:

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);

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

一旦需要更新DOM,請考慮使用文檔碎片來構建DOM結構,然后將其添加到現(xiàn)存的文檔中.

2). 使用innerHTML

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

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

4). 注意NodeList

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

發(fā)生以下情況時會返回NodeList對象:

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

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

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

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

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

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

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

最新評論