В первые дни разработки веб-сайтов я подхватил немного народной мудрости, которая для кода вроде этого
<script src=".../program1.js"></script>
<script src=".../program2.js"></script>
браузер будет останавливаться, загружать javascript, компилировать его, выполнять, переходить к следующему тегу script и повторять. Таким образом, браузер будет работать через весь javascript на странице и рассматривать его как одну линейную программу.
Однако в храбром новом современном javascript мире мы имеем асинхронную загрузку через атрибут async
<script src=".../program1.js" async></script>
<script src=".../program2.js" async></script>
Я понимаю, что это хорошо, потому что теперь браузеру не нужно останавливаться, загружать script и выполнять его. Вместо этого он начинает загрузку script, но будет продолжать разбирать DOM. то есть веб-страница больше не блокируется, ожидая загрузки javascript. (если это не так, я буду благодарен за исправление).
Однако, что менее ясно (и сложнее проверить), как эти две программы взаимодействуют. Кажется, что они работают в одном и том же разделяемом пространстве (т.е. Javascript по-прежнему, с точки зрения пользователя, однопоточен с двумя (глобальными, функциями) областями). Тем не менее, какой порядок они выполняют, в документации, которую я прочитал, явно не определен.
Я прочитал статью MDN в Concurrency model и Event Loop. Хотя он интересен и полезен, он не совсем отвечает на мой вопрос. Из того, что я собираю, когда браузер загружает program1.js или program2.js, javascript добавит сообщение в очередь событий, и это сообщение будет обработано, поскольку механизм javascript запускается через цикл событий.
Что мне не хватает - что говорит это сообщение? Это одно сообщение для каждой программы, которое говорит "компилировать и выполнять весь этот код javascript"? Или каждая программа создает несколько сообщений - на мой взгляд, которые могут выглядеть примерно как
- Сообщение 1: Извлеките все функции из этой программы и скомпилируйте их
- Сообщение 2: Извлеките из этой программы все операторы и выражения в глобальной области.
- Сообщение 3-n: Добавить каждую инструкцию и выражение как отдельное сообщение очереди для последующей обработки.
И что происходит, когда браузер находится в середине обработки program1.js, но заканчивает загрузку program2.js? Возможно ли, что выполнение инструкций из каждой программы будет чередоваться?
Я понимаю, что в качестве разработчика клиента лучшая практика здесь заключается в том, чтобы не полагаться на глобальную область и писать каждую программу и функцию, поэтому не имеет значения, как она называется, и не блокирует код других людей. Тем не менее, я трачу много времени на работу с кодом других людей, некоторые из которых не очень хорошо себя ведут. Я хотел бы понять, что происходит за кулисами, или если это поведение, которое undefined и, независимо от двигателя, и не будет выстраиваться между реализациями.