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 原理-《转载》的更多相关文章

  1. 使用雅虎YUI Compressor压缩JS过程心得记录

    对待发布的项目进行测试时,发现js下载量比较大,从jquery的min版想到了压缩项目中的js文件.很简单的google之(在此,强调一下google的重要性),搜到一个叫做YUI Compresso ...

  2. YUI Compressor压缩失效的场景-eval和with

    一.官方文档的说明 in the face of evil features such as eval or with, the YUI Compressor takes a defensive ap ...

  3. YUI Compressor是如何压缩JS代码的?

    YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移除额外的空格 细微优化 标识符替换(Identifier Replacement) YUI Compressor 包 ...

  4. YUI Compressor

    简介 根据雅虎卓越性能团队的说法,40%到60%的雅虎用户拥有空闲缓存体验,所有页面浏览量中约有20%是使用空缓存完成的(请参阅Tenni Theurer在YUIBlog上的这篇文章)有关浏览器缓存使 ...

  5. YUI Compressor JS和CSS压缩工具使用方式(使用前安装JDK)

    压缩测试: 选中 test.js, 执行右键菜单“Process with &YUICompressor”,会生成 test-min.js. 注意事项: 1. 需要安装 JDK >= 1 ...

  6. 【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS

    在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩 ...

  7. C#Css/Js静态文件压缩--Yui.Compressor.Net

    一.Asp.Net 自带静态文件压缩工具包 Microsoft.AspNet.Web.Optimization http://www.nuget.org/packages/Microsoft.AspN ...

  8. 给YUI Compressor添加右键命令,完成快捷压缩

    YUI Compressor默认不带右键安装功能 YUI Compressor非常好用,特别是JS的混淆是众多JS Coding的最爱.可惜官网提供的版本都不具备右键功能,每次压缩都要cmd输入一些命 ...

  9. Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css

    网上压缩css和js工具很多,但在我们的系统中总有特殊的地方.也许你会觉得用第三方的压缩工具很麻烦.我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作.于是 ...

随机推荐

  1. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  2. java中的date类型转换为js中的日期显示 我改

    function dateChange(javaDate){ if(javaDate){ return javaDate.substr(0,10).replace(/-/g,"/" ...

  3. C++模版详解(-)

    C++模版:       模版时C++支持多参数多态的工具,使用模版可以为用户为类或函数声明一般模式,使得类的数据成员,或者成员函数的参数,返回值取得任意类型. 模版是一种对类型进行参数化的工具: 通 ...

  4. 科学计算三维可视化---TVTK管线与数据加载(数据集)

    一:数据集 三维可视化的第一步是选用合适的数据结构来表示数据,TVTK提供了多种表示不同种类数据的数据集 (一)数据集--ImageData >>> from tvtk.api im ...

  5. LazyMay:实现同步和异步任务的顺序执行

    在掘金看到的文章,流程控制同步和异步任务的顺序执行,收益匪浅,工作中能用到. 1.实现以下效果 实现一个LazyMan,可以按照以下方式调用: LazyMan(“Hank”)输出: Hi! This ...

  6. webapi框架搭建-安全机制(一)

    本系列博客链接:webapi框架搭建系列博客 前言 webapi接口是开放给外部使用的,包括接口的地址,传参的规范,还有返回结果的说明.正因为接口的开放性,使得接口的安全很重要.试想一下,用抓包工具( ...

  7. SQL语句(十八)—— 存储过程

    存储过程 系统存储过程 自定义存储过程 扩展存储过程 一.创建存储过程 创建存储过程 --例1 USE SU GO Create Procedure SelProc AS Select * From ...

  8. CSS3 实现的一个简单的"动态主菜单" 示例[转]

    其实这个示例蛮无聊的 很简单 也没什么实际的用处. 主要是展示了 CSS3 如何实现动画效果. 写这个主要是想看一看 完成这样的效果 我到底要写多少代码. 同时和我熟悉的java做个比较. 比较结果不 ...

  9. 2016-2017-2 《Java程序设计》第六周学习总结

    20155223 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 InputStream.OutputStream:无论数据源或目的地为何,只要设法取 ...

  10. Eltwise层解析

    Concat层虽然利用到了上下文的语义信息,但仅仅是将其拼接起来,之所以能起到效果,在于它在不增加算法复杂度的情形下增加了channel数目.那有没有直接关联上下文的语义信息呢?答案是Eltwise层 ...