Menu
I would like to load in the following JavaScript code using both defer and async:
<script defer async src="/js/somescript.js"></script>
Since defer is supported by Internet Explorer 5.5+, as you can see at CanIUse.com, I would like to gracefully fallback to using defer if async is not available. Async I think is better to use when it is available but its not supported until Internet Explorer 10.
My question is therefore is the above code valid HTML? If not, is it possible to create this situation using JavaScript of gracefully falling back to using defer on a script when async is not available?
738
Both async and defer allows the browser load and parse the JavaScript file separately, so the DOM can be shown immediately. This allows users to see content faster. Your browser does not support the video tag.
Async and defer are basically two boolean attributes for the <script> tag. Async allows the execution of scripts asynchronously as soon as they're downloaded. Defer allows execution only after the whole document has been parsed. Both attributes don't have any effect on inline scripts.
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.
In practice, defer is used for scripts that need the whole DOM and/or their relative execution order is important. And async is used for independent scripts, like counters or ads. And their relative execution order does not matter.
From the specification: https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async
The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.
(Check the reference link below to see a visual representation of the differences between normal scripts and scripts with defer and async)
References:
166
The question is, what would you expect it to do? If both async and defer are present I would expect the script to be deferred and only executed after DOMContentLoaded when the browser is idle, but if I'm reading the specification right it looks like defer is ignored if async is set and the script is loaded asynchronously, so will execute as soon as it's available, which may well be before DOMContentLoaded and may block other resources.
There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute 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.
https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
