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