加载 JS 文件两次但只解析一次对性能有何影响？答案

【问题标题】：What is the performance hit for loading a JS file twice, but only parsing it once?加载 JS 文件两次但只解析一次对性能有何影响？
【发布时间】：2012-12-05 04:30:47
【问题描述】：

我正在处理经常多次加载相同外部 JavaScript 文件的遗留代码。

我正在尝试确定是否需要找到所有加载 .js 文件的位置，并阻止它们重新加载该文件（如果该文件已存在），或者我是否可以侥幸逃脱只需修改所有.js 文件以防止它们被解析（如果它们已经被解析）。

例如。假设我有一个名为 utils.js 的 .js 文件。

if(!utils_Loaded){
   var utils_Loaded = true;
   var utils = function() {

     //javasript code here

   };
} else {
   console.log("utils.js was already loaded, so we skipped parsing it again.");
}

但是，还有大约 500 个其他包含仍在加载 utils.js，因此实际上，HTML 如下所示：

<script src="/utils.js"></script> ...
<script src="/utils.js"></script> ...
<script src="/utils.js"></script> ...
<script src="/utils.js"></script> ...
<script src="/utils.js"></script> ...
<script src="/utils.js"></script> (... etc)

所以我的问题是，现代浏览器将如何处理多重加载？我假设浏览器会缓存文件，但它仍然必须再次将其拉入内存，这可能很小，直到成倍增加很多倍，因为这发生在代码中无处不在，数百个文件都被多次加载。

在包含点检查会更好吗？

<script>if(!utils_Loaded){$.getScript("utils.js");}</script> ...
<script>if(!utils_Loaded){$.getScript("utils.js");}</script> ...
<script>if(!utils_Loaded){$.getScript("utils.js");}</script> ...
<script>if(!utils_Loaded){$.getScript("utils.js");}</script> ...
<script>if(!utils_Loaded){$.getScript("utils.js");}</script> ...
<script>if(!utils_Loaded){$.getScript("utils.js");}</script> (...etc)

【问题讨论】：

相当低。这些请求都应该来自缓存。
$.getScript 很不一样，它加载脚本没有缓存和异步！
浏览器将从缓存中提取文件，但是，除非它们足够聪明地意识到文件的执行不会对程序产生副作用，否则它们必须重新执行文件。考虑到文件至少会声明一个函数/变量，它会有副作用并且必须执行。
require.js 在这里有什么帮助吗？

标签： javascript performance browser include

【解决方案1】：

可能需要一些时间，但最好的办法是将其清理干净。您可以使用页面加载 utils.js 一次（如果它被使用的次数与您所说的一样多，那么不这样做似乎很愚蠢）。您还可以将加载抽象到一个函数中，以帮助集中您的 utils_loaded 检查。

【讨论】：

【解决方案2】：

只要你的网络服务器使用 Not-modified 响应，就会有一堆不必要的 GET 请求...

顺便说一句，如果您使用的是 ASP/PHP 或同等版本，我建议将该行放入文件中并替换为 include_once('tagline.js');

编辑：有趣的旁注，做了一些测试，似乎 chrome(23) 和 Internet Explorer(9) 和 Opera(12.11) 中存在一个错误，使它只加载一次；即使使用 HTTP 标头“Cache-Control: no-cache, must-revalidate”：p（但不是 firefox）

【讨论】：