JavaScript代碼優化（下載時間和執行速度優化）

JavaScript代碼的速度被分紅兩部分：下載時間和執行速度。

下載時間 

Web瀏覽器下載的是js源碼，所以全部長變量名和註釋都回包含在內。這個因素會增長下載時間。1160是一個TCP-IP包中的字節數。最好能將每一個javascript文件都保持在1160字節如下以得到最優的下載時間。 
   因爲這個緣由，要刪除註釋、刪除製表符和空格、刪除全部的換行、將長變量名縮短。 
遵循這4條比較困難。所以用外部程序（ECMAScript Cruncher）來幫助咱們。

要運行ESC，必使用Windows系統，打開一個控制檯窗口，而後使用如下格式的命令：

cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile1.js [inputfile2.js]

 第一部分，cscript，是Windows Shell腳本解釋程序。文件名ESC.wsf是ESC的程序自己。而後是壓縮級別，一個0到4的數值。-ow選項表示下一個參數是優化後輸出的文件名。最後，剩下的參數是要進行優化的JavaScript文件，能夠有多個文件（多個文件在優化後後會按順序放到輸出文件中）。

0 —— 不改變腳本，要將多個文件拿到單個文件中時用用。

1 —— 刪除全部的註釋。

2 —— 除等級1外，再刪除額外的製表符和空格。

3 —— 除等級2外，再刪除換行。 

4 —— 除等級3外，再進行變量名替換。

ESC擅長把變量名替換成無心義的名稱，它還具備必定的智能，進行私有對象先進性和方法名的替換（由名稱先後加上兩個下劃線表示），因此私有特性和方法依然保持其私有性。

ESC不會更改構造函數名、公用屬性和公用方法名，因此無需擔憂。但要注意的是若是某個JavaScript引用了另外一個文件中的構造函數，4級優化會把對構造函數的引用替換成無心義的名稱。解決方法是將兩個文件合成一個文件，這樣就會保持構造函數的名稱。

  其餘減小字節數的方法還有幾個。 

     1．由於在javascript語言中 true等於1，false等於0。所以,腳本包含的字面變量true均可以用1來替換，而false能夠用0來替換。 
例如： 

var bFound = false;
for (var i = 0; i < aTest.length && !bFound; i++) {
    if (aTest[i] == vTest) {
        bFounde = true;
    }
}
var bFound = 0;
for (var i = 0; i < aTest.length && !bFound; i++) {
    if (aTest[i] == vTest) {
        bFounde = 1;
    }
}

 這兩段代碼運行方式徹底相同，然後者節省了7個字節。 
       2．縮短否認檢測 
       代碼中經常會出現檢測某個值是否知足條件。而大部分做的判斷某個變量是否爲undefined 、null 、false。能夠用邏輯非來簡化判斷。例如

if (oTest != undefined) {
  //do someting
}
if (oTest != null) {
 //do someting
}
if (oTest != false) {
  //do someting
}

以上代碼能夠替換成

if (!oTest) {
//do something
}

爲何能夠替換呢？由於邏輯非操做在遇到undefined 、null 、false時返回true這樣作能夠節省不少字節。 
        3．定義數組、對象時候的技巧 

var oTest = new Array;
var oTest = [];

var oTest = new Object;
var oTest = {};

 是等價的

執行時間

    咱們能夠作一些簡單的事情提升javascript性能。我以爲也是編寫javascript的一些技巧。 
        1．關注範圍 
        書中的範圍我理解爲做用域。 
        在javascript中默認的範圍是window。在window範圍中建立的變量旨在頁面從瀏覽器卸載後纔會銷燬。在函數中建立的變量只在函數中的範圍內有效。函數執行後就銷燬。在引用變量時，javascript解釋程序在最近的範圍內查找，若是沒有救災上一層次中查找。直到window範圍。若是window中也找不到。則出現錯誤。本地範圍內的變量比全局變量執行起來要更快。 
提升javascript執行速度能夠有下面幾種方法 
          A.使用局部變量。 
          在函數中老是用var來定義變量。若是直接使用變量而不在函數中定義，則變量會建立在window範圍內。也就是說執行函數遇到該變量時，javascirpt程序就會按層次到最上層纔會查找到該變量。 
不要這樣： 

function xxx() {
    name = "abc";
    alert(name);
}

               B. 避免with語句 
             範圍越小執行速度越快。

alert(document.title);
alert(document.body.tagName);
alert(document.location);

 

 

能夠替換成

with (document) {
    alert(title);
    alert(body.tagName);
    alert(location);
}

這的確縮短了程序的長度，可是減小代碼不能彌補損失的性能。爲何呢？ 
由於：使用with語句時要強制解釋程序不只要在範圍內查找局部變量。還強制檢測每一個變量及指定的對象，看其是否爲特性。由於也能夠在函數中定義變量title或者location。 

           2．Javascript陷阱 

            A. 避免多字符串用+號鏈接 
            多字符串鏈接最好用StringBuffer對象。該對象封裝了Array用join()方法進行鏈接字符串。 
            B.優先使用內置方法 
Js提供了至關豐富的內置方法能夠充分利用 
            C.存儲經常使用的值 
屢次使用同一個值時，能夠將其存儲在局部變量中提升訪問速度。 

          3．減小語句數量 
          例如：

 Js代碼  

var iFive = 5;
var sColor = "blue";

能夠替換成

var iFive = 5, sColor = "blue";
//另外
var sName = aValues[i];
i++;
//能夠替換成
var sName = aValues[i++];

另外能夠用json來代替對象定義。

           4．節約使用DOM 

           DOM處理算是javascript中最耗時的操做之一。解決這個問題的方法是儘量避免對DOM文檔中的元素直接進行DOM操做。 這裏要學會使用文檔碎片對象即document.createDocumentFragment()。