Table of Contents
URL: https://www.progressiverobot.com/html-defer-async/
With HTML5, we get two new boolean attributes for the <^><script><^> tag: <^>async<^> and <^>defer<^>. <^>Async<^> allows execution of scripts asynchronously and <^>defer<^> allows execution only after the whole document has been parsed.
These two attributes are a must for increasing speed and performance of websites. They allow the elimination of render-blocking JavaScript where the page would have to load and execute scripts before finishing to render the page. Here's a usage example:
<script defer src="/js/jquery.min.js">
</script>
Async vs Defer
With <^>async<^>, the file gets downloaded asynchronously and then executed as soon as it's downloaded.
With <^>defer<^>, the file gets downloaded asynchronously, but executed only when the document parsing is completed. With <^>defer<^>, scripts will execute in the same order as they are called. This makes defer the attribute of choice when a script depends on another script. For example, if you're using jQuery as well as other scripts that depend on it, you'd use <^>defer<^> on them (jQuery included), making sure to call jQuery before the dependent scripts.
A good strategy is to use <^>async<^> when possible, and then <^>defer<^> when async isn't an option.
👉Note that both attributes don't have any effect on inline scripts.
Browser Support
Can I Use script-async? Data on support for the script-async feature across the major browsers from caniuse.com.
