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 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
jquery操作select方法汇总
Feb 05 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
vue二级路由设置方法
Feb 09 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
vue项目中使用fetch的实现方法
Apr 25 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php格式化日期实例分析
2014/11/12 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python读取oracle函数返回值
2016/07/18 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
函授大学生自我鉴定
2014/02/05 职场文书
师德师风的心得体会
2014/09/02 职场文书
买房协议书范本
2014/10/23 职场文书
普通党员个人整改措施
2014/10/27 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
天气温馨提示语
2015/07/14 职场文书
如何写好活动总结
2019/06/21 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server