javascript - Can you use both the async and defer attributes on a HTML script tag?

Question

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?

Answer 1

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:

• async vs defer attributes
• Efficiently load JavaScript with defer and async