Не понимаю как исполнятся скрипты при использовании async и defer [дубликат]

109

09 сентября 2019, 01:30

На данный вопрос уже ответили:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания 3 ответа
Асинхронная загрузка javascript 2 ответа

В head на сайте прописаны 2 скрипта

<script src="js/alert1.js" defer></script>
<script src="js/alert2.js" defer></script>

оба выводят цифру 1 и 2 соответственно. в alert1 стоит таймер 3 секунды и я полагал, что alert2 не будет выполнен пока alert1 не будет выполнен, т.е. будут сохранять порядок относительно друг друга не смотря на таймер, но по факту выполняется всегда сначала alert2

Более того, я думал, что если скрипты подключать без async и defer, то страница не будет отображена пока они оба не исполнятся, но опять же страница прорисовывается не дожидаясь выполнения скрипта с таймером.

Повторял это и с выводом в консоль и с добавлением на страницу, если есть таймер, то второй файл исполняется перед первым не смотря наличие на defer или отсутствие такового. Так как же мне принудительно заставить alert2 ждать пока не исполнится alert1 сколько бы времени на это не ушло?

Answer 1

setTimeout - это сама по себе асинхронная функция, тут под выполнением скрипта понимается установка интервала, а не его запуск. То есть у вас сначала исполняется код первого файла(устанавливается интервал), потом второго(показывается alert), а асинхронная функция setInterval уже исполнится тогда, когда наступит её время, никак не влияя на исполнение второго скрипта.

То же самое по второму вопросу, всё верно, страница не отрисовывается, пока не исполнится скрипт, но скрипт выполнится тогда, когда таймер установится и дальше пойдет отрисовка страницы, а ф-ция setTimeout асинхронная, соответственно никак не влияет на отрисовку страницы.

Answer 2

Вы должны понять что:

Обычное выполнения загрузки страницы используя просто script без атрибутов async/defer. Грузится всё по очереди (синхронно). Пока скрипт не выполнится - вы не увидите содержимое страницы дальше. Пример:

<script> 
alert('Hello World') 
</script> 
 
<h1>Страница загрузилась</h1>

async - Асинхронная подргрузка, означает что - скрипт не прервёт загрузку страницы и скрипт выполнится когда сам файл указанный в src загрузится. Для примера, ваша страница весит 100 кбайт, скрипт index.js весит 200кб. Соответственно начнётся выполнения index.js как только загрузится этот 200кб скрипт. Работает async только с внешними скриптами.

defer - Таже история что и с async, только будет соблюдаться порядок выполнения скриптов. Также defer применяют если есть зависимости. Второй скрипт зависит от первого, третий от второго и.т.д.

setTimeout - это как-бы асинхронная функция. По факту данная функция просто добавляет выполнения кода в стек вызова, выполнение функции начнётся только после того, как текущий стек вызова завершился/очистился.

Советую почитать про Стек вызовов. Тогда вам станет понятней изложенное выше.