Текст появляется быстро, потому что JS не блокирует

Встречал ли оператор defer

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

#Браузер и сетевые технологии#Оптимизация и производительность

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

🐱

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

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

Встречал ли оператор defer

Да, встречал и часто использую defer в Go. Но в контексте фронтенда вопрос, вероятно, о другом — о атрибуте defer в HTML тегах script.

defer в HTML (для фронтенда)

defer — это атрибут HTML тега script, который отложил выполнение JavaScript до полной загрузки и парсинга HTML:

<!-- Без defer: скрипт загружается и выполняется сразу (блокирует HTML) -->
<script src="app.js"></script>

<!-- С defer: скрипт загружается в фоне, выполняется после HTML -->
<script defer src="app.js"></script>

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

Без defer:

1. Браузер парсит HTML
2. Встречает <script src="app.js">
3. СТОПП! Загружает app.js
4. Выполняет app.js
5. Продолжает парсить HTML

Это блокирует рендер страницы. Если app.js большой, пользователь видит белый экран.

С defer:

1. Браузер парсит HTML
2. Встречает <script defer src="app.js">
3. Запускает загрузку app.js В ФОНЕ
4. Продолжает парсить HTML
5. Когда HTML полностью спарсен И app.js загружен
6. Выполняет app.js
7. Запускает события DOMContentLoaded

Визуально

БЕЗ defer:
|-- Parse HTML --|
                 |-- Fetch JS --|
                                |-- Execute JS --|
                                                 |-- Paint --|

С defer:
|-- Parse HTML + Fetch JS в фоне --|
                                   |-- Execute JS --|
                                                    |-- Paint --|

defer позволяет браузеру быстрее показать страницу.

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

<!DOCTYPE html>
<html>
<head>
  <!-- Без defer: блокирует рендер! -->
  <!-- <script src="analytics.js"></script> -->
  
  <!-- С defer: загружается в фоне -->
  <script defer src="app.js"></script>
  <script defer src="analytics.js"></script>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Текст появляется быстро, потому что JS не блокирует</p>
  
  <!-- Скрипты выполняются после этого </body> -->
</body>
</html>

Порядок выполнения дефер-скриптов

Важно: скрипты с defer выполняются в том порядке, в котором они определены в HTML:

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

Порядок выполнения: first.js -> second.js -> third.js (гарантирован!)

Это отличается от async:

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

С async порядок не гарантирован. Выполнится тот, который загрузился первым.

defer vs async vs синхронный

<!-- Синхронный (по умолчанию) -->
<script src="app.js"></script>
<!-- Блокирует HTML парсинг, выполняется сразу -->

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

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

Таблица сравнения:

	Синхронный	defer	async
Блокирует HTML парсинг	Да	Нет	Нет
Порядок выполнения	Гарантирован	Гарантирован	Не гарантирован
Когда выполняется	Сразу	После парсинга HTML	Как только загрузится
Подходит для	Критичные скрипты	Основное приложение	Аналитика, реклама

Практические примеры использования

defer для основного приложения (Next.js, React):

<!-- Next.js автоматически добавляет defer -->
<script defer src="_next/static/chunks/main.js"></script>
<script defer src="_next/static/chunks/pages/index.js"></script>

async для аналитики и сторонних сервисов:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js"></script>

<!-- Яндекс.Метрика -->
<script async src="https://mc.yandex.ru/metrica/tag.js"></script>

<!-- Facebook Pixel -->
<script async src="https://connect.facebook.net/en_US/fbevents.js"></script>

Эти скрипты могут выполняться в любом порядке и не блокируют основное приложение.

defer в реальном проекте

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My App</title>
  
  <!-- Критичный CSS (синхронно) -->
  <link rel="stylesheet" href="critical.css" />
  
  <!-- Основной JS с defer -->
  <script defer src="app.js"></script>
  
  <!-- Полифиллы с defer (если нужны) -->
  <script defer src="polyfills.js"></script>
  
  <!-- Аналитика с async -->
  <script async src="analytics.js"></script>
</head>
<body>
  <div id="root"></div>
  
  <!-- Прежде всего выполнится polyfills.js (если нужно) -->
  <!-- Потом app.js (может быть зависит от polyfills) -->
  <!-- analytics.js может выполняться параллельно -->
</body>
</html>

Core Web Vitals и defer

defer важен для производительности:

First Contentful Paint (FCP): улучшается (HTML парсится быстрее)
Largest Contentful Paint (LCP): может улучшиться (контент видим раньше)
Cumulative Layout Shift (CLS): не влияет напрямую

Согласно Google, использование defer вместо синхронного script может улучшить FCP на 20-30%.

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

Используй синхронный script когда:

Нужны полифиллы (но лучше в head)
Нужна инициализация ДО парсинга HTML
Очень критичен для работы страницы

<!-- Полифилл для IE11 -->
<script src="polyfill.js"></script>

Используй defer для:

Основного приложения (React, Vue, Next.js)
Библиотек, от которых зависит приложение
Скриптов, которые инициализируют компоненты

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

Используй async для:

Аналитики (Google Analytics, Yandex Metrika)
Рекламы (AdSense, AdWords)
Сторонних сервисов (Sentry, Intercom)
Chat-ботов

<script async src="https://cdn.segment.com/analytics.js"></script>

defer в Next.js

Next.js автоматически добавляет defer для всех встроенных скриптов:

<!-- Next.js генерирует это -->
<script defer src="_next/static/chunks/main.js"></script>

Тебе не нужно об этом думать, фреймворк сделает оптимально.

Проверка в DevTools

В Chrome:

Открой DevTools (F12)
Перейди на вкладку Network
Отфильтруй по типу Script
Посмотри на колонку Priority и Type

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

defer в Go (если вопрос о языке)

Если вопрос о Go, то defer — это оператор, который откладывает выполнение функции до конца функции, в которой он определен:

func readFile(filename string) {
  file, _ := os.Open(filename)
  defer file.Close()  // Выполнится когда выйдем из функции
  
  // Читаем файл
}

defer в Go очень полезен для очистки ресурсов (закрытие файлов, соединений, и т.д.).

Вывод

defer в HTML отложил выполнение JS до полной загрузки HTML
Улучшает производительность: FCP и LCP улучшаются
Гарантирует порядок: скрипты выполняются в порядке определения
Используй defer для основного приложения
Используй async для аналитики и сторонних сервисов
Это стандартная лучшая практика в современном веб-разработке