本文是Web前端性能优化系列文章中的第七篇，主要讲述内容：精简Javascript代码，以及移出重复脚本。完整教程可查看：Web前端性能优化
一、精简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压缩能减少组件的传送大小，压缩后精简和混淆的差别会进一步减少，综合考虑混淆可能带来的额外的风险，所以优先考虑使用精简。不过，如果对于性能的极致追求，可以使用混淆，但要做足测试，确保混淆不会带来其他的问题。
二、移除重复脚本
出现重复脚本的原因
导致一个脚本的重复又两个主要因素：团队大小和脚本数量。开发一个网站需要极大数量的资源，不同的团队需要构建一个大型web的不同部分，当团队整合和沟通工作没有做足，则容易出现重复脚本的情况。当然脚本数量也是重要的一环，脚本数量越多越容易出现重复脚本的情况。
重复脚本如何损伤性能
在没有缓存的情况下，如果在html中重复链接了相同的脚本，IE7以下(包括IE7)将会产生两次HTTP请求，IE8以上则不会。
除了产生不必要的HTTP请求外，对脚本进行重复执行也会浪费时间，脚本的重复执行在浏览器中都存在。
如何避免重复脚本
1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况，有些是必要的，但有些却不是必要的，所以需要对脚本进行一个良好的组织。
2. 实现脚本管理器函数。
未经允许不得转载：前端撸码笔记 » Web前端性能优化教程07：精简JS 移除重复脚本