Перейти к основному содержимому

[Easy] 📄 <script>, <script async>, <script defer>

Обзор (Overview)​

В HTML существует три основных способа загрузки JavaScript-файлов:

  1. <script>
  2. <script async>
  3. <script defer>

Эти три способа ведут себя по-разному при загрузке и выполнении скриптов.

Подробное сравнение (Detailed Comparison)​

<script>​

  • Поведение: когда браузер встречает этот тег, он приостанавливает парсинг HTML, загружает и выполняет скрипт, затем продолжает парсинг.
  • Когда использовать: для скриптов, критически важных для рендеринга.
  • Плюсы: гарантирует выполнение скриптов в порядке.
  • Минусы: может задерживать рендеринг страницы.
<script src="important.js"></script>

<script async>​

  • Поведение: браузер загружает скрипт в фоновом режиме, продолжая парсить HTML. После загрузки скрипт немедленно выполняется и может прервать парсинг.
  • Когда использовать: для независимых скриптов, таких как аналитика или реклама.
  • Плюсы: не блокирует парсинг HTML и может ускорить загрузку.
  • Минусы: порядок выполнения не гарантирован, и скрипт может запуститься до полной готовности DOM.
<script async src="analytics.js"></script>

<script defer>​

  • Поведение: браузер загружает скрипт в фоновом режиме, но выполняет его только после завершения парсинга HTML. Несколько отложенных скриптов выполняются в порядке документа.
  • Когда использовать: для скриптов, которым нужен полный DOM, но которые не нужны немедленно.
  • Плюсы: не блокирует парсинг HTML, сохраняет порядок и хорошо работает для скриптов, зависящих от DOM.
  • Минусы: если скрипт критичен, он может задержать интерактивность.
<script defer src="ui-enhancements.js"></script>

Аналогия (Analogy)​

Представьте, что вы готовитесь к свиданию:

  1. <script>: Вы бросаете все дела и звоните партнёру, чтобы уточнить детали. Общение ясное, но подготовка откладывается.

  2. <script async>: Вы готовитесь, разговаривая через Bluetooth-наушники. Это эффективно, но вы можете потерять фокус и допустить ошибки.

  3. <script defer>: Вы отправляете сообщение, что позвоните после подготовки. Можно закончить подготовку, а потом нормально пообщаться.

Текущее использование (Current Usage)​

В современных фреймворках вы обычно не настраиваете поведение <script> вручную. Например, Vite по умолчанию использует type="module", что ведёт себя аналогично defer.

<script type="module" src="/src/main.js"></script>

Исключение — сторонние скрипты, например Google Analytics.

<script async src="https://www.google-analytics.com/analytics.js"></script>