如何在不阻塞页面加载的情况下加载大型 Javascript 文件

Question

我在我的应用程序中使用谷歌地图 API 并且有大约 300 MB 的坐标数据将用于显示功能。 我正在尝试在客户端第一次使用它时加快初始页面加载速度（数据将被下载，之后会被缓存，因此速度会更快）。

坐标数据位于 JSON 格式的几个 javascript 文件中，我正在使用 HTML 标签加载 js 文件，如下所示：

<script type="text/javascript" src="JavaScript/file1.js" async></script>
<script type="text/javascript" src="JavaScript/file2.js" async></script>
...
<script type="text/javascript" src="JavaScript/map.js" async></script>

每个“filex.js”文件只有一个 var，其值为 JSON 格式的坐标。 有几个是因为浏览器似乎不喜欢缓存超过一定大小的 js 文件。 map.js 脚本使用这些脚本添加到谷歌地图 api，如下所示：

layer.addGeoJson(file1var);
layer.addGeoJson(file2var);
...etc.

问题是下载大约 300 MB 的脚本会阻止页面加载，并且页面加载大约需要一分钟。 在它们被缓存之后，下一次一切都会像您期望的那样快速。

我想要做的是允许网页加载并拥有所有功能，除了下载带有 JSON 数据的那些 js 文件。 我希望这些仅在页面的 rest 已经加载后才在后台下载，因此用户基本上看不到它，而不是等待一分钟。

你可以看到我已经尝试在标签中使用'async'和'defer'指令，但他们没有做我想要的（他们仍然阻止页面加载的rest）。

有没有办法让那些js文件下载而不阻塞页面加载的rest？

或者，我可以从 HTML 中删除这些引用，而是让 map.js 脚本在需要它们时请求它们吗？ 如果它需要在第一次需要它们时下载它们就可以了，但我仍然需要缓存它们，以便下次它们更快。

Answer 1

我想出了什么对我有用。 我注意到在 Chrome 的开发工具网络选项卡中，它显示了“DOMContentLoaded”事件发生的时间，并且一直等到我的文件全部下载完毕。 搜索后我发现这篇文章帮助我找到了答案。

但是，“DOMContentLoaded”事件还为时过早，在文件全部下载之前，页面仍然无法完全加载。

我能够通过侦听页面的“onload”事件来使其工作，该事件在所有内容加载后触发并添加如下脚本：

window.addEventListener('load', (event) => {
  let script = document.createElement('script');
  script.src = "JavaScript/huc8-0.js";
  script.async = true;
  document.body.appendChild(script);
  // copy/paste the above 4 lines to add each of the files I needed
});