YUI Compressor压缩JavaScript原理及微优化


Posted in Javascript onJanuary 07, 2013

最近写一个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 基础上的,所以上述所有的优化都是安全的。
Javascript 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 #Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
jQuery插件开发基础简单介绍
Jan 07 #Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 #Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 #Javascript
jquery入门—访问DOM对象方法
Jan 07 #Javascript
You might like
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python处理中文标点符号大集合
2018/05/14 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
softmax及python实现过程解析
2019/09/30 Python
高山背包:High Sierra
2017/11/23 全球购物
函授本科自我鉴定
2013/11/03 职场文书
物流管理专业推荐信
2014/09/06 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年营业员工作总结
2015/04/23 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android