Javascript常用最佳化方法

 

//初學JavaScript，剛看到一篇不錯的文章，轉過來和大家一起分享 

 

對於Javascript的代碼速度，我們一般可以將它分為下載時間和執行速度兩部分，所以，要做最佳化的話，我們可以從這兩部分來入手。

一、最佳化代碼下載速度

1. 在單個TCP-IP包中，最多能放入的位元組數是1160，所以每個js檔案的位元組大小，最好不要超過這個數，以便獲得最優的下載時間。
2. 合并js檔案。如果一個頁面中存在載入多個js外部檔案的情況，則最好將它們合并為一個，這樣可以有效減少HTTP請求數，從而節省下載時間。
3. 為外部js使用不同的網域名稱。我們知道，瀏覽器在下載頁面時，對於同一個網域名稱下的最大並發數是一定的（例如IE6/7在HTTP1.0下是2個，而Firefox3是6個），所以，假如前端頁面的網域名稱是www.phpblog.cn的話，外部js檔案的網域名稱可以改為js.phpblog.cn，這樣做就可以使瀏覽器在js.phpblog.cn網域名稱上也使用最大並發數下載，從而加快下載速度。（以上只是拿我的網域名稱作為例子，目前我的網站還沒有這樣做）
4. 瀏覽器緩衝。在頁面中引用的外部js檔案是可以被瀏覽器緩衝的，緩衝時間由伺服器發給用戶端代理頭部中的Last-modified、Etag或者Expires決定，所以緩衝的時間長短，也成了最佳化速度的一個方面。我建議將js的緩衝時間設定的較長，而如果一旦更改了js檔案後，可以在引用url的js檔案後加個自訂參數，來強迫用戶端重新下載js。例如：
   

   <script src="http://js.phpblog.cn/jquery.js?var=2.0"
   type="text/javascript"></script>

5. 刪除代碼中的注釋、定位字元、空格、換行，這樣做可以有效減小 js檔案的體積。我們可以使用現成的工具來做這件事情，例如我之前介紹過的Google Closure Compiler。
6. 替換變數名，將較長的變數名替換為較短的變數名，以減少js檔案體積。這方面，用Google Closure Compiler也可以完成。
7. 替換布爾值。我們知道，對於比較來說，true等於1，false等於0。因此，在指令碼中的true、false都可以用1和0來代替，這樣可以減少幾個位元組。
8. 使用數組和對象字面量。例如，定義數組時，使用var o = new []而不使用var o = new Array；定義對象時，使用var o =
   {}而不使用var o = new Object，它們是完全等價的。

二、最佳化代碼執行時間

1. 關注變數範圍。在js中，變數範圍是很重要的。我們可以認為變數的範圍在瀏覽器中是一個樹狀層級，尋找一個變數時，瀏覽器首先會在最近的範圍中尋找，如果沒有找到，則會到它的父範圍中尋找，如果還沒有找到，則再去父父的範圍中尋找，直到尋找到window物件範圍（瀏覽器預設的全域變數屬於window對象）。這就說明，讓瀏覽器最快的找到變數，就可以加快代碼的執行速度。在js中，使用var定義的變數為局部範圍變數，而不使用var定義的變數屬於全域範圍變數，所以，如果我們在某個方法中用到的變數，一定要將它定義成局部變數，這樣就不會使瀏覽器一直找到window對象才獲得該變數。和變數範圍有關的另一個最佳化技巧就是，不使用with語句。因為with語句會建立另一個範圍，增加了不必要的尋找。
2. 反轉迴圈。在使用for迴圈時，我們經常這樣用：
   

   for(i=0; i<100; i++) {}

   但是，你需要知道，將迴圈反轉後，它的速度將更快：

   for(i=100; i>=0; i--) {}

   這是因為，使用常數0來做為判斷依據速度更快。當然，使用while迴圈也可以反轉（變換成do..while），具體方法，我就在這裡不再贅述。

3. 除了反轉迴圈，我們還可以使用迴圈合并，來進一步提高迴圈的速度。關於迴圈合并的具體方法，我在這篇文章裡已經介紹過。這裡要特別說明的是，while迴圈也可以合并，方法和反轉迴圈一樣，也是使用do...while來替。
4. 使用js的內建方法。例如，我們要計算一個數的階乘，假如你不知道Math對象有個pow()方法的話，你很可能會自己寫一個階乘計算函數，但是要知道，這樣做的效率是遠遠不如直接調用內建方法Math.pow()的，因為內建方法是用C++或C語言編譯過的，速度要遠遠高於解釋啟動並執行js。
5. 字串串連最佳化。使用"+"來連接字串的效率是很差的，尤其表現在一次串連多個字串時，例如：
   

   var s = "a" + "b" + "c" + "d";

   因為此時js內部會進行多次串連操作，從而導致效率的下降。為了避免這個問題，我們可以使用Array.join()方法來代替：

   var a = ["a", "b", "c", "d"];
   var s = a.join();

6. 儲存常用的值。在js中，訪問某個對象的屬性，從效率上來說，都是非常昂貴的操作。所以可以將多次用到的值儲存到一個變數裡。例如，下面這個代碼速度較慢：
   

   o1.style.left = document.body.clientWidth;
   o2.style.left =
   document.body.clientWidth;

   而下面的代碼速度較快：

   var left = document.body.clientWidth;
   o1.style.left =
   left;
   o2.style.left = left;

7. 在js中，指令碼中的語句越少，執行速度越快。基於這個原則，我們可以知道，使用一個var來定義多個變數，要快於多個var定義。例如：
   

   var a = 1, b = 2, c = 3;

   要快於：

   var a = 1;
   var b = 2;
   var c = 3;

   同樣，以下的代碼：

   var s = a[i++];

   要快於：

   var s = a[i];
   i++;

8. 節約使用DOM。在用js改變頁面上任何一個元素的樣式時（或者增加刪除元素），都會導致瀏覽器重新渲染頁面，這個開銷是不小的。因此，在連續多次操作DOM時，我們可以先將所有變化儲存到DOM片段（fragment）中，然後再一次性操作頁面DOM。例如：
   

   var arrText=["1","2","3","4","5","6","7","8","9","10"];
   var
   oFrag=document.createDocumentFragment();
   for(var i=0;i
   {
   var
   op=document.createElement("P");
   var
   oText=document.createTextNode(arrText[i]);
   op.appendChild(oText);
   oFrag.appendChild(op);

   }
   document.body.appendChild(oFrag);

以上這些，只是我知道的一些最佳化方法，當然，js中的最佳化方法肯定不止這一些，我只能是拋磚引玉，更多的方法，還需要大家一起補充。

 

 

 

                                                               ------yizero 轉自http://www.phpblog.cn/archives/328

 

see Yizero by yizero.com