西风瘦马博客

Diffable:一个胆大创新的Web性能优化概念

西风瘦马 — Mon, 12 Jul 2010 17:36:28 +0000

问题：

频繁的文件修改导致每次都需要重新下载这些修改的文件。
很小的改动都会导致缓存失效。
富互联网应用（Rich internet applications）通常包含大量的静态资源文件。

方案：

首先重缓存中申请资源。
传输完成后用Deltas更新缓存版本。
将浏览器端代码和Deltas合并生成最新的JS。

好处：

配合缓存加快网页加载。
用很小的代价完成大资源文件的小改动。

Diffable是一个通过传输浏览器端缓存文件与服务器端最新文件的差异（deltas）来加快网页加载的开源项目。它能自动比较静态文件各版本之间差异，避免重复下载那些未变化的代码，达到减少带宽传输、优化网页加载的目的。

在现代网站中，每个网页包含的静态资源（JavaScript、CSS）越来越多，为了加快网页的加载速度，通常的做法是在浏览器端缓存这些静态文件（参考YSlow的优化原则第三条），如果文件没有变化，浏览器直接从缓存中读取文件，反之，就从服务器上下载最新的文件。像Javascript、HTML、CSS等静态文件可能每周都会更新，甚至更新频率更高，但每个版本之间的改动可能不大，可能只有几行或者几十行代码发生了变化，但是为了获取最新的文件，浏览器必须重新下载整个文件。比如Google Maps包含了一个300K的JavaScript文件，当这个js文件更新时（哪怕只是修改了一行代码），浏览器都需要重新下载这个300K的JavaScript文件，这种成本消耗对用户来说是昂贵的。

有没有办法让浏览器只下载需要更新的那几行代码呢？Diffable就提供了这样的一个解决方案：仅下载有变化的代码（在Diffable中称之为Deltas），未变化的代码从浏览器缓存中获得，两部分代码合并后得到最新的代码。

图一：Deltas图解

图二：Diffable工作原理详解

目前，Diffable只是一个J2EE的开源项目，需要服务器端和浏览器端共同来实现，期待有更多的服务器端语言加入到这个项目中来。

Diffable才刚刚起步，可能许多地方还有待改进，但是，这种创新的概念是值得赞赏的，它为web优化提出了一种新的思路。

有兴趣了解更多的朋友请到官方网站：http://code.google.com/p/diffable/

官方项目介绍的PPT中也包含了不少信息：http://docs.google.com/present/view?id=dhp4jpqq_58hmf8zxdk

易让人忽视的JavaScript陷阱

西风瘦马 — Wed, 30 Jun 2010 15:51:25 +0000

从1996年网景公司第一次介绍JavaScript，这门语言自今已经有了10多年的历史了，随着互联网技术的发展，JavaScript也从诞生时只完成简单的表单验证发展成互联网上非常重要的一门语言，用它开发的网络应用已经五花八门，许多产品的功能已经接近了桌面产品。尽管JavaScript语言的重要性在不断的提升，可是它的语言内核基本上没有发生太大变化。

由于JavaScript这门语言在设计上有些地方存在缺陷，或者我们对一些技术点的理解不透彻，会导致编程过程中出现一些脚本语言层面的bug，这类bug往往非常隐蔽，要排查这类bug所花的时间往往也非常多。

这里，我列出是自己实际工作中发现的一些JavaScript陷阱，这个列表今后可能会持续增加。

parseInt
parseInt是将字符串转换为整数的函数，这个函数有个基模式参数，该参数默认是10，即以将字符串转换为十进制的整数。当字符串以0开头时，JavaScript会八进制方式求值。

PLAIN TEXT
JAVASCRIPT:
1. var s = '08';
2. parseInt(s); //0
3. parseInt(s, 10); //8
上面的代码中，第二行是忽略了基模式参数，当遇上字符串08时，JavaScript会用八进制方式来求值，而8在八进制中不是一个有效数字，所以求值结果是0。第三行是为parseInt指定了基模式是10，所以按着十进制方式求值后，结果为8，该结果正确。所以在使用parseInt时带上基模式参数是一个好习惯。
typeof
typeof是返回一个用来表示表达式的数据类型的字符串。下面几种情况返回的类型值是错误的：

PLAIN TEXT
JAVASCRIPT:
1. typeof null; //object, not null
上面的代码中，检查null的类型返回object，而并非null。

PLAIN TEXT
JAVASCRIPT:
1. var a = new String('Hello');
2. typeof a; //object, not string
上面的代码中，检查字符串Hello的类型返回object，而并非string。对于Boolean、Number等简单数据类型也存在同样的错误。解决方法是封装自己的类型检查函数：

PLAIN TEXT
JAVASCRIPT:
1. function isString(object) {
2. return Object.prototype.toString.call(object) == "[object String]";
3. }
4. var a = new String('Hello');
5. isString(a); //true
NaN
表示算术表达式返回非数字值的特殊值。NaN 不与任何值相等，包括其本身。

PLAIN TEXT
JAVASCRIPT:
1. NaN === NaN; //false
2. typeof NaN; //number
3. isNaN(NaN); //true
上面的代码中，第一行验证了NaN不与任何值相等。第二行与第三行有点矛盾，第二行显示NaN的类型为number，第三行却实现NaN不是一个数字类型的值，因此还是封装一个数字类型的检查函数保险。

PLAIN TEXT
JAVASCRIPT:
1. function isNumber(object) {
2. return Object.prototype.toString.call(object) == "[object Number]";
3. }
隐形Boolean转换
在流程控制的条件中，如果条件变量不是布尔类型值，JavaScript会对条件变量做隐性：'',NaN,null,undefined,0这几个转换为false，其他值都转换为true。特别需要注意的是，只有空字符串转换为false，其他非空字符串都会转换为true，这里尤其要小心的是'0'，它也被认为是true（因为它非空嘛）。
比较大小
编程时经常会在条件判断中比较两个数值的大小，当被比较的两个变量都是数值类型时，不会产生问题，假如双方为字符串类型时，比较就可能产生问题了。

PLAIN TEXT
JAVASCRIPT:
1. '10'>'2' //false
上面的代码返回false，原因比较两个字符串是根据字符本身的ASCII码的大小，从左往右进行比较。'1'的ASCII码是49，'2'的ASCII码是50，所以'10'小于'2'。为了避免字符串比较带来的问题，比较前最好确保所比较的变量都是数值类型（至少保证一方为数值，在比较时会先将另一方隐性转换为数值类型，再做比较）。

显示JavaScript函数调用堆栈的方法

西风瘦马 — Sun, 20 Jun 2010 07:42:25 +0000

许多大型的JavaScript应用程序间的函数调用关系是非常复杂的，在开发或者调试过程中，经常需要跟踪某个函数是由哪些函数调用后才触发执行的，弄清楚这些函数的调用顺序对我们理解代码的数据流向是非常重要的。

Firebug提供了console.trace()来显示函数堆栈，在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系。IE6就没有这么方便了，它没有提供显示函数堆栈的工具，当不可避免的需要在IE6下调试代码时，使用下面的代码能够显示函数堆栈（建议将下面的JavaScript代码保存为console.trace.js，通过外部引入js的方式引用到页面）：

PLAIN TEXT

JAVASCRIPT:

/**
* 获取函数名称
*
* @param {Function} func 函数引用
* @return {String} 函数名称
*/
function getFunctionName(func) {
if ( typeof func == 'function' || typeof func == 'object' ) {
var name = ('' + func).match(/function\s*([\w\$]*)\s*\(/);
}
return name && name[1];
}
if (!('console' in window)) {
window.console = {};
}
if (!console.trace) {
/**
* 显示函数堆栈
* 为了和Firebug统一，将trace方法添加到console对象中
*
* @param {Function} func 函数引用
*
* @example
function a() {
b();
}
function b() {
c();
}
function c() {
d();
}
function d() {
console.trace();
}
a();
*/
console.trace = function() {
var stack = [],
caller = arguments.callee.caller;
while (caller) {
stack.unshift(getFunctionName(caller));
caller = caller && caller.caller;
}
alert('functions on stack:' + '\n' + stack.join('\n'));
}
};

编写高压缩比的JavaScript代码

西风瘦马 — Sat, 12 Jun 2010 06:59:57 +0000

网站发布前的JavaScript代码压缩是大部分Web前端工程师必做的一项工作，常用的JavaScript压缩工具有Dean Edwards写的JavaScript Compressor、YUI Compressor和Closure Compiler。本文中列出的编码原则是笔者在编程过程中总结出来的十条原则，这些原则适用于一般的JavaScript压缩工具，不适用于Closure Compiler的高级模式（由于Closure Compiler的高级模式过于智能，会用最优的方式重新组织代码结构）。

一次声明多个变量。
在代码块顶部统一声明所有的变量。使用一次var声明多个变量，减少代码使用var的次数。（Closure Complier会自动合并变量声明）
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. (function() {
2. var name;
3. var id = 100;
4. var title;
5. })();
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
//节约了10个字节

(function() {

var name, title, id = 100;

})();
保存多次使用的字符串。
代码中有些字符串会反复多次使用，如css选择器、事件名称、常用css类，将这些字符串保存在变量中，减少在代码中使用明文字符串的次数。（Closure Complier压缩时会用明文字符串替换变量名，这反而使代码字节数增加了。）
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. (function() {
2. //CSS Selector
3. $('div.test span').text('OK');
4. $('div.test span').css('width', 100);
6. //Event names
7. $('#a').bind('click', function(){});
8. $(document).bind('click', function(){});
10. //CSS Class name
11. $('#d1').addClass('hidden');
12. $('#d2').addClass('hidden');
13. })();
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
(function() {

//CSS Selector

var cssSelector = 'div.test span';

$(cssSelector).text('OK');

$(cssSelector).css('width', 100);

//Event names

var click = 'click';

$('#a').bind(click, function(){});

$(document).bind(click, function(){});

//CSS Class name

var hidden = 'hidden';

$('#d1').addClass(hidden);

$('#d2').addClass(hidden);

})();
用YUI Compressor压缩后的代码：
PLAIN TEXT
JAVASCRIPT:
(function () {

var a = "div.test span";

$(a).text("OK");

$(a).css("width", 100);

var b = "click";

$("#a").bind(b, function () {});

$(document).bind(b, function () {});

var c = "hidden";

$("#d1").addClass(c);

$("#d2").addClass(c)

})();
缓存命名空间。
在使用引入了命名空间的Js框架（像YUI、dojo）编程时，命名空间一些的负面作用：一是增加了拼写的复杂度，二是增加了代码的字节长度。缓存层级较深命名空间有利于提高编程效率和减少代码长度。另外该原则也适用于对象的属性、方法，如document.title、window.location.href、Array.prototype.slice、navigator等。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. (function() {
2. var oElement1 = document.getElementById("element1"),
3. oElement2 = document.getElementById("element2");
4. function fnCallback(e) { alert("click"); }
5. YAHOO.util.Event.addListener(oElement1, "click", fnCallback);
6. YAHOO.util.Event.addListener(oElement2, "click", fnCallback);
7. })();
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
(function() {

var oElement1 = document.getElementById("element1"),

oElement2 = document.getElementById("element2"),

addListener = YAHOO.util.Event.addListener;

function fnCallback(e) { alert("click"); }

addListener(oElement1, "click", fnCallback);

addListener(oElement2, "click", fnCallback);

})();
缓存关键字。
压缩工具对JavaScript关键字都不会做处理，对一些常用的关键字（如undefined、true、false、window, document）缓存，有利于提高代码压缩率。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. (function() {
2. var a, b = true;
3. if (typeof a === 'undefined')
4. //do something.
5. })();
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
(function() {

//const

var UNDEFINED,

TRUE = 1,

a,

b = TRUE;

if (a === UNDEFINED)

//do something.

})();
用&&替换if条件判断。
该原则牺牲了代码可读性，Closure Complier可以自动替换，酌情使用。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. if (a) {
2. alert(a);
3. }
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
a && alert(a)
用三元运算符替换if else。
该原则牺牲了代码可读性，Closure Complier可以自动替换，酌情使用。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. if (a) {
2. alert(a);
3. }
4. else {
5. throw('error');
6. }
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
a ? alert(a) : throw('error');
避免使用全局变量。
尽量避免使用全局变量，代码都应该封装在闭包内。除了Closure Complier的高级模式外，其他的压缩工具都不会修改全局变量。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. var title = 'test';
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
(function() {

var title = 'test';

})();
用||为变量赋默认值。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. function setName(name) {
2. if (!name) {
3. this.name = name;
4. }
5. else {
6. this.name = 'Joe';
7. }
8. }
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
function setName(name) {

this.name = name || 'Joe';

}
使用数组和对象的字面量。
不好的编码：

PLAIN TEXT
JAVASCRIPT:
1. a = new Object();
2. b = new Array();
推荐的编码：

PLAIN TEXT
JAVASCRIPT:
a = {};

b = [];
编写自己的通用函数。
常用的函数有：

PLAIN TEXT
JAVASCRIPT:
1. function returnFalse() {
2. return false;
3. }
4. function returnTrue() {
5. return true;
6. }
7. function emptyFunction() {
8. }

第八期Web标准化交流会广州分会

西风瘦马 — Thu, 03 Jun 2010 02:41:17 +0000

上周末参加了广州的第八期Web标准化交流会，会议是在珠江新城的一家印度餐厅举行的。我非常荣幸的作为嘉宾和大家做了一个小时左右的分享，我分享的主题是“网站性能优化”，网站性能优化是一个非常大的范畴，开始做PPT的时候，我写的JavaScript性能优化，但在制作的过程中发现有些内容不属于JavaScript优化的范畴，而属于网站性能优化的范畴，所以就用了这个名字。PPT中是拿出来平时工作用到的几种优化方法做分享。本来林毅要我介绍一下YSlow和Page Speed的用法，可我觉得这两个工具太常用了，也没有什么使用技巧好交流的。也许参加交流会的很多朋友都不是做JavaScript开发的，所以在整个分享过程中没有什么提问，这也是我在选择分享主题时没有考虑的一个地方，下次一定要根据会场听众的知识结构准备演讲主题！

这是交流会用的PPT，感兴趣的同学点击下载PPT文档.

在右键中添加“用vim编辑”项

西风瘦马 — Wed, 26 May 2010 07:20:48 +0000

[方法一]

首先介绍比较简单的方法(VIM Tip #1440)：

1. 打开“开始菜单à运行”，输入“sendto”，然后选择确定，这会打开一个快捷方式文件夹；

2. 右键在此文件夹中的空白位置单击，选择“新建à快捷方式”，增加一个快捷方式；

3. 在“项目位置”一栏中输入下面的内容：

"C:\Program Files\Vim\vim70\gvim.exe" -p --remote-tab-silent "%*"

4. 输入快捷方式的名字为“gVim”；

现在，当你在文件浏览器中右键单击想打开的文件后，选择“发送到àgVim”，就会在gVim中新开一个标签页，打开这个文件，是不是很方便？

[方法二]

下面介绍方法二(VIM Tip #1314)，和方法一相比稍麻烦一点。

如果你已经安装了VIM 7.0，并在安装过程中选择了“安装右键菜单”，那么你需要在注册表删除“HKCR\*\shellex\ContextMenuHandlers\gvim\”主键，听起来很麻烦？

没关系，我们有简单的方法，不需要手动到注册表里删除，只需要卸载VIM 7.0，在卸载的过程中选择删除右键菜单，这样右键菜单就被删除。然后再重新安装VIM 7.0，在安装的过程中，不要再安装右键菜单。

完成这一步之后，把下面的内容保存到一个文件中，取名为vim.reg：

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\*\Shell\Edit with Vim]
@="Edit with &Vim"
[HKEY_CLASSES_ROOT\*\Shell\Edit with Vim\command]
@="\"C:\\Program Files\\Vim\\vim70\\gvim.exe\" -p --remote-tab-silent \"%1\""

接下来用鼠标双击vim.reg文件，把上述内容导入到注册表中。

OK，现在你用鼠标右标想打开的文件，看到“Edit with Vim”项了吗？选中此项，就会在一个新的标签页中打开该文件了。

这种方法虽然比方法一麻烦了一点，不过“Edit with Vim”在右键菜单里排在“发送到”之前，对一个每天数十次上百次使用的功能来说，这一点“偷懒”能省不少事呢！

理解Closure Compiler强加的约束

西风瘦马 — Mon, 05 Apr 2010 12:10:11 +0000

Closure Compiler期望输入的JavaScript符合一定的约束条件。压缩级别越高，约束条件越多。

本文分别介绍每种级别的条件约束。

适用于所有级别的约束

下面两条约束条件适用于Closure Compiler（以下简称“编译器”）的所有级别压缩：

编译器只能识别Ecmascript 262第三版
Ecmascript第三版是Javascript 1.5 和 JScript 5.5的基础，当人们提到“JavaScript”时，通常指的是这个版本的JavaScript。编译器不支持任何版本的JScript或者高于1.5版本的JavaScript。

符合Ecmascript语言规范的浏览器特有特性能够很好的在编译器中工作，例如用合法JavaScript语法创建的ActiveX对象；不符合Ecmascript语言规范的浏览器特有特性会导致编译器错误，例如，Firefox的JavaScript引擎支持const关键字，但JavaScript规范中没有包含这个关键字，所以编译器不支持它。本约束能让编译器检查代码是否兼容所有浏览器。
编译器不保留注释
选择编译器的任何级别压缩都会删除代码中的注释，所以那些依赖特定注释的代码不能用编译器来压缩。

举个例子，因为编译器不会保留代码注释，所以代码中不能直接使用JScript的条件化注释，然而，你可以使用eval()将代码中的条件化注释包起来，编译器可以正确的压缩下面的代码：

PLAIN TEXT
JAVASCRIPT:
1. x = eval("/*@cc_on 2+@*/ 0");
提示：你可以使用@preserve annotation参数在压缩后的代码顶部包含如开源代码授权或者其它重要的文字。

SIMPLE_OPTIMIZATIONS级别的约束

SIMPLE_OPTIMIZATIONS级别压缩会重命名函数参数、局部变量、使用内联函数等方法来减少代码体积。然而，有一些JavaScript结构会中断重命名过程。

使用SIMPLE_OPTIMIZATIONS时请避免使用下面的代码结构：

with
当使用with时，编译器不能区分本地变量和一个同名的对象属性，因此它的名称重命名的所有实例。而且，with语句让代码变得难以阅读。
eval()
编译器不会解析eval()的字符串参数，所以也不会对字符串参数中包含的变量重命名。
字符串表示方式的函数或属性名
编译器会重命名函数名和函数参数名，但不会改变代码中通过字符串引用的函数或者参数，应该避免使用字符串方式表示函数或者参数名。

ADVANCED_OPTIMIZATIONS级别的约束

ADVANCED_OPTIMIZATIONS级别压缩执行和SIMPLE_OPTIMIZATIONS一样的代码转换，并且还添加了对全局属性、变量、函数名的重命名，还会删除无用的代码，因此它有着更为严格的约束。

重命名全局变量、函数和属性的启示

ADVANCED_OPTIMIZATIONS的全局重命名使得下面的做法变得十分危险：

未声明的外部引用
为了正确的重命名全局变量、函数和属性，编译器必须清楚的知道哪些地方引用了这些全局对象。必须告诉编译器哪些符号是定义在压缩代码之外的函数。更多相关内容请看破坏已压缩代码和未压缩代码之间的引用。
在外部代码中使用未导出的内部名字
压缩代码必须导出那些需要在未压缩代码中引用的符号。更多相关内容请看破坏已压缩代码和未压缩代码之间的引用
使用字符串方式引用对象的属性
编译器会在高级压缩模式下重命名属性名，但它不会重命名字符串。

PLAIN TEXT
JAVASCRIPT:
1. var x = { renamed_property: 1 };
2. var y = x.renamed_property; // This is OK.
4. // 'renamed_property' below doesn't exist on x after renaming, so the
5. // following evaluates to false.
6. if ( 'renamed_property' in x ) {}; // BAD
8. // The following also fails:
9. x['renamed_property']; // BAD
如果你想使用引号+字符串的方式来引用一个属性，那么就请一直保持使用这种方式：

PLAIN TEXT
JAVASCRIPT:
1. var x = { 'unrenamed_property': 1 };
2. x['unrenamed_property']; // This is OK.
3. if ( 'unrenamed_property' in x ) {}; // This is OK

使用变量当作全局变量的属性

编译器独立的重命名属性和变量。例如，编译器认为以下两个foo是不同引用，即使它们是等价的。

PLAIN TEXT

JAVASCRIPT:

var foo = {};
window.foo; // BAD

代码被压缩成

PLAIN TEXT

JAVASCRIPT:

var a = {};
window.b;

如果想让变量当作全局变量的属性，请使用下面的方法：

PLAIN TEXT

JAVASCRIPT:

window.foo = {}
window.foo;

消除无用代码所产生的影响

高级压缩模式会删除从未使用过的代码，这就使得下面的做法非常危险：

从压缩代码外部调用函数
当压缩那些仅在外部调用的函数时，编译器认为函数从来没有被调用过，就把函数删除了。为了避免不必要的删除，可以使用下面任何一种方法：
- 将程序中的所有代码一起压缩。
- 导出压缩函数。
更多相关内容请看删除原本想保留的代码
通过迭代构造器或者原型的方式获取函数
为了检测一个函数是否是无用函数，编译器必须查找所有使用该函数的调用。通过循环一个构造器或者原型能够找到并调用这些方法，但编译器不能通过这种方式来识别一个函数。

例如，下面的代码会导致本来需要保留的函数被删除。

PLAIN TEXT
JAVASCRIPT:
1. function Coordinate() {
2. }
3. Coordinate.prototype.initX = function() {
4. this.x = 0;
5. }
6. Coordinate.prototype.initY = function() {
7. this.y = 0;
8. }
9. var coord = new Coordinate();
10. for (method in Coordinate.prototype) {
11. Coordinate.prototype[method].call(coord); // BAD
12. }
编译器不能理解initX()和initY()在循环中调用了，所以删除了这两个方法。

如果把一个函数当做参数传递，编译器能够找到该参数的调用。例如，编译器在使用高级模式压缩下面代码时，不会删除getHello()函数。

PLAIN TEXT
JAVASCRIPT:
1. function alertF(f) {
2. alert(f());
3. }
4. function getHello() {
5. return 'hello';
6. }
7. // The Compiler figures out that this call to alertF also calls getHello().
8. alertF(getHello); // This is OK.

In Advanced mode the Compiler collapses object properties to prepare for name shortening. For example, the Compiler transforms this:

var foo = {};
foo.bar = function (a) { alert(a) };
foo.bar("hello");

into this:

var foo$bar = function (a) { alert(a) };
foo$bar("hello");

This property flattening allows the later renaming pass to rename more efficiently. The Compiler can replace foo$bar with a single character, for example.

扁平化的对象属性的启示

为了重命名对象属性名，高级压缩模式会肢解对象属性，例如，编译器将下面的代码

PLAIN TEXT

JAVASCRIPT:

var foo = {};
foo.bar = function (a) { alert(a) };
foo.bar("hello");

变成

PLAIN TEXT

JAVASCRIPT:

var foo$bar = function (a) { alert(a) };
foo$bar("hello");

扁平化的属性让后来的重命名更有效，编译器用一个字符即可替换foo$bar。

To prevent property flattening from breaking your references to this, only use this within constructors and prototype methods. The meaning of this is unambiguous when you call a constructor with the new keyword, or within a function that is a property of a prototype.

扁平化的属性让下面的做法非常危险：

在构造器和原型方法外使用this
扁平化的属性会改变this关键字在函数中的意义，例如：

PLAIN TEXT
JAVASCRIPT:
1. var foo = {};
2. foo.bar = function (a) { this.bad = a; }; // BAD
3. foo.bar("hello");
压缩后变成：

PLAIN TEXT
JAVASCRIPT:
1. var foo$bar = function (a) { this.bad = a; };
2. foo$bar("hello");
压缩前，foo.bar内的this指向foo，压缩后，this指向全局变量this。像本例这种情况，编译器产生一个告警信息：

PLAIN TEXT
HTML:
1. "WARNING - dangerous use of this in static method foo.bar"
为了防止扁平化的属性打破this的引用，请仅在构造函数和原型方法中使用this。

Closure Compiler三种压缩级别

西风瘦马 — Mon, 05 Apr 2010 07:51:46 +0000

Closure Compiler（以下简称“编译器”）提供三种不同级别的压缩模式。

WHITESPACE_ONLY（去空白优化）

该级别会删除代码中的注释、换行符和其他不必要的空格，输出后的代码在功能上和压缩前的代码完全一样。该压缩级别是三种级别中代码压缩最小的。

SIMPLE_OPTIMIZATIONS（简单优化）

该级别包含WHITESPACE_ONLY级别的所有功能，此外，它还提供用短名称重命名局部变量名和函数参数名的功能。用短名称重命名变量可以让代码体积明显的减少。由于该级别压缩只是对函数内部的局部变量重命名，所以不会影响被压缩代码与其他（未用Closure Compiler压缩的）JavaScript代码之间的相互调用。编译器还提供对JavaScript语法验证的功能，只要该代码不使用字符串名称访问本地变量（例如使用eval()）。

该级别是编译器默认的压缩级别。

ADVANCED_OPTIMIZATIONS（高级优化）

该级别包含SIMPLE_OPTIMIZATIONS级别的所有功能，另外，它还添加了许多入侵性代码转换，从而实现三种级别中最高压缩比。使用该级别压缩代码能超越其它JS代码压缩工具（如YUI Compressor），达到最好的代码压缩效果。

为了使用这种极端压缩方式，ADVANCED_OPTIMIZATIONS要求代码在编写时遵循很强的约定。如果代码没有遵从这些约定，那么使用该级别生成的代码将不能运行。

例如，除非对压缩的代码完成某些确保互操作性的指定步骤，否则使用ADVANCED_OPTIMIZATIONS压缩后的代码有可能不能和未压缩的代码一起运行。如果没有对代码中的外部函数引用和外部属性引用做标识，编译器会对这些引用重命名，从而产生压缩代码和外部代码间名称不一致的错误。

更多相关内容请看使用Closure Compiler高级模式需要注意哪些问题？。

ADVANCED_OPTIMIZATIONS会对代码做以下转换：

更多侵入性的重命名
SIMPLE_OPTIMIZATIONS只会对函数参数和函数内部变量重命名，而ADVANCED_OPTIMIZATIONS还会对全局变量、函数名、属性名重命名。
删除无用代码
ADVANCED_OPTIMIZATIONS会删除未使用的代码。当代码和一个很大的JS库一起压缩时，这个功能特别有用。如果代码只用到类库中的小部分函数，编译器输出时会将类库中除这小部分函数外的其它函数都删除。
内联函数（inlining）
ADVANCED_OPTIMIZATIONS会将一些调用函数替换为函数体内容，这种转换被称为“内联函数”，编译器只会对那些它检查后认为安全的函数做内联函数，另外，它还会对它认为安全的常量或变量使用内联方式。

使用Closure Compiler service压缩代码

西风瘦马 — Wed, 31 Mar 2010 17:39:33 +0000

使用Closure Compiler service是熟悉Closure Compiler压缩最简单的方法。

在新的窗口或Tab中访问Closure Compiler UI：http://closure-compiler.appspot.com
你能看到预制了一个简单的Hello World函数的Closure Compiler UI。
点击“Compile”查看结果：

仅此而已！现在你有了一个函数名和源代码一样但体积小了许多的JavaScript代码。Closure Compiler service通过删除注释、空格和重命名基符号等方法将代码字节数从92减少到55。

为了让你更方便，Closure Compiler service将代码输出为default.js并在服务器上保存一小时。你能够从上面的输出面板中拷贝default.js链接的地址并直接访问这个文件。如果你在一个小时内修改了原始JavaScript代码并重新编译，只要你不修改文本域顶部的@output_file_name参数，那么Closure Compiler service会用编译后的新代码覆盖之前的输出文件。利用这个特性，你就可以在测试环境下，通过在网页上直接引入JS文件的方法，快速测试代码。（请不要在生产环境中直接引用该文件）

注意：为了防止被滥用，Closure Compiler service会限制连续使用代码编译的次数。当你遇上系统提示“Too many compiles performed recently”时，这就意味着你暂时超过了这个限制的次数，请稍后再试。

优化JavaScript文件

Closure Compiler service可以优化一个或多个JavaScript文件。

将http://code.google.com/closure/compiler/samples/tutorial2.js粘贴到“Add a URL”文本框中。这个文件包含未优化的（在DOM树中创建节点的）代码。
点击“Add”。（如果有多个文件，请重复第一步和第二步，直到你添加完所有的文件）
如果需要指定压缩后的文件名，请修改文本域的顶部的@output_file_name参数。默认的输出文件名是default.js，但你可以根据项目实际情况为它取一个更有意义的名字。再次提醒，服务器对输出文件只保留一个小时。
点击“Compile”。

优化后的JavaScript代码显示在下图右手边的面板中。

为了使用优化后的代码，你可以复制代码并粘贴到你的源文件中，或者下载该文件到你电脑的适合目录中，或者在script标签中直接链接到该文件（一小时内有效）。

这仅仅是完成了使用Closure Compiler service UI对简单函数的优化例子。如果你希望使用Closure Compiler优化一个大系统代码，你需要直接和Closure Compiler service API对话。相关的更多内容请看《Closure Compiler Service API》

原文地址：http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

Closure Compiler介绍

西风瘦马 — Wed, 31 Mar 2010 16:34:42 +0000

什么是Closure Compiler？

Closure Compiler是一个让JavaScript下载和运行加速的工具。它是一个真正的JavaScript编译器。它不是将源代码编译成机器码，而是将源代码编译成更优质的JavaScript代码。它解析、分析JavaScript代码，移除无用的代码，使代码最小化。它还会检查代码语法、变量引用、类型，对JavaScript的常见缺点发出告警。

为了便于调试编译后的代码，你可以安装一个基于Firebug插件的Closure分析器（Closure Inspector），安装后就能使用Firebug方便的查看编译器的输出。

Closure Compiler也能和另一个网页性能评估工具——Page Speed结合。

如何使用Closure Compiler？

可以通过以下几种方法：

一个可在命令行下运行的开源Java应用程序。
一个简单的Web应用程序。
一个RESTful API。

能从Closure Compiler中获益什么？

效率。
Closure Compiler会减少JavaScript代码的体积，并让代码更有效。使JS文件加载更快，减少网络带宽消耗。
代码检查。
Closure Compiler会对非法的JavaScript和潜在的危险操作提出告警，有助于你生成低bug、易于维护的代码。

原文地址：http://code.google.com/closure/compiler/