With HTML5 there are 2 new boolean attributes for
<script> tag which indicates to the browser how the script should be evaluated. The 2 attributes are
async. Using these attributes can help improve the page load time by downloading the script in parallel when the page is being parsed and then executing it either immediately or at the end of page parsing.
defer attribute is present, then the script is fetched in parallel to the parsing of the page but will be evaluated only after the page is parsed. When
async attribute is present, then the script is fetched in parallel to the parsing of the page and it will be evaluated as soon as the script is available (potentially before the page is parsed completely). If both
async attributes are not present then the script is fetched and evaluated immediately, and hence blocking the parsing of the page while the script is being downloaded and evaluated.
Here is a quick summary of how the script tag works with and without
async attributes can be specified together. When both are present the
async tag take preference over
defer. For the older browsers that don’t support
async, but support
defer, it will fallback to
defer behavior instead of the default blocking behavior.
defer attribute the order of execution of the script remain the same, but with
async the order of execution of the script is not guaranteed. Hence, using
defer is best for the cases where a script depends on another. e.g. if you have jQuery and a script that depends on it, then you should use
defer on those scripts (including jQuery) to make sure that jQuery is loaded before the dependent scripts.
async parameters should be specified only if using the src tag. If used without the source tag (on inline scripts) they won’t affect the execution of the scripts.