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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
javascript实现固定侧边栏
Feb 09 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 时间计算问题小结
2009/01/04 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
网页常用特效代码整理
2006/06/23 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python实现图片转字符小工具
2019/04/30 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python写一个随机点名软件的实例
2019/11/28 Python
在python3中实现更新界面
2020/02/21 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
12岁生日感言
2014/01/21 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
法律专业求职信
2014/05/24 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android