Async и defer не работают согласно документации?

Question

[ldmitriy]

<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');

Порядок выполнения в Firefox Quantum бывает следующим(если обновить страницу несколько раз):
1 2 3 4 здесь относительный порядок выполнения не сохранился с defer
2 1 3 4 здесь относительный порядок выполнения сохранился с defer

В Chrome порядок выполнения:
1 3 4 2 здесь относительный порядок выполнения сохранился с defer

Почему возникают такие разногласия?

Answer 1

[Егор Живагин]

В чём разногласие-то? Скрипт с async вполне может выполниться быстрее первого скрипта с defer

По-сути, вы через defer только одну последовательность контролируете - сначала 1, за ним 3, за ним 4. Скрипт 2 же может выполниться в любой момент

Comments

[ldmitriy]

1 2 3 4 здесь относительный порядок выполнения не сохранился с defer

[Павел Корнилов]

ldmitriy, Егор вам правильно сказал. Поставьте всем скриптам defer - и будет последовательность.

[Kovalsky]

ldmitriy, "Async и defer не работают согласно документации?" - обожаю такие заявления. И какой же пункт из документации не выполняется?)

"относительный порядок выполнения не сохранился с defer" - эмм, а вот я во всех описанных случаях вижу что порядок сохранился: "1 2 3 4", "2 1 3 4", "1 3 4 2".

[ldmitriy]

Никита Полевой, благодаря вам понял, что относительный порядок это необязательно выполнение друг за другом скриптов с defer

тогда еще вопрос: почему если из head async скрипту обратиться к dom элементу, то он увидит dom?
получается async работает после загрузки dom (делал специально задержку)

[Егор Живагин]

ldmitriy, раз на раз не приходится, я думаю.

Смотрите, синхронный скрипт блокирует страницу, соответственно, если он в head - он не увидит DOM.
А асинхронный не блокирует и есть вероятность, что какие-то элементы DOM уже будут видны на момент его исполнения. Но не обязательно. Поэтому лучше в head скрипты не ставить или выполнять после загрузки страницы

[ldmitriy]

Егор Живагин, Я пробовал разные варианту, но все время async видит последний элемент в body.
Можете привести пример, когда async(находящийся в head) не увидит dom элемент?