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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 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 xml文件操作实现代码(二)
2009/03/20 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Numpy之文件存取的示例代码
2018/08/03 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python3列表List入门知识附实例
2020/02/09 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
工程招投标邀请书
2014/01/26 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
揭牌仪式主持词
2014/03/19 职场文书
医疗纠纷协议书
2014/04/16 职场文书
企业务虚会发言材料
2014/10/20 职场文书
内勤岗位职责
2015/02/10 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS