Question

In an attempt to load google maps asynchronously I took a look at google’s async page

Essentially I am looking for an alternative to document.write in the API and according to some users on this google group post Using the async version will handle this scenario.

My question is why would this script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>

Be any different than:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);

when the first and second both call the same js file which obviously has the document.write within it? Also why would an updated API want to consider using document.write over append if write generally goes against content security policy?

As a little background info I’m experimenting with Google’s packaged apps and their csp doesn’t allow for document.write.

Answer 1

One of the main advantage of loading scripts (or other resources) asynchronously/dynamically is that it can dramatically speed up your page load times.

From Google’s Developer best practices:

https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

When a browser parses a traditional script tag, it must wait for the
script to download, parse, and execute before rendering any HTML that
comes after it. With an asynchronous script, however, the browser can
continue parsing and rendering HTML that comes after the async script,
without waiting for that script to complete. When a script is loaded
asynchronously, it is fetched as soon as possible, but its execution
is deferred until the browser’s UI thread is not busy doing something
else, such as rendering the web page.

Another trick I use to decide on whether or not to load a script (such as the Google Maps API) asynchronously is, I ask myself, “Is there a chance that the user will not see, benefit or interact with the results of the loaded script?”. If the answer is yes, then I’ll usually tie the loading of the script to some DOM event (such as button click etc).

In other words, if a user has to click a button on my web page to view my Google Map; why bother loading all that extra script if there’s a chance the user will never even see it? Instead, load the script asynchronously when a button is clicked, and then load my map.