Почему скрипты выполняются в таком порядке?

Question

[raury]

https://codepen.io/azzztec/pen/yLVZbGQ?editors=1111

Почему выполняется сначала первый скрипт, a потом второй, причем даже если первому добавить атрибут async?
Браузер как то помещает каждый отдельный

Comments

[SagePtr]

Атрибут async применим только к внешним скриптам, загружаемым с сервера. На встроенные не влияет никак.

Answer 1

[Олег]

Браузер сначала скачивает и выполняет первый, а потом - второй. Поменяйте их местами - будет наоборот.

Если оформите так:

<script>
    async function a(){console.log('hi');}
    async function b(){new Promise(resolve => {
         for(let i = 0; i <= 1; i++) {
              if(i === 1) resolve(i)
         }
     }).then((res) => console.log(res));}
b();
a();
</script>

То сперва выполнится функция с console.log('hi'), а только потом функция с console.log(res);

Answer 2

[Алексей Ярков]

Посмотрите на этот пример: https://jsfiddle.net/yarkov_aleksei/01bw3t7s/
Возможно натолкнёт вас на мысль ))

Comments

[Kovalsky]

Ну в таком виде то всё понятно - async никак не влияет на порядок выполнения скриптов потому что они инлайновые, во втором скрипте просто создаётся промис которые ресолвится после синхронного кода. Но почему тогда в первом примере промис в инлайновом скрипте выполняется раньше чем синхронный код во втором?

[Алексей Ярков]

Kovalsky, выше Олег уже описал в чём дело

[Kovalsky]

Алексей Ярков, то есть браузер отслеживает выполнение промисов в инлайновых скриптах? То есть скрипт 2 не начнёт выполняться пока все промисы которые я создал в рамках скрипта 1 не выполнятся?

[Алексей Ярков]

Kovalsky, как мы видим - да, работает так

[Kovalsky]

Алексей Ярков, не-а, всё чуть сложнее. И пока мне не ясно что именно происходит. Как будто отслеживается синхронная активность через несколько тактов после того как скрипт выполнился синхронно

[WbICHA]

Kovalsky, Алексей Ярков, raury я сейчас точно не вспомню, а разбираться подробно мне сейчас лень, но исходя из того, что вижу и исходя из того, что помню, ситуация следующая:

В event loop жса 3 отдельных call stack'a (насчёт первых двух очень не уверен, что всё верно распишу).
Первый стак ─ это стак с интерпритацией кода, который читает код и кладёт комманды в основной стак.
Второй стак (основной) ─ это стак, откуда берутся задачи для выполнения.
Третий стак ─ это стак для таймаутов, интервалов и, по моему, чего-то ещё. И этот стак кладёт задачи в конец основного стака по триггеру.

Так вот, когда браузер читает хтмл и доходит до первого блока жса, он останавливается, в основной стак добавляются задачи, но т.к. все задачи в примере выше синхронные, то каллбек промиса выполняется сразу же после объявления промиса, как и then, из-за синхронности каллбека (то есть интерпритатор прошёлся по всему коду, добавил в основной стек создание промиса и выполнение синхронной функции, синхронная функция синхронно вызвала резолв, что сразу же добавило в основной стак другую синхронную функци с консол логом, которая сразу же и отработала). А пока основной стак содержит задачи, хтмл далее не читается и в основной стак не попадает задача с консол логом из второго скрипт блока.
В то же время пример с таймаутом кладёт задачу в другой стак, который не мешает продолжить читать хтмл (даже если поставить таймер на 0, т.к. минимальное время срабатывания 4 мс) и в итоге в основной стак попадает консол лог ДО того, как сработает таймаут и вызовет резолв.

В деталях мог сильно наложать, но в логике происходящего я уверен.

[Kovalsky]

WbICHA, хмммм, ну да, вроде всё логично и гладенько так. Получается правила выполнения между скриптами и между самостоятельными частями одного скрипта немного разнятся. Хорошо, достойное объяснение) Если вдруг найдутся этому какие-нибудь более менее официальные подтверждения - типа спецификаций - то будет прям очень круто,

Ещё раз спасибо!