Since I started programming, I've always put my
script tags at the bottom of my HTML documents. That way whatever scripts I bring in can see the HTML elements above it and it won't block page content from loading. There are two attributes that change the way
script tags are loaded but I didn't know about them before today.
<script defer src="https://anthonymorris.dev/coolscript.js"></script>
defer tells the browser to execute our script after the document has been parsed but before firing
DOMContentLoaded. This will allow the browser to parse the DOM before running the script.
<script async src="https://anthonymorris.dev/coolscript.js"></script>
async is similar to
defer in that we can parse the DOM before executing the script. However, with
async, the script gets fetched in parallel to the parsing. It will get executed as soon as it's available.