Can I use <script defer> safely now?

Question

From what I'm reading, the defer attribute on <script> is now widely supported but I never see it used or mentioned.

If you don't need to defer inline scripts and don't add scripts dynamically (which cause problems in IE9- and Safari 4-), it seems that you could use it reliably and have scripts run right before DOMContentLoaded in the specified order (which doesn't happen with async)

This is basically what most websites need: run a couple or more external scripts in sequence, on DOMready. For example:

<script defer src='jquery.js'></script>
<script defer src='jquery.some-plugin.js'></script>
<script defer src='my-scripts.js'></script>

Why isn't it widely used? Can I actually use it now?

Answer 1

I did a bit more research and I found that problems with defer don't stop at inline scripts and scripts added dynamically in IE9. There's a long list of problems and inconsistencies with various browsers on the HTML5 Boilerplate GitHub https://github.com/h5bp/lazyweb-requests/issues/42

It's such a shame, I feel that they should have tried improving on defer rather than working on the dubious async (dubious because it's only useful if the scripts don't depend on each other, which is rare for me)

Answer 2

You ask if:

you could use defer reliably and have scripts run right before DOMContentLoaded in the specified order

Unfortunately, I don't see any specs or standards anywhere that say that defer scripts have to be executed in order, so I don't think you can rely on that in any browser. The specs merely say that defer scripts have to be executed after the DOM loads.