1. 壓縮程式碼
    1. 在正式上線前,可以將JavaScript程式碼進行壓縮, 減少檔案大小,讓使用者下載更快,也節省頻寬
    2. 手動
      1. 刪除「長變數名」、「註解」、「空格」、「換行」…
      2. tue改用1, false改用0
      3. 缺點,易產生錯誤
    3. 自動
      1. 使用工具,自動化產生壓縮式的JavaScript檔案
        1. Google Closure Compiler
        2. JSMIN
        3. Microsoft Ajax Minifier
        4. packer
        5. javascriptcompressor
        6. YUI Compressor
        7. ESC (ECMAScript Cruncher)
      2. 自動化壓縮工具通常會一併進行最佳化工作
  2. 程式碼最佳化
    1. 這個部份提出的都是自動化壓縮工具比較幫不上忙, 有些是邏輯技巧,有些是程式技巧, 順序上,應該先進行內部程式碼最佳化, 然後再使用壓縮工具來加速提升
    2. 宣告變數
      1. JavaScript中未宣告的變數(函式中也一樣)預設為全域變數,全域變數只有在瀏覽器關閉後才釋放
      2. name = Bruce;
    3. 使用內建函數
      1. 內建函數都已編譯過,執行速度會比即時編譯的JavaScript快很多
    4. 巢狀if
      1. 將出現率最多的情況放在前面
      2. 使用switch語句替代巢狀if/else if
    5. 整合同性質工作
      1. 指令碼中程式行數越少,執行時間越快,將同性質的指令碼集中一次處理,
      2. 例如宣告變數
        1. 1
          1. var name="Bruce"; var age = 18; var birthday = new Date(2010/10/10);
        2. 2
          1. var name="Bruce", age=18,birthday=new Date(2010/10/10);
    6. 節約使用DOM
      1. JavaScript對DOM的處理可能是最耗時費力
      2. 盡量減少DOM的操作
        1. 範例
          1. 為ul新增10個li
          2. 1
          3. var oUL = document.getElementById("ulItem"); for (var i=0; i<10; i++){ var oLI = document.createElement("li"); oUL.appendChild(oLI); //10次 oLI.appendChild(document.createTextNode("Item" + i); //10次 }
          4. 共執行20次DOM操作
          5. 2
          6. var oUL = document.getElementById("ulItem"); var oTemp = document.createDocumentFragment(); for (var i=0; i<10; i++){ var oLI = document.createElement("li"); oLI.appendChild(document.createTextNode("Item" + i); oTemp.appendChild(oLI); } oUL.appendChild(oTemp); //1次
          7. 共執行1次DOM操作
        2. 可多利用document.createDocumentFragment來最佳化相關程式碼
  3. 影響
    1. 壓縮程式碼與程式碼最佳化通常會大大影響「可讀性」, 不佳的可讀性讓後續「維護」困難度升高, 所以正常做法是分為上線和開發兩個版本
      1. 上線
        1. 使用壓縮及最佳化
          1. 加速下載速度,提高執行效能
      2. 開發
        1. 保持良好程式架構和註解等
          1. 提高可讀性及減低維護難度