How to load a large Javascript file without blocking the page load

Question

I am using the Google Maps API in my app and have about 300 MB of coordinate data it will use to show features. I am trying to speed up the initial page load the first time a client uses it (the data will be downloaded, after that it's cached so will be faster).

The coordinate data is in several javascript files in JSON format and I am loading the js files using the HTML tag like so:

<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>

Each of the "filex.js" files just has a var whose value is the JSON formatted coordinates. There are several because it appears browsers don't like to cache a js file over a certain size. The map.js script uses those to add to the google maps api like this:

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

The problem is the download of those ~300 MB of scripts blocks the page from loading and it takes about a minute for the page to load. After they are cached it's all speedy the next time as you'd expect.

What I want to do is allow the webpage to load and have everything functional EXCEPT for downloading those js files with the JSON data. I would like those to only be downloaded in the background after the rest of the page has already loaded so it's basically invisible to the user rather than a minute wait.

You can see I have tried using the 'async' and 'defer' directives in the tag, but they did not do what I wanted (they still block the rest of the page loading).

Is there a way to allow those js files to download without blocking the rest of the page loading?

Alternatively, can I remove those references from the HTML and instead have the map.js script request them when it needs them? It would be OK if it needed to download them the first time it needs them, but I would still need them to be cached so they are faster next time.

Answer 1

I figured out what worked for me. I noticed in Chrome's dev tools network tab it showed when the 'DOMContentLoaded' event happened and it was waiting until after my files had all downloaded. Searching on that I found this post which helped me arrive at the answer.

However, the 'DOMContentLoaded' event was still too early and the page was still blocked from fully loading until the files were all downloaded.

I was able to make it work by instead listening for the page's 'onload' event which fires after everything is loaded and adding the scripts like this:

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
});