В чем заключается разница в работе режимов (async, defer или type) тега <script>?

<script> без атрибутов

• HTML парсится до тега <script>.
• Парсинг HTML приостанавливается при обнаружении тега <script>.
• Происходит загрузка скрипта.
• Происходит выполнение скрипта.
• Парсинг HTML возобновляется после выполнения скрипта.

<script async>

• HTML парсится одновременно с загрузкой скрипта.
• Парсинг HTML приостанавливается при завершении загрузки скрипта.
• Происходит выполнение скрипта.
• Парсинг HTML возобновляется بعد выполнения скрипта.
• Порядок выполнения скриптов с async не гарантируется, зависит от скорости их загрузки.

<script defer>

• HTML парсится одновременно с загрузкой скрипта.
• Скрипт выполняется после завершения парсинга HTML, но до события DOMContentLoaded.
• Порядок выполнения скриптов с defer гарантируется, соответствует порядку их расположения в HTML.
• Поведение аналогично <script> помещенному перед закрывающим тегом </body>.

<script type="module"> (для ECMAScript Modules)

• Обрабатывается как <script defer> по умолчанию (отложенное выполнение после парсинга, сохранение порядка).
• Может использоваться с атрибутом async.
• Поддерживает импорт/экспорт модулей. Создает отдельную область видимости (scope).

javascript

javascript

javascript

javascript