YUI Compressor是如何压缩JS代码的?
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 最有效的压缩优化,当属标识符替换。比如:
1 |
(function(){ |
2 |
function add(num1, num2) { |
3 |
return num1 + num2; |
4 |
} |
5 |
})(); |
进行属标识符替换后:
1 |
(function(){ |
2 |
function A(C, B) { |
3 |
return C+ B; |
4 |
} |
5 |
})(); |
再移除额外的空格,最终成了:
1 |
(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是如何压缩JS代码的?的更多相关文章
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
- nodejs+gulpjs压缩js代码
1.安装node.js 下载地址:nodejs.org 或者 nodejs.cn 2.安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安 ...
- .net 运用YUI相关的dll压缩js (按照自己的规则,想想都觉得强大和有趣)
写在前面 不管是做前端的还是做后台的,不管是懂javaScript的还是不太懂JavaScript的人,我想都或多或想的知道些许js压缩对于页面性能提升的效应吧. 之前老喜欢用在线压缩工具去压缩js, ...
- 记录一个在线压缩和还原压缩js代码的工具
packer – javascript 压缩工具 http://dean.edwards.name/packer/ Javascript Beautifier ---可以恢复某些压缩工具压缩的js代码 ...
- grunt压缩js代码
安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grun ...
- gulp 压缩 js 和 css 代码
我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...
- 压缩和还原压缩的JS代码
压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...
- YUI Compressor for Sublime text2
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发. 最近压缩文件,常使用在线压缩的方式来压缩文件,一来多有不便,二来如果没有网络,只能搁置了.本文来描述如何 ...
- idea 添加yuicompressor压缩js/css
打开idea 点击file->Settings 出现如下界面 argumets项填写 : -jar F:\yui\yuicompressor-2.4.8.jar $FilePath$ -o $F ...
随机推荐
- python-三级菜单的优化实现
三级菜单需求: 1.可依次选择进入各子菜单 2.可从任意一层往回退到上一层 3.可从任意一层退出程序 所需新知识点:列表.字典 先通过字典建立数据结构 #创建字典 city_dic = { " ...
- python应用:经纬度匹配
需要安装第三方包:requests 本次经纬度匹配采用高德地图api,首先将gps坐标转化为高德地图的经纬度坐标,然后再根据转化后的坐标进行匹配. 本次匹配主要是获取距离给定经纬度最近的poi点地址信 ...
- js bom和dom
一, 前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM ...
- 阿里云异常网络连接-可疑WebShell通信行为的分析解决办法
2018年10月27日接到新客户网站服务器被上传了webshell脚本木马后门问题的求助,对此我们sine安全公司针对此阿里云提示的安全问题进行了详细分析,ECS服务器被阿里云提示异常网络连接-可疑W ...
- 【財務会計】BS科目とは・PL科目とは
「BS科目」「PL科目」という言葉がありますが.聞いたことあるけどよくわからん!っていう人は多いと思います.なので.簡単にご説明を. BS科目は「いくらあるか」 「BS科目」は.「B/S科目」と書くこ ...
- The Road to learn React书籍学习笔记(第四章)
高级React组件 本章将重点介绍高级 React 组件的实现.我们将了解什么是高阶组件以及如何实现它们.此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能. 引用 DOM ...
- shell重温---基础篇(参数传递&echo命令)
经过前两天的学习,关于shell的基础算是知道的一般般啦,最起码不算是小白了(纯属意淫).今天就来点干货哈. 首先是运行shell脚本时的参数传递.脚本内获取参数的格式为$n.n代表了一个数字,例 ...
- Android——搜索传统蓝牙设备
一,主布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...
- table调整td宽度整理-完美解决--费元星前端
个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...
- 【HNOI2008】玩具装箱TOY & 斜率优化学习笔记
题目 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为 \(1\cdots N\ ...