[Javascript]如何優化javascript的效能

2009-04-25

10981
0
Javascript

我們在撰寫程式時很少會考量到撰寫的效能，因為當我們在測試程式時大多是在開發環境中測試，資料量不大、網路環境、電腦配備也都不差，因此常常會埋藏了一些潛在問題，其中最常見的就是for迴圈的使用與字串的串接

我們在撰寫程式時很少會考量到撰寫的效能，因為當我們在測試程式時大多是在開發環境中測試，資料量不大、網路環境、電腦配備也都不差，因此常常會埋藏了一些潛在問題，其中最常見的就是for迴圈的使用與字串的串接，以下這個範例是我們很常見的：

1.for迴圈的寫法，兩個寫法的效能當資料量變大後差距愈來愈大，測試過在50000筆資料時，差距約30-50倍。

//寫法1：在for迴圈執行時才取得tRowValues.length
02

//透過ajax取得DB中某個Table的欄位值
03

var tRowValues = getCellData();
04

for(var i=0;i<tRowValues.length;i++)
05

{
06

//.....
07

}
08

//寫法2：在for迴圈執行前先取得tRowValues.length放進變數中
10

//透過ajax取得DB中某個Table的欄位值
11

var tRowValues = getCellData();
12

var tRowCount = tRowValues.length;
13

for(var i=0;i<tRowCount ;i++)
14

{
15

//.....
16

}

2.字串append，以下兩個寫法的效能差別也是很可怕的，我們在撰寫的時候也可以多加留意。

//作法1，透過分隔符號來串接字串

var tRowValue = getCellData();

var tRowCount = tRowValue.length;

var tString;

for(var i=0;i<tRowCount;i++)

{

//用某個分隔符號作字串串接

tString += tRowValue[i] +",";

}

//作法2，透過join來串接字串

var tRowValue = getCellData();

var tRowCount = tRowValue.length;

var tString = tRowValue.join(',');

除了以上兩個寫法外，下面也提出幾個重要概念：

1.Cache object：
   由於javascript是屬於動態解譯，所以是在執行時才去解譯整個內容，例如：
   document.getElementById('btnA').style.display = 'none';
   javascript並不像C#或其他物件導向的語言一樣可以先編譯好，
   所以他在Run Time時，是先載入整個HTML DOM(document)，
   然後在這個document中找尋btnA物件，接著去找btnA的style，style的display屬性，
   所以在這短短的一句javascript中，就進行了3-4次找尋的動作，

   document.getElementById('btnA').style.display = 'none';
   document.getElementById('btnA').style.height= '50px';
   document.getElementById('btnA').style.width= '100px';

   如果要處理上面三行，就要搜尋10多次了，效能一定很不好，
   Cache object的概念是，

   var tStyle = document.getElementById('btnA').style
   tStyle .display = 'none';
   tStyle .height= '50px';
   tStyle .width= '100px';

   如此整個搜尋的次數由10多次降為5次。

2.local variable與global variable
   在javascript中，呼叫local variable的速度會較global variable來的快，
   因為它只會掃local這個function來找尋該變數。

3.eval
   前一篇有提到eval函式的效能不佳，這邊再說明一次，
   使用eval會導致javascript必須對整個script做重新解譯的動作。

原則上當我們在撰寫網頁時，逐漸把這些習慣帶入，寫出效能不佳的程式，機會就愈來愈小了。

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁