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 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
js制作简易年历完整实例
Jan 28 Javascript
javascript日期计算实例分析
Jun 29 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
js+audio实现音乐播放器
Sep 13 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
投票管理程序
2006/10/09 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python 调试冷知识(小结)
2019/11/11 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
三方股份合作协议书
2014/10/13 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python