Нужно ли ждать загрузки всего скрипта при наличии script в head без атрибута async?

1.0 Junior🔥 61 комментариев

#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Блокировка загрузки при скрипте в head без async

Да, браузер будет ждать загрузки и выполнения всего скрипта перед тем, как продолжить парсинг HTML. Это критично для пользовательского опыта.

Как это работает

Когда браузер встречает обычный <script> тег в <head>:

Парсинг HTML приостанавливается
Загружается скрипт с сервера
Выполняется скрипт полностью
Только потом парсинг HTML продолжается

Это означает, что пользователь видит белый экран дольше, чем мог бы.

Проблема

<!-- Плохо: блокирует весь DOM -->
<head>
  <script src="/vendor/jquery.js"></script>
  <script src="/app.js"></script>
</head>
<body>
  <!-- Контент загружается очень медленно -->
</body>

Если jquery.js загружается 2 секунды, пользователь ждёт 2 секунды белого экрана.

Решение 1: async

<script async src="/app.js"></script>

async означает:

Скрипт загружается параллельно с парсингом HTML
Выполняется как только загрузится, не дожидаясь других скриптов
Порядок выполнения не гарантирован

Идеален для независимых скриптов (аналитика, реклама).

Решение 2: defer

<script defer src="/app.js"></script>

defer означает:

Скрипт загружается параллельно с парсингом HTML
Выполняется после полной загрузки HTML
Порядок сохраняется — важно для зависимостей

<!-- Правильный порядок сохранится -->
<script defer src="/jquery.js"></script>
<script defer src="/app.js"></script> <!-- app.js точно выполнится после jquery -->

Решение 3: перенести в конец body

<body>
  <h1>Контент видит пользователь</h1>
  <p>Пока загружаются скрипты</p>
  
  <script src="/jquery.js"></script>
  <script src="/app.js"></script>
</body>

Контент отображается мгновенно, скрипты загружаются после.

Решение 4: динамическая загрузка

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
}

await loadScript('/app.js');

Контент видит пользователь