YUI Compressor 组件压缩 JavaScript 的一些原理

 


YUI Compressor
压缩 JavaScript 的内容包括:



  1. 移除注释

  2. 移除额外的空格

  3. 细微优化

  4. 标识符替换(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
add
(
num1
,
num2
)

{


       

return
num1
+
num2
;


   

}



})();


进行属标识符替换后:


(
function
(){


   

function
A
(
C
,
B
)

{


       

return
C
+
B
;


   

}



})();


再移除额外的空格,最终成了:


(
function
(){
function
A
(
C
,
B
){
return
C
+
B
;}})();


YUI Compressor
标识符替换仅替换函数名和变量名
,那哪些不能被替代呢?



  1. 原始值:字符串、布尔值、数字、null 和 undefined。一般来说字符串占的空间最多,而非数字字面量其次(true、false,null,underfinded)。

  2. 全局变量:window、document、XMLHttpRequest等等。使用最多的就是 document、window。

  3. 属性名,比如:foo.bar。占据的空间仅次于字符串,”.” 操作符无法被代替,且 a.b.c 更加费空间。

  4. 关键字。经常被过度使用的关键字有:var、return。最好的优化方法:一个函数仅出现一次 var 和 return 关键字。


对于原始值、全局变量、属性名的优化处理方式大致相同:任何字面量值、全局变量或者属性名被使用超过 2 次(包括2次),都应该用局部变量存储代替。


但有部分情况下是禁止使用标识符替换的:



  1. 使用 eval() 函数。解决方法:不使用或者创建一个全局函数封装 eval()。

  2. 使用 with 语句。解决方法:方法同上。

  3. JScript 的条件注释。唯一解决的方法:不使用。


由于 YUI Compressor
是建立在 rhino interpreter
基础上的,所以上述所有的优化都是安全的。


扩展阅读:



 


 


转自:http://www.planabc.net/2009/08/02/javascript-compression_with_yui_compressor/