Как парсинг HTML связан с Event Loop?

1.7 Middle🔥 271 комментариев

#HTML и CSS

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

🐱

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

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

Event Loop и парсинг HTML

Парсинг HTML происходит вне Event Loop, но синхронный JavaScript блокирует парсинг. Это критично для производительности.

Как работает парсинг

Браузер делает это последовательно:

Получает HTML с сервера
Парсит HTML (создаёт DOM)
Встречает <script> — СТОП парсинг
Выполняет скрипт (Event Loop обрабатывает JS)
Возобновляет парсинг HTML
Рендерит DOM (Paint, Layout)

Этот процесс не входит в Event Loop, но JavaScript в Event Loop может остановить парсинг.

Визуализация

HTML Processing (не Event Loop):
├─ Parse HTML
├─ Встречен <script>
│  └─ Execute JavaScript (Event Loop)
│     ├─ Микротаски (Promises, queueMicrotask)
│     └─ Макротаски (setTimeout, setInterval)
├─ Парсинг продолжается
├─ Построен DOM
└─ Отрендерить страницу

Проблема: Блокирующие скрипты

<html>
<head>
  <script src="/heavy.js"></script>
</head>
<body>
  <h1>Привет</h1>
  <!-- Пока /heavy.js загружается и выполняется —
       парсинг СТОИТ, пользователь видит белый экран -->
</body>
</html>

Что происходит:

Браузер начинает парсить HTML
Встречает <script src="/heavy.js">
Парсинг HTML СТОИТ
Загружается heavy.js (может занять 5 секунд)
Выполняется в Event Loop (может занять 2 секунды)
Только потом браузер видит <body> и <h1>
Белый экран 7+ секунд

Event Loop: макротаски vs микротаски

В Event Loop есть приоритет:

While (Event Loop жив) {
  1. Выполни макротаску (setTimeout, setInterval)
  2. Выполни ВСЕ микротаски (Promises, queueMicrotask)
  3. Перерендер страницы (если нужно)
  4. Повтори
}

Пример:

console.log('1. Синхронный код');

setTimeout(() => {
  console.log('2. Макротаска (setTimeout)');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('3. Микротаска (Promise)');
  });

console.log('4. Ещё синхронный');

// Порядок выполнения:
// 1. Синхронный код
// 4. Ещё синхронный
// 3. Микротаска (Promise)
// 2. Макротаска (setTimeout)

Как парсинг HTML и Event Loop взаимодействуют

Сценарий 1: Тяжёлый скрипт в head

<head>
  <script>
    // Этот код выполнится в Event Loop
    let sum = 0;
    for (let i = 0; i < 1000000000; i++) {
      sum += i;
    }
  </script>
</head>
<body>
  <!-- Пока вычисляется sum, парсинг HTML ЖДЁТ -->
  <h1>Заголовок</h1>
</body>

Сценарий 2: async/defer скрипты

<head>
  <script async src="/analytics.js"></script>
  <script defer src="/app.js"></script>
</head>
<body>
  <!-- Парсинг HTML ПРОДОЛЖАЕТСЯ, скрипты загружаются параллельно -->
  <h1>Заголовок видит пользователь</h1>
</body>

async — загружается в фоне, выполняется в Event Loop (когда загрузится)
defer — загружается в фоне, выполняется в Event Loop (после парсинга)

Как это влияет на производительность

Плохо (FCP — First Contentful Paint долгий):

<head>
  <script src="/vendor.js"></script> <!-- 3 сек -->
  <script src="/app.js"></script> <!-- 2 сек -->
</head>
<body>
  <!-- FCP = 5 сек (белый экран) -->
  <h1>Контент</h1>
</body>

Хорошо (FCP быстрый):

<head>
  <script async src="/analytics.js"></script>
</head>
<body>
  <!-- FCP = ~0.2 сек (контент видит пользователь) -->
  <h1>Контент</h1>
  <script defer src="/vendor.js"></script>
  <script defer src="/app.js"></script>
</body>

Ренденеринг и Event Loop

После выполнения скрипта в Event Loop браузер:

Проверяет, нужно ли перерендерить
Выполняет Layout (расчёт размеров)
Выполняет Paint (рисование)
Выполняет Composite (слои)

Если скрипт изменял DOM:

const div = document.getElementById('box');
div.style.backgroundColor = 'red';
// Event Loop → Render (браузер перерисует div)

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

1. Используй defer для основного JS:

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

2. Используй async только для независимых:

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

3. Минимизируй синхронный JS:

// Плохо: долгий синхронный код
function heavyCalculation() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) sum += i;
  return sum;
}

// Хорошо: разбей на части через Event Loop
function* heavyCalculation() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    if (i % 1000000 === 0) yield sum;
    sum += i;
  }
  return sum;
}

4. Используй Web Workers для CPU-intensive:

const worker = new Worker('/worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = (e) => {
  console.log('Результат из воркера (Event Loop не заблокирован):', e.data);
};

Итог

Парсинг HTML и Event Loop независимы, но синхронный JavaScript блокирует парсинг. Используй async и defer для скриптов, чтобы парсинг продолжался параллельно, и пользователь быстрее видит контент.