javascript开发经验之——压缩

现在的RIA（Rich Internet applications)越来越流行，Javascript在这中间起到了不可忽视的作用，这个世界上，完全不用JS的网站应该很少了，一些用户体验好的网站，大多采用了Flash或者JS，而以JS居多。比如像Qunar，就是以Javascript + Ajax为主的网站，前台页面主要是HTML，后台生成JSON数据。再比如说Ajax最早大规模应用者Google，我们常用的GMail也好，Google Calendar也好，Google Docs，Google Map，都大量采用了Javascript。还有例如Yahoo等等。

随着大规模地采用Javascript，问题就来了，我们知道，JS是一种解析性语言，代码都是明文的，是没有经过编译的源代码，这样就造成了JS过大的问题，一个用户体验丰富的页面加上框架，基本上JS就可以轻松超过200K。在欧美日韩等网速比较快的地方，这点算不了什么，而在国内的话，如果JS就有200K，再加上图片之类的，估计得上M了。这样一下来，网速将会变慢，而如果速度变慢，RIA就没有什么意义了，RIA的本意就是提高用户体验与合理利用客户端多余的资源。

怎么办？还好，我们还有招，正因为JS是文本，我们就可以采用压缩的方式，基本上我们有两种解决方案，第一种是服务器级别的，使用Gzip对JS进行压缩，这种方案要求客户浏览器支持Gzip，并且你对服务器有启用Gzip的权限，当然，目前很多虚拟主机都开启了Gzip，浏览器也是99%支持Gzip。实际上，还有第二方案，是JS文件级的，就是直接对JS进行编码处理，术语叫混淆，当然你也可以叫压缩。

JS的压缩有两个层次，第一个层次是去掉注释，换行，空格，这样所减小的体积根据你的注释多少有关，基本上不能叫压缩。第二个层次要高级一些，那就是利用工具将JS进行混淆，混淆是一种扫描源代码的过程，这个过程会把字段和函数本来的名字修改为经过编码的、毫无意义的名字，以此来防止他人了解源代码的目的和内部结构。其实我更关注它的压缩功能，因为混淆会把函数和变量的名称改成短名称，还可以进行base64编码，所以混淆后的代码一般可以是原来代码的1/3左右，甚至更少。我们拿大名鼎鼎的jQuery 1.3.2举例，没有经过任何处理包含注释的情况下，jQuery是122k，经过去注释空格的处理后是50多k，经过压缩后是24k，而再又经过gzip压缩之后，就变成19k，从122k到19k，差别就是这么大，当然其中一个比较重要的原因，是因为jquery中包含大量的注释。

说来压缩，我们在开发中要注意一些问题，新手甚至是有多年开发的老后，在写JS上，也会忽略一些问题，如果我们没有养成一个良好的习惯，那我们将大量的JS压缩，将会出现大量让我们崩溃的错误，你很难发现错误在什么地方。具体来说，主要需要注意以下方面：

else后面一定要加上大括号，这一点很重要，正常的情况下，我们写代码可以这样写
```
if(a == true)
  alert('a');
else
 alert('b');
```
有什么问题吗？代码完全没有问题，所有浏览器都可以正常运行，但如果要去空格和换行，问题就来了，因为这段代码将变为：
```
if(a == true)alert('a');elsealert('b');
```
看到问题的所在没有？如果你不使用花括号将else后面的代码括起来，else将与后面的代码连到一起，导致错误的发生。现在我们写JS代码，完全可以使用完整的花括号，因为写完之后我们可以使用压缩工具进行，不用考虑注释太多会影响大小。
如果函数内有嵌套函数，一定要在函数结尾后加上分号。我之前也忽略了这个问题，导致了很多的错误，后来不得不一段一段代码进行压缩以查看是什么地方出来问题，把我给累的不行。
所以变量后面都应该加上分号，不使用换行代替分号，这个不用我说了，应该大家都知道

如果你用了prototype，一定要记得在函数后面加上分号，例如：

String.prototype.format = function() {
    var arg = arguments;
    return this.replace(/\{(\d+)\}/g, function(i, m) {
        return arg[m];
    });
};

上面这个代码你是需要加上分号结尾的，而正常的function则不必，例如：

function test(){
alert('a');
}

这段代码可以正常运行。

总之一句话，注释不能少，括号都要有，结尾多分号，估计错不了

注意：本文为我的独立博客镜像博客，自发表不再更新，原文可能随时被更新，敬请访问原文。同时，请大家不要在此评论，如果有什么看法，请点击这里：http://iove.net/1705/

本文来自http://iove.net，欢迎转载，转载敬请保留相关链接，否则视为侵权，原文链接：http://iove.net/1705/

posted on 2010-03-11 11:14 Conis 阅读(243) 评论(0) 收藏举报