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,
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.