Ответ на #ВопросСподвохом от ментора по JavaScript! 1. // В | < codereview />: IT карьера под ключ

Ответ на #ВопросСподвохом от ментора по JavaScript!

1. // Время загрузки скрипта 1s
2. // Время загрузки скрипта 1s
3. // Время загрузки скрипта 1.5s
4. // Время загрузки скрипта 2s
5. // Время загрузки скрипта 3s
6. // Время загрузки скрипта 1.5s
7. // Время загрузки скрипта 0.1s

Поясняю: Когда браузер загружает HTML и доходит до тега , он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами : браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.

async: Порядок загрузки (кто загрузится первым, тот и сработает). Может выполниться до того, как страница полностью загрузится. Такое случается, если скрипты маленькие или хранятся в кэше, а документ достаточно большой.

defer: Порядок документа (как расположены в документе). Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded.

...поэтому сначала исполнится скрипт 1, поскольку он первый в очереди и по скорости загрузки. Далее 2, потому что у него скорость загрузки такая же быстрая  —  1 секунда. Загрузка асинхронно — вне очереди, 3 скрипт загружается за 1,5 секунды и выполняется сразу после загрузки, затем 4 скрипт загружается в порядке очереди и по скорости 2 секунды, последние скрипты — 5, 6, 7. Они загружаются в конце и в порядке очереди размещения в DOM.