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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
javascript 数组精简技巧小结
Feb 26 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/01 无线电
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php去掉文件前几行的方法
2015/07/29 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
CentOS7安装Python3的教程详解
2019/04/10 Python
python实现QQ批量登录功能
2019/06/19 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python 实现批量图片识别并翻译
2020/11/02 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
贷款担保申请书
2014/05/20 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
企业介绍信范文
2015/01/30 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技