YUI Compressor压缩JavaScript原理及微优化

 更新时间:2013年01月07日 14:16:40   作者:  
最近写一个jQuery插件,在最后完成优化时,对比发现压缩后文件比较大,就思考那些是可以被修改和优化的,发现压缩原理也有很大的空间可以学习
最近写一个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 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 基础上的,所以上述所有的优化都是安全的。

相关文章

  • 详解addEventListener的三个参数之useCapture

    详解addEventListener的三个参数之useCapture

    本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享,有需要的小伙伴参考下
    2015-03-03
  • 微信小程序选择器组件picker简单入门

    微信小程序选择器组件picker简单入门

    微信小程序picker表单选择器的使用,根据官方介绍的有点不清楚,下面这篇文章主要给大家介绍了关于微信小程序选择器组件picker的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 原生js实现商品筛选功能

    原生js实现商品筛选功能

    这篇文章主要为大家详细介绍了原生js实现商品筛选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JavaScript数组操作总结

    JavaScript数组操作总结

    JavaScript中的Array对象与其他编程语言中的数组一样,是一组数据的集合。在JavaScript中,数组里面的数据可以是不同类型的,并具有用于执行数组常见操作的方法,本文整理了一些常用的,需要的可以参考一下
    2022-10-10
  • JS中位运算符的一些妙用

    JS中位运算符的一些妙用

    大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果,下面这篇文章主要给大家介绍了关于JS中位运算符的一些妙用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 判断客户浏览器是否支持cookie的示例代码

    判断客户浏览器是否支持cookie的示例代码

    本篇文章主要介绍了判断客户浏览器是否支持cookie的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 为body标签和document.body都添加点击事件后仅Firefox弹出了两次

    为body标签和document.body都添加点击事件后仅Firefox弹出了两次

    为body标签和document.body都添加点击事件后仅Firefox弹出了两次,需要的朋友可以参考下。
    2011-04-04
  • 小程序api实现promise封装过程解析

    小程序api实现promise封装过程解析

    这篇文章主要介绍了小程序api实现promise封装过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 实例解析package.json和最常见的scripts字段

    实例解析package.json和最常见的scripts字段

    日常开发中,现在的前端开发已经被三大框架取代,其中最主流的不过vue和react,而开发这些项目的时候不得不接触package.json这个文件,可你真的了解这个文件吗?今天给大家聊聊package.json和最常见的scripts字段,感兴趣的朋友一起看看吧
    2023-04-04
  • JavaScript中的Map数据结构详解

    JavaScript中的Map数据结构详解

    这篇文章主要为大家介绍了JavaScript的Map数据结构,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01

最新评论