Can I use <script defer> safely now?

Asked 27/12, 2013 at 12:6 Answered 14/12, 2016 at 13:19

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?

Indecorum answered 27/12, 2013 at 12:6 Comment(6)

Because most of us will include the script right before the </body> tag and avoid all these issues ? – Acidulous 27/12, 2013 at 12:7

That's what I'm arguing, there are no issues if you just replace "scripts before </body>" with "defer scripts in <head>". They even start downloading sooner, so there's an advantage in using defer – Indecorum 27/12, 2013 at 12:9

take a look for this article: https://mcmap.net/q/57783/-defer-attribute-chrome – Cholecyst 27/12, 2013 at 12:19

It isn't widely used for the same reason you mentioned in the first line: is now widely supported. Because, before now, it wasn't widely supported. Yes, it is a good idea to use defer for deferred execution as compared to start downloading just before the body ends! – Clos 27/12, 2013 at 12:24

I'm voting to re-open as this clearly can have an objective answer. caniuse.com's declarations can objectively be proved and disproved, and it's the same with answers here. – Amaranthaceous 20/1, 2016 at 11:42

Take a look at: #32413779 and FF bug related to implementation of defer: bugzilla.mozilla.org/show_bug.cgi?id=1212696 – Beguile 1/3, 2017 at 8:8

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)

Indecorum answered 27/12, 2013 at 16:25 Comment(2)

At least there are JavaScript libraries out there that support asynchronous loading of scripts with dependencies (though if the scripts weren't written with one of those libraries in mind, it can take a bit of external setup/configuration to get things to work right). – Messily 27/12, 2013 at 18:28

defer never had a meaning for inline scripts (its presence is even forbidden on them), so that cannot be considered a "problem" – Heavyarmed 27/12, 2013 at 18:47

-1

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.

Amaranthaceous answered 14/12, 2016 at 13:19 Comment(0)

Recommended topics

Hot tags