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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
JS跨域总结
Aug 30 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
轮播图组件js代码
Aug 08 Javascript
jquery validation验证表单插件
Jan 07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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页面运行时间的函数介绍
2013/07/01 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
js通过循环多张图片实现动画效果
2019/12/19 Javascript
原生js实现分页效果
2020/09/23 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python字符串中查找子串小技巧
2015/04/10 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
用python爬取租房网站信息的代码
2018/12/14 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python with语句和过程抽取思想
2019/12/23 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
2014升学宴答谢词
2014/01/26 职场文书
南京大屠杀观后感
2015/06/02 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA