《High Performance Web Sites》之 Rule 10 读书笔记

本章的主题是 Minify JavaScript (压缩 JavaScript)。本章认为,不管是单独的 js 文件,还是直接嵌入到 HTML 之间的代码,都应该被 minified。 这里的压缩指的不是 Gzip 压缩,而是从代码本身的字符数下手,进一步减小其被 Gzip 压缩后的尺寸。 Minified JavaScript 被移除的有注释、多余的空白和回车;obfuscation 是另一种选择,压缩率更高,但有可能会造成 bug。 例如,最初的代码:

YAHOO.util.CustomEvent = function(type, oScope, silent, signature) {

this.type = type;

this.scope = oScope || window;

this.silent = silent;

this.signature = signature || YAHOO.util.CustomEvent.LIST;

this.subscribers = [];

if (!this.silent) {

}

var onsubscribeType = “_YUICEOnSubscribe”;

if (type !== onsubscribeType) {

this.subscribeEvent =

new YAHOO.util.CustomEvent(onsubscribeType, this, true);

}

};

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }Minify 以后:

YAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this.

scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.

CustomEvent.LIST;this.subscribers=[];if(!this.silent){}

var onsubscribeType=”_YUICEOnSubscribe”;if(type!==onsubscribeType){this.subscribeEv

ent=new YAHOO.util.CustomEvent(onsubscribeType,this,true);}};

如果选择 obfuscation :

YAHOO.util.CustomEvent=function(_1,_2,_3,_4){

this.type=_1;

this.scope=_2||window;

this.silent=_3;

this.signature=_4||YAHOO.util.CustomEvent.LIST;

this.subscribers=[];

if(!this.silent){

}

var _5=”_YUICEOnSubscribe”;

if(_1!==_5){

this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true);

}

};

本书统计,对于大部分 JavaScript , obfuscation 的压缩比只会高出几个百分点。而且这个差距在使用了 Gzip 压缩后会变得几乎没有,甚至为负。

.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /white-space: pre;/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; } 相比于单纯的 Gzip 压缩(见 rule 4, 能减少约 70% 的大小), minify 压缩对 Gzip 压缩后的增益是比较微不足道的,这就是为什么 Gzip 压缩是 rule 4 而 minify 压缩是 rule 10。然而,随着 js 尺寸的增大,minify 能帮助减小的尺寸就越多。 最后,本章补充了 minify CSS。书中认为,CSS 文件往往没有那么多的注释和空白。真正的压缩还是要借助于去掉无用的 class 等,而这个所需的工具尚需研究(其实现在已经有 CSS 的管理工具可以做到)。因此书中的结论是,CSS 中用 “#606”代替 “#660066”,用 “0” 代替 “0px”等。