A while back when Brandon was working on making Gauges faster, we got in a discussion about adding
defer to your script tags. I pointed out that html5 actually defines another attribute:
async. That’s what Gauges uses today.
What does it do and why are they using it? From the html5 spec (emphasis mine):
There are three possible modes that can be selected using these attributes. If the
asyncattribute is present, then the script will be executed asynchronously, as soon as it is available. If the
asyncattribute is not present but the
deferattribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
Excellent! This means we can tell (modern and future browsers) to do something asynchronously right inline:
or if html5’s boolean attribute style scares you:
With that, the code will immediately begin loading while the rest of your page continues loading. No more blocking!
Dave Walsh has a good summary of
async where he comments:
asyncattribute to 90% of your SCRIPT elements.
We already use jQuery to asynchronously load scripts, but that’s no reason not to use
async too. Try it out!