Что такое атрибут defer у скрипта?

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

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

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

🐱

claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

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

Что такое атрибут defer у скрипта?

defer — это булев HTML-атрибут для тега <script>, который указывает браузеру загружать и выполнять JavaScript-файл асинхронно, но только после полной загрузки и парсинга HTML-документа. Это критически важно для оптимизации производительности сайтов.

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

Стандартное поведение без defer:

<!-- Парсинг HTML ОСТАНАВЛИВАЕТСЯ -->
<script src="script.js"></script>
<!-- После выполнения скрипта парсинг продолжается -->

Браузер:

Парсит HTML
Останавливает парсинг при встрече со скриптом
Загружает и выполняет скрипт
Продолжает парсинг HTML

Это блокирует рендеринг страницы!

С атрибутом defer:

<!-- Парсинг HTML НЕ ПРЕРЫВАЕТСЯ -->
<script src="script.js" defer></script>
<!-- Парсинг продолжается параллельно с загрузкой -->

Браузер:

Парсит HTML
Не останавливаясь, инициирует загрузку скрипта
Продолжает парсинг HTML
После завершения парсинга выполняет скрипт
Срабатывает событие DOMContentLoaded

Различия между async и defer

<!-- Блокирует парсинг HTML -->
<script src="script.js"></script>

<!-- Загружается параллельно, но выполняется сразу при готовности -->
<script src="script.js" async></script>

<!-- Загружается параллельно, выполняется после парсинга -->
<script src="script.js" defer></script>

Визуально:

            HTML парсинг
            |------------|------------|------------|------|
            |                                              DOMContentLoaded

Без defer:  ↓ скрипт блокирует (ХОРОШО ДЛЯ СТАРЫХ БРАУЗЕРОВ)
            |---СКРИПТ---|-------HTML парсинг----------|

С async:    ↓ скрипт загружается параллельно
            |---HTML парсинг---|СКРИПТ|---|HTML парсинг--|
            (может прерваться для выполнения скрипта)

С defer:    ↓ скрипт загружается параллельно
            |-------HTML парсинг---------|----------СКРИПТ---|
            (выполняется ПОСЛЕ парсинга, сохраняет порядок)

Когда использовать что

defer — оптимален для большинства случаев:

<!-- Основной контент и стили -->
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Контент -->
  
  <!-- Скрипты с defer (выполнятся в порядке) -->
  <script src="vendor/jquery.js" defer></script>
  <script src="app.js" defer></script>
  <script src="analytics.js" defer></script>
</body>

async — для независимых скриптов:

<!-- Аналитика, которой не важен порядок выполнения -->
<script src="https://analytics.google.com/ga.js" async></script>

<!-- Объявления, которые независимы от контента -->
<script src="https://adnetwork.com/ads.js" async></script>

Практические примеры

Правильная структура современного проекта:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="root"></div>
  
  <!-- React/Vue/Angular выполнится после парсинга всего HTML -->
  <script src="bundle.js" defer></script>
</body>
</html>

React приложение с defer:

<body>
  <div id="root"></div>
  <script defer src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
  <script defer src="app.js"></script>
</body>

Важные особенности

defer работает только с внешними скриптами:

<!-- Работает (внешний файл) -->
<script src="script.js" defer></script>

<!-- НЕ работает (inline скрипт) -->
<script defer>
  console.log("Это выполнится сразу, defer не работает");
</script>

Порядок выполнения сохраняется:

<script src="first.js" defer></script>
<script src="second.js" defer></script>
<script src="third.js" defer></script>

<!-- Выполнятся в порядке: first → second → third -->

Событие DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
  // Срабатывает ПОСЛЕ загрузки всех defer скриптов
  console.log("DOM полностью готов");
});

Лучшие практики

Используй defer для основных скриптов — это улучшает воспринимаемую скорость загрузки
Помещай скрипты в конец body — это дополнительная гарантия
Используй async только для независимых скриптов — аналитика, объявления
В modern стэках (React/Vue) — defer идёален, так как приложение монолитное

defer — это простой способ значительно улучшить производительность сайта, позволяя браузеру рендерить контент быстрее.