Posted on

Confused by JS async for script tag in HTML head

The Google Analytics javascript tag we use in our HTML <head> is:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-3BQYMGHE7E"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());    
    gtag('config', 'G-3BQYMGHE7E');
</script>

Then, there are a handful of gtag() calls elsewhere on the page.

I'm confused by how async works in this context. How does the page know not to call any of the gtag() calls until after the async JS has completed loading? I thought that by adding async, it's non-blocking? Doesn't that mean the rest of the page continues?