九. 精简javascript

基础知识

精简：从javascript代码中移除所有的注释以及不必要的空白字符(空格，换行和制表符)，减少javascript文件的大小。

混淆：和精简一样，会从javascript代码中移除注释和空白，另外也会改写代码。作为改写的一部分，函数和变量的名字将被转换为更短的字符串，所以进一步减少了javascript文件的大小。

混淆的缺点

　　1. 缺陷：混淆过程本身很有可能引入错误。

　　2. 维护：由于混淆会改变javascript符号，因此需要对任何不能改变的符号进行标记，防止混淆器修改它们。

　　3. 调试：经过混淆的代码很难阅读，这使得在产品环境中更加难以调试。

　　相对而言，精简出错的概率会少很多。

一个精简和混淆的示例

 　　这个示例将使用JSMin进行精简，使用yuicompressor进行混淆。原始js如下：

//anthor:teroy
/*
This is for test.
*/
function show(name, day) {
    alert(name);
    alert(day);
}

function test(name, day) {
    var variable = name;
    show(name, day);
}

　　JSMin精简后的代码：

function show(name,day){alert(name);alert(day);}
function test(name,day){var variable=name;show(name,day);}

　　yuicompressor混淆后的代码：

function show(b,a){alert(b);alert(a)}function test(c,a){var b=c;show(c,a)};

　　可见，混淆更能减少js代码的大小。

对精简和混淆进行抉择

　　我们知道启用gzip压缩能减少组件的传送大小，压缩后精简和混淆的差别会进一步减少，综合考虑混淆可能带来的额外的风险，所以优先考虑使用精简。不过，如果对于性能的极致追求，可以使用混淆，但要做足测试，确保混淆不会带来其他的问题。

　　JQuery作为非常流行的前端框架，除了有开发版外，也提供了一个min版本，供实际部署web使用，这个min版本就使用了混淆，最大化地减少代码总量。