According to the official W3 spec, async and defer may be specified together, for example, like so:
<script src="myscript.js" async defer></script>
In this case, defer will serve as a fallback in older browsers that do not support async, while in modern browsers (that do support async), async will have precedence over defer. In either case, only one of the strategies will be used.
Although, both async and defer download scripts in a non-blocking way, note that the former executes the script as soon as it's downloaded while the latter executes it when the page has finished parsing (before DOMContentLoaded event is fired).
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.