如何在不阻塞頁面加載的情況下加載大型 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
});