YUI Compressor压缩JavaScript原理及微优化
更新时间：2013年01月07日 14:16:40 作者：
最近写一个jQuery插件，在最后完成优化时，对比发现压缩后文件比较大，就思考那些是可以被修改和优化的，发现压缩原理也有很大的空间可以学习
最近写一个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 基础上的，所以上述所有的优化都是安全的。
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 基础上的，所以上述所有的优化都是安全的。
您可能感兴趣的文章:
- java压缩多个文件并且返回流示例
- 使用java基础类实现zip压缩和zip解压工具类分享
- java使用gzip实现文件解压缩示例
- Java压缩文件ZIP实例代码
- Java 文件解压缩实现代码
- java生成压缩文件示例代码
- 使用GruntJS链接与压缩多个JavaScript文件过程详解
- Java中如何调用cmd压缩文件
- Java 图片压缩实现思路及代码
- 使用UglifyJS合并/压缩JavaScript的方法
- JavaScript 代码压缩工具小结
- JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
- javascript实现的样式表(CSS) 格式整理与压缩
- 一款js和css代码压缩工具[附JAVA环境配置方法]
- Microsoft Ajax Minifier 压缩javascript的方法
- 用于CSS代码压缩与格式化的javascript函数代码
- JavaScript 在线压缩和格式化收藏
- java字符串压缩解压示例
相关文章
这篇文章主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
本文介绍了JavaScript中`console`对象提供的多种调试方法,包括`log`、`debug`、`dir`、`table`、`clear`、`group`、`groupEnd`、`time`和`timeEnd`,每种方法都有其特定的用途,感兴趣的朋友跟随小编一起看看吧2025-02-02
这篇文章主要给大家介绍了关于微信小程序使用Echarts和分包的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
这篇文章主要介绍了基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-10-10
js内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存,这篇文章主要给大家介绍了关于js内存泄漏场景、如何监控及分析的相关资料,需要的朋友可以参考下2021-11-11
传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录,下面这篇文章主要给大家介绍了关于微信小程序账号密码登入和传值的实现方法,需要的朋友可以参考下2022-04-04
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下2021-07-07
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成2021-11-11
本篇文章主要是对Javascript遍历页面text控件进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了JavaScript计算某一天是星期几的方法,需要的朋友可以参考下2015-08-08
最新评论