动态加载 javascript 文件并确保它们被缓存答案

【问题标题】：Dynamically load javascript files and make sure they are cached动态加载 javascript 文件并确保它们被缓存
【发布时间】：2015-06-21 20:42:28
【问题描述】：

我想在页面加载后加载我的 javascript 文件并确保它们被缓存。

这个问题已经被问了很多，但他们都建议用 jQuery ($.getScript) 加载它，而我要加载的文件之一是 jQuery 本身，我不能使用 jQuery。有一些选项，例如：

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = false;  //as I'm going to execute some functions 
                               //after this I want to make sure that the 
                               //script is fully loaded
     newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();

但我不确定它们是否被缓存。并且有没有办法在动态加载脚本完成时触发事件？

【问题讨论】：

你为什么要这么做？
我只有一个 javascript 文件，因为我正在使用捆绑和缩小。但由于 javascript 的大小很大，我不希望它的加载时间添加到页面加载时间
那么相反，您要……仍然通过立即同步加载将其加载时间添加到页面的加载时间？（我什至不知道设置 async = false 是否可以使其同步，但如果是这样，那似乎就失去了意义。）
不，我想等待页面完全加载，并在页面完全加载后加载脚本，因为在此之前不需要这些脚本：我的捆绑脚本、google 加上一个脚本和广告脚本。
所以在</body> 之前放一个<script src="…"></script>？

标签： javascript

【解决方案1】：

您可以通过打开浏览器的开发者工具的网络选项卡再次加载您的页面来轻松检查它们是否被缓存。您可以通过脚本加载的方式来判断文件是否被缓存。

顺便说一句，他们应该是。你基本上是通过 JavaScript 插入一个脚本标签，然后加载脚本，就像标签已经在页面中一样。

如果您让它异步加载，您可以将onload 事件附加到脚本标签，该事件将在脚本加载后立即触发。这应该适用于任何现代浏览器，包括标准模式下的 IE9+。如果您需要对 IE8 的支持，您将不得不做一些额外的工作，这也是 $.getScript() 所做的。可以在问题 'onload' handler for script tag in Internet Explorer 中找到有关该 jQuery 功能的深入讨论以及替代代码 sn-ps。

【讨论】：

我将异步设置为 ture，有没有办法在加载完成后触发事件？
请查看this question。答案提供了来自 jQuery 的更改代码，该代码提供了这个 onload 事件，就像$.getScript() 一样。
我已经添加了它，有点细微差别。似乎只有 IE8 和更早版本才需要“额外”代码。