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 相关文章推荐
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
Apr 13 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
浅谈JavaScript 声明提升
Sep 14 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php 注释规范
2012/03/29 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php使用GeoIP库实例
2014/06/27 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python删除某个目录文件夹的方法
2020/05/26 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
农村改厕实施方案
2014/03/22 职场文书
贷款担保申请书
2014/05/20 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
离婚起诉书范文2016
2015/11/26 职场文书