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的简单图片切换效果
Jan 06 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
vue 手机物理监听键+退出提示代码
Sep 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中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
js 遍历对象的属性的代码
2011/12/29 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python生成IP段的方法
2015/07/07 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
python计算auc指标实例
2017/07/13 Python
Python文件和流(实例讲解)
2017/09/12 Python
python的exec、eval使用分析
2017/12/11 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
五年级语文教学反思
2014/01/30 职场文书
花店创业计划书范文
2014/02/07 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
欧元符号 €
2022/02/17 杂记