В каком порядке загрузятся и выполнятся несколько тегов script на странице?

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

Атрибут async

Скрипты с async загружаются параллельно с парсингом HTML и выполняются сразу после загрузки, как только это становится возможным. Это означает, что порядок выполнения таких скриптов не гарантирован — какой скрипт загрузится быстрее, тот и выполнится первым. Атрибут удобен для независимых скриптов, например аналитики.

Атрибут defer

Скрипты с defer также загружаются параллельно, но выполняются только после полного парсинга HTML, при этом сохраняется порядок их следования в документе. Выполнение происходит до события DOMContentLoaded. Это идеальный вариант для скриптов, которые зависят от DOM или друг от друга.

Пример

<script src="a.js"></script> <!-- выполнится первым, блокируя парсинг -->
<script src="b.js" async></script> <!-- загрузится параллельно, выполнится когда загрузится -->
<script src="c.js" defer></script> <!-- загрузится параллельно, выполнится после парсинга, по порядку -->
<script src="d.js" defer></script> <!-- выполнится после c.js -->

Если скрипты вставлены динамически через JavaScript, то по умолчанию они ведут себя как async, но это можно изменить, установив свойство async = false.

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