How defer attribute should work when loading several js files?

Question

I have the following example:

<script >
    console.log('first');
</script>
<script defer>
    console.log('last');
</script>
<script>
    console.log('second');
</script>

right in the head of my html, and I expect the console to print them in the asc order (first-second-third), however, what I actually see follows the order in which those scripts where placed (first - last - second).

I thought the 'defer' attribute will load the script, but will execute is until the DOM has been completely loaded. Dunno why this is not happening.

Regards,

defer is only for external scripts, not inline code, which doesn't need to load... — dandavis
– dandavis, Commented May 12, 2016 at 23:31
'defer' attribute seems to be supported by only some browsers at this point. I wouldn't recommend using it. — David W Lee
– David W Lee, Commented May 12, 2016 at 23:31
some browsers? caniuse.com/#feat=script-defer says it's about all of them... — dandavis
– dandavis, Commented May 12, 2016 at 23:32

Community · Accepted Answer · 2017-05-23 12:31:39Z

2

The defer attribute applies to scripts that are loaded via a src attribute with a URL, not for inline scripts.

You can see the whole HTML5 specification logic of the defer and async attributes here: Load and execute order of scripts.

If you go through all the HTML5 rules in that above post, you will find that none of them match the situation you have because there is no src attribute on the <script> tag. As such, it hits the last situation:

Otherwise The user agent must immediately execute the script block, even if other scripts are already executing.

The end result is that the defer attribute has no effect on script tags that are inline and do not have a src attribute.

If you want to execute that middle <script> after the other two, then you will need to either change it's order, insert it dynamically at the appropriate time or put the code into a separate script file so you can use a src attribute on the <script> tag.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered May 13, 2016 at 1:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MaximPro Over a year ago

How is it possible: "...execute the script block, even if other scripts are already executing"? How one script can pause another script for his own executing?

d3l33t · Accepted Answer · 2016-05-12 23:34:56Z

0

You may need to use a different solution

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. The defer attribute shouldn't be used on scripts that don't have the src attribute. Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.

I would suggest using a module loader like SystemJS to ensure modules are loaded synchronously. https://github.com/systemjs/systemjs

System.import('./script1.js').then(function(m) {
    System.import('./script2.js').then(function(n) {
        console.log(m, n);
    });
});

answered May 12, 2016 at 23:34

d3l33t

8906 silver badges10 bronze badges

1 Comment

d3l33t Over a year ago

agreed, the first line of that paragraph could be omitted.

Collectives™ on Stack Overflow

How defer attribute should work when loading several js files?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related