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代码(使用jquery性能问题)
Jun 30 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
常用js脚本
2006/12/03 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python实现网站注册验证码生成类
2017/06/08 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
速记Python布尔值
2017/11/09 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
浅谈flask源码之请求过程
2018/07/26 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
活动策划邀请函
2014/02/06 职场文书
《王二小》教学反思
2014/02/27 职场文书
《恐龙》教学反思
2014/04/27 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android