JS效能優化

王磊的部落格發表於2015-04-28

下面是一些關於客戶端JS效能的一些優化的小技巧:

1.關於JS的迴圈,迴圈是一種常用的流程控制。JS提供了三種迴圈:for(;;)、while()、for(in)。在這三種迴圈中 for(in)的效率最差,因為它需要查詢Hash鍵,因此應儘量少用for(in)迴圈,for(;;)、while()迴圈的效能基本持平。當然,推 薦使用for迴圈,如果迴圈變數遞增或遞減,不要單獨對迴圈變數賦值,而應該使用巢狀的++或--運算子。

2.如果需要遍歷陣列,應該先快取陣列長度,將陣列長度放入區域性變數中,避免多次查詢陣列長度。

3.區域性變數的訪問速度要比全域性變數的訪問速度更快,因為全域性變數其實是window物件的成員,而區域性變數是放在函式的棧裡的。

4.儘量少使用eval,每次使用eval需要消耗大量時間,這時候使用JS所支援的閉包可以實現函式模板。

5.儘量避免物件的巢狀查詢,對於obj1.obj2.obj3.obj4這個語句,需要進行至少3次查詢操作,先檢查obj1中是否包含 obj2,再檢查obj2中是否包含obj3,然後檢查obj3中是否包含obj4...這不是一個好策略。應該儘量利用區域性變數,將obj4以區域性變數 儲存,從而避免巢狀查詢。

6.使運算子時,儘量使用+=,-=、*=、\=等運算子號,而不是直接進行賦值運算。

7.[頂]當需要將數字轉換成字元時,採用如下方式:"" + 1。從效能上來看,將數字轉換成字元時,有如下公式:("" +) > String() > .toString() > new String()。String()屬於內部函式,所以速度很快。而.toString()要查詢原型中的函式,所以速度遜色一些,new String()需要重新建立一個字串物件,速度最慢。

8.[頂]當需要將浮點數轉換成整型時,應該使用Math.floor()或者Math.round()。而不是使用parseInt(),該方法用於將字串轉換成數字。而且Math是內部物件,所以Math.floor()其實並沒有多少查詢方法和呼叫時間,速度是最快的。

9.儘量作用JSON格式來建立物件,而不是var obj=new Object()方法。因為前者是直接複製,而後者需要呼叫構造器,因而前者的效能更好。

10.當需要使用陣列時,也儘量使用JSON格式的語法,即直接使用如下語法定義陣列:[parrm,param,param...],而不是採用 new Array(parrm,param,param...)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要呼叫Array的構造器。

11.[頂]對字串進行迴圈操作,例如替換、查詢,就使用正規表示式。因為JS的迴圈速度比較慢,而正規表示式的操作是用C寫成的API,效能比較好。

最後有一個基本原則,對於大的JS物件,因為建立時時間和空間的開銷都比較大,因此應該儘量考慮採用快取。

 

相關文章