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模块化和命名空间管理的问题说明
Dec 06 Javascript
javascript动态加载二
Aug 22 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vue 开发之路由配置方法详解
Dec 02 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 ftp文件上传函数(基础版)
2010/06/03 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php获得url参数中具有&的值的方法
2014/03/05 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python算术运算符实例详解
2017/05/31 Python
python读取和保存视频文件
2018/04/16 Python
Python删除n行后的其他行方法
2019/01/28 Python
django的csrf实现过程详解
2019/07/26 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
小学生演讲稿大全
2014/04/25 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Java 定时任务技术趋势简介
2022/05/04 Java/Android