{"id":2287,"date":"2019-01-14T11:39:59","date_gmt":"2019-01-14T19:39:59","guid":{"rendered":"https:\/\/www.virendrachandak.com\/techtalk\/?p=2287"},"modified":"2019-01-14T11:57:23","modified_gmt":"2019-01-14T19:57:23","slug":"async-vs-defer","status":"publish","type":"post","link":"https:\/\/www.virendrachandak.com\/techtalk\/async-vs-defer\/","title":{"rendered":"How to remove render blocking JavaScript with defer and async"},"content":{"rendered":"

With HTML5 there are 2 new boolean attributes for <script><\/code> tag which indicates to the browser how the script should be evaluated. The 2 attributes are defer<\/code> and async<\/code>. 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.
\n<\/p>\n

If the defer<\/code> 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<\/code> 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 defer<\/code> and async<\/code> 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.<\/p>\n

Here is a quick summary of how the script tag works with and without defer<\/code> and async<\/code> attributes<\/p>\n

<\/p>\n

The defer<\/code> and async<\/code> attributes can be specified together. When both are present the async<\/code> tag take preference over defer<\/code>. For the older browsers that don’t support async<\/code>, but support defer<\/code>, it will fallback to defer<\/code> behavior instead of the default blocking behavior.<\/p>\n

With defer<\/code> attribute the order of execution of the script remain the same, but with async<\/code> the order of execution of the script is not guaranteed. Hence, using defer<\/code> 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<\/code> on those scripts (including jQuery) to make sure that jQuery is loaded before the dependent scripts.<\/p>\n

Both the defer<\/code> and async<\/code> 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.<\/p>\n

\nReference Links<\/strong>:<\/p>\n