Javascript inline scripts and defer scripts order of execution

Question

I have a question about order of execution for mixed script type.

Here is my code :

    <script>
        if(document.documentMode) {

            const firstScriptInDOM = document.getElementsByTagName('script')[0];
            const polyfill = document.createElement('script');
            polyfill.src = "/static/js/polyfills/polyfills.js";
            firstScriptInDOM.parentNode.insertBefore(polyfill, firstScriptInDOM);
        }
    </script>

    <script src="static/js/lib1.js" defer></script>
    <script src="static/js/lib2.js" defer></script>
    <script src="static/js/lib3.js" defer></script>
    <script src="static/js/myOwnScriptFile.js" defer></script>

The first script tag's purpose is to load polyfills for IE if the browser is IE. Then it should load this other scripts and execute my code.

My question is : Will the polyfills script block execution of the defered scripts ?

Thanks a lot for you time !

Question : your first script : <script> if(document.documentMode) { const firstScriptInDOM = document.getElementsByTagName('script')[0]; const polyfill = document.createElement('script'); polyfill.src = "/static/js/polyfills/polyfills.js"; firstScriptInDOM.parentNode.insertBefore(polyfill, firstScriptInDOM); } </script> Is the source code of myOwnScriptFile.js script ? — Inazo
– Inazo, Commented Aug 22, 2018 at 8:48
No, it is not. My first script loads only polyfills for IE if needed. myOwnScriptFile.js is my main script with the code for all browsers (including IE which has been polyfilled if needed). — Mourtazag
– Mourtazag, Commented Aug 22, 2018 at 8:49
Interesting... Might that be random? Scripts inserted through DOM manips are loaded asynchronously. So if it takes less time to load it than to parse the DOM could they fire before? ... Anyway, don't rely on this, there are more chances that they won't have been executed. Solutions are: load the polyfill for everyone, or load all the scripts from DOM manips (you'll be able to wait for polyfills.onload if needed) — Kaiido
– Kaiido, Commented Aug 22, 2018 at 8:53
Interesting Kaiido. I will do some tests. I didn't want to load an extra file for browser which doesn't need it. :( — Mourtazag
– Mourtazag, Commented Aug 22, 2018 at 8:59

Ashish · Accepted Answer · 2018-08-22 09:32:49Z

1

scripts load synchronously unless specified to load asynchronously using the async attribute, what the defer attribute does is that it loads the script only after DOM is loaded. If you append a script dynamically, it will load asynchronously.

In you scenario,

This should be the chain of execution:

check polyfill script executes
lib1
lib2
lib3
myOwnScriptFile
polyfills (downloaded only after the parser has finished execution)

To ensure all your scripts load, in the order you want them too, you could dynamically load all scripts with something like :

check if the browser is IE:

IF IE 
 load polyfills, and load other scripts in the onload event of the polyfills script.
ELSE 
 load all other scripts

edited Aug 22, 2018 at 9:32

answered Aug 22, 2018 at 9:15

Ashish

4095 silver badges18 bronze badges

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

3 Comments

Mourtazag Over a year ago

Oh, that's not good then for what I want to do. So is there a solution to avoid modern browsers to load polyfills.js ?

Ashish Over a year ago

@Mourtazag added a basic a idea to the answer itself. :)

Mourtazag Over a year ago

Thanks a lot ! I'll dig into it. : )

Oram · Accepted Answer · 2018-08-22 10:47:01Z

1

The script which is not deferred will run when it is parsed. The other scripts will be executed after the document has been parsed in the order in which they appear in the document, before DOMContentLoaded is fired.

Update

Kaiido is correct and I was a wrong in my conclusion. The part of your script that adds the polyfill will run first but the script it loads will run asynchronously, as soon as it downloads. You can see more details here.

You can try using document.write instead.

edited Aug 22, 2018 at 10:47

answered Aug 22, 2018 at 8:51

Oram

1,7012 gold badges19 silver badges24 bronze badges

2 Comments

Mourtazag Over a year ago

Thanks for your answer. What do you think about @Kaiido 's comment above ?

Mourtazag Over a year ago

Thanks ! I'll look at document.write to see if I can get it work.

Collectives™ on Stack Overflow

Javascript inline scripts and defer scripts order of execution

2 Answers 2

3 Comments

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related