Web前端性能提升指南：简化JavaScript与消除重复脚本

本文属于Web前端性能优化系列的第七篇，专注于简化Javascript代码和清除重复脚本的技术。完整教程请访问：Web前端性能优化

一、Javascript的简化

简化Javascript代码涉及去除所有注释和非必需的空白字符（如空格、换行和制表符），以减小文件体积，从而加快页面加载速度。

混淆技术不仅去除了注释和空白，还通过重命名函数和变量来进一步压缩代码，使其体积更小。

混淆的潜在问题

• 混淆过程中可能会引入错误。


• 混淆改变了代码中的符号，需要特别标注不可更改的部分，增加了维护难度。


• 混淆后的代码难以阅读，增加了生产环境中调试的复杂性。

相比之下，单纯的简化较少引发错误。

简化与混淆实例

本例使用JSMin进行简化，使用yuicompressor进行混淆。原始Javascript代码如下：

//author: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)};

可以看出，混淆后的代码体积明显更小。

在启用gzip压缩的情况下，简化和混淆的效果差异会进一步缩小。考虑到混淆可能带来的风险，通常推荐优先使用简化。然而，对于追求极致性能的应用，可以在充分测试的前提下采用混淆技术。

例如，JQuery这样的流行前端库，除了提供开发者友好的开发版之外，还提供了min版本，后者经过混淆处理，以最小化文件大小。

二、消除重复脚本

重复脚本的成因

重复脚本的主要原因包括团队规模大和脚本数量多。大型项目往往由多个团队协作完成，若团队间沟通不足，很容易导致脚本重复。此外，脚本数量越多，重复的可能性越大。

重复脚本对性能的影响

未缓存时，HTML中重复引用同一脚本，在IE7及以下版本中会导致多次HTTP请求，而IE8及以上版本则不会。此外，重复执行相同的脚本会消耗额外的时间，影响页面加载速度。

避免重复脚本的策略

1. 建立良好的脚本组织结构，确保不同脚本不会无意中包含相同的内容。


2. 开发脚本管理器函数，自动检测并排除重复脚本的加载。

来源：51CTO