首頁 > web前端 > js教程 > 主體

YUI Compressor壓縮JavaScript原理及微優化_javascript技巧

WBOY
發布: 2016-05-16 17:44:18
原創
1179 人瀏覽過

最近寫一個jQuery插件,在最後完成優化時,對比發現壓縮後文件比較大,就思考那些是可以被修改和優化的,發現壓縮原理也有很大的空間可以學習,透過這次對YUI Compressor壓縮JavaScript深有體會,那些是可以被壓縮的,特別是那些不能被壓縮的,都需要很清楚,這樣才能寫出來的插件才能保持檔案更小,程式碼更精巧,而且優化的過程中也會發現程式碼待改良的地方,對以後也有很大幫助。隨便在網路上找來一篇文章做記錄了。

YUI Compressor 壓縮JavaScript 的內容包括
移除註釋
移除額外的空格
細微優化
標識符替換(Identifier Replacement)

YUI Compressor包含哪些細微優化呢?
object["property"] ,如果屬性名稱是合法的JavaScript 識別碼(註:合法的JavaScript 識別碼-由一個字母開頭,其後選擇性地加上一個或多個字母、數字或底線)且不是保留字,將優化為: object.property
{"property":123} ,如果屬性名稱是合法的JavaScript 標識符且不是保留字,將優化為{property:123} (註:在物件字面量中,如果屬性名稱是一個合法的JavaScript 識別碼且不是保留字,並不強制要求用引號引住屬性名)。
'abcd'efgh',將最佳化為 "abcd'efgh"。
"abcd" "efgh",如果是字串相連接,將優化成"abcdefgh"(註:所有在使用YUI Compressor 的前提下,對於腳本中的字串連接,使用連接符「 」的效率和可維護性最高)。
對於 JavaScript 最有效的壓縮最佳化,當屬標識符替換。
例如:

複製程式碼 程式碼如下:

(function(function(function(function) >function add(num1, num2) {
return num1 num2;
}
})();

進行屬標識符替換後:

複製程式碼 程式碼如下:
(function(){
function A(C, B) {
return C B;
}
})();

再移除額外的空格,最後成了:

複製程式碼 程式碼如下:
(function(){function A(C,B){return C B;}})();


YUI Compressor 識別碼替換僅替換函數名和變數名,那哪些不能被取代呢? 原始值:字串、布林值、數字、null 和 undefined。一般來說字串佔的空間最多,而非數字字面量其次(true、false,null,underfinded)。
全域變數:window、document、XMLHttpRequest等等。使用最多的就是 document、window。
屬性名,例如:foo.bar。佔據的空間僅次於字串,”。” 操作符無法被代替,且 a.b.c 更加費空間。
關鍵字。常被過度使用的關鍵字有:var、return。最好的最佳化方法:一個函數只出現一次 var 和 return 關鍵字。
對於原始值、全域變數、屬性名的最佳化處理方式大致相同:任何字面量值、全域變數或屬性名被使用超過 2 次(包括2次),都應該用局部變數儲存取代。
但有部分情況下是禁止使用識別符替換的:
使用 eval() 函數。解決方法:不使用或建立一個全域函數封裝 eval()。
使用 with 語句。解決方法:方法同上。
JScript 的條件註解。唯一解決的方法:不使用。
由於 YUI Compressor 是建立在 rhino interpreter 基礎上的,所以上述所有的最佳化都是安全的。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板