前端性能优化 移除重复的 JavaScript 脚本

重复的脚本不仅产生不必要的HTTP请求，而且重复解析执行浪费时间和计算资源。

页面含有重复的脚本文件会影响性能，这可能和你想象的不一样。在对美国前 10 大 Web 站点的评审中，发现只有 2 个站点含有重复脚本。两个主要原因增加了在单一页面中出现重复脚本的几率：团队大小和脚本数量。在这种情况下，重复脚本会创建不必要的 HTTP 请求，执行无用的 JavaScript 代码，而影响页面性能。

IE 会产生不必要的 HTTP 请求，而 Firefox 不会。在 IE 中，如果一个不可缓存的外部脚本被页面引入了两次，它会在页面加载时产生两个 HTTP 请求。即使脚本是可缓存的，在用户重新加载页面时也会产生额外的 HTTP 请求。

除了产生没有意义的 HTTP 请求之外，多次执行脚本也会浪费时间。因为无论脚本是否可缓存，在主流浏览器中都会执行冗余的 JavaScript 代码。

避免不小心把相同脚本引入两次的一种方法就是在模板系统中实现脚本管理模块。典型的脚本引入方法就是在 HTML 页面中用 SCRIPT 标签：

<script type="text/javascript" src="menu_1.0.17.js"></script>

升级为以下这种 PHP 动态函数 insertScript() 进行加载：

 <?php insertScript("menu.js") ?>

这样在 insertScript() 里执行确保加载的唯一性，或者设置好文件版本等操作。