Async and defer are not working according to the documentation?

<script src="script1.js" defer></script>
 <script src="script2.js" async></script>
 <script src="script3.js" defer></script>
 <script src="script4.js" defer></script>


script1
console.log('1');
script2
console.log('2');
script3
console.log('3');
script4
console.log('4');

The execution order in Firefox, Quantum is in the following(if you refresh the page a few times):
1 2 3 4 here the relative execution order is not preserved with defer
1 2 3 4 here the relative order of execution is preserved with defer

In Chrome, the order of execution:
1 3 4 2 here the relative order of execution is preserved with defer

Why are there such differences?
June 10th 19 at 15:27
1 answer
June 10th 19 at 15:29
What's the disagreement then? Script async may run faster than the first script defer

In fact, you defer using only one sequence control - first 1, followed by 3, followed by 4. Script 2 can be executed at any time
1 2 3 4 here the relative execution order is not preserved with defer - Janae.Bartoletti91 commented on June 10th 19 at 15:32
Egor you rightly said. Put all defer scripts should do the sequence. - rhianna_Fee commented on June 10th 19 at 15:35
, "Async and defer do not work according to the documentation?" I love these statements. And what is the point of documentation is not executed?)

"relative execution order is not preserved with defer" um, but I in all cases see that the order is preserved: "1 2 3 4", "2 1 3 4", "1 3 4 2". - gustave_Kertzmann52 commented on June 10th 19 at 15:38
thanks to you I realized that the relative order of execution is not necessarily one behind the other scripts with defer

then another question: why, if the head of an async script to access the dom element, he will see the dom?
turns out async work after loading the dom (done on purpose delay) - Janae.Bartoletti91 commented on June 10th 19 at 15:41
time on time is not necessary, I think.

See synchronous script is blocking the page accordingly, if it is in the head - he will not see the DOM.
Asynchronous and does not block and there is a possibility that some DOM elements are already visible at the time of its execution. But not necessarily. Therefore it is better to head the scripts not to put or run after the page has loaded - leonor36 commented on June 10th 19 at 15:44
I tried different option, but all the time the async sees the last element in the body.
Can you give an example, when async(located in head) will not see the dom element? - Janae.Bartoletti91 commented on June 10th 19 at 15:47

Find more questions by tags HTMLJavaScript