两年前,NCZ 在 Extreme JavaScript Compression With YUI Compressor 里提到:

Best Optimization = Identifier Replacement

标志符替换(Identifier Replacement)在 YUI Compressor 里非常重要。
下面用 CC 表示 Closure Compiler, YC 表示 YUI Compressor.

本地文件大小

为了帮助 YC 有效进行标志符替换,下面这段代码 toogle.js:

function toggle(element) {
    if(YAHOO.util.Dom.hasClass(element, 'selected')) {
        YAHOO.util.Dom.removeClass(element, 'selected');
        return false;
    } else {
        YAHOO.util.Dom.addClass(element, 'selected');
        return true;
    }
}

推荐写成 toogle2.js:

function toggle(element) {
    var Dom = YAHOO.util.Dom,
        SELECTED = 'selected',
        ret = false;

    if(Dom.hasClass(element, SELECTED)) {
        Dom.removeClass(element, SELECTED);
    } else {
        Dom.addClass(element, SELECTED);
        ret = true;
    }
    return ret;
}

源码和压缩后的文件大小对比:

很明显,用 YC 压缩的文件最小。这是因为用 CC 压缩时,会将常量 SELECTED = 'selected' 内联回去 toggle2-cc-min.js

function toggle(a){var b=YAHOO.util.Dom,c=false;
if(b.hasClass(a,"selected"))b.removeClass(a,"selected");
else{b.addClass(a,"selected");c=true}return c};

伟大的 gzip

从上面看起来,CC 将常量内联的做法很恼人。好在真实环境下,绝大部分服务器都开启了 gzip 压缩。来看一张图:

建议继续学习:

  1. windows下压缩包在linux解压乱码的解决办法    (阅读:4033)
  2. 启用memcached压缩注意事项    (阅读:3954)
  3. php的echo为什么这么慢    (阅读:3894)
  4. 使用系统命令实现文件的压缩与加密    (阅读:3875)
  5. MySQL从压缩文件恢复数据    (阅读:3579)
  6. 前端性能优化之Html压缩    (阅读:3557)
  7. mod_gzip:Apache的HTTP压缩优化    (阅读:3459)
  8. 项目中对模板和js,css文件进行压缩的处理类    (阅读:3417)
  9. 为什么不压缩 HTML    (阅读:3369)
  10. 开源压缩算法Zopfli介绍    (阅读:3361)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习