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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
js变量提升深入理解
Sep 16 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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下封装较好的数字分页方法
2010/11/23 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
利用python获得时间的实例说明
2013/03/25 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
python数据处理实战(必看篇)
2017/06/11 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python re的findall和finditer的区别详解
2020/11/15 Python
大学生优秀的自我评价分享
2013/10/22 职场文书
委托证明的格式
2014/01/10 职场文书
高中英语教学反思
2014/02/04 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis