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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
面试常见的js算法题
Mar 23 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 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初学者头疼问题总结
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python中常见的异常总结
2018/02/20 Python
Python3实现购物车功能
2018/04/18 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python可以实现栈的结构吗
2020/05/27 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
个人评价范文分享
2014/01/11 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
自荐书4要点
2014/01/25 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
Python 视频画质增强
2022/04/28 Python