Приведи пример Event loop в JavaScript при заходе пользователя на страницу

2.8 Senior🔥 132 комментариев

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

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

🐱

deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

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

Event Loop в JavaScript при заходе на страницу

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

Пример сценария загрузки страницы

Допустим, пользователь открывает страницу, которая содержит HTML с внешними скриптами, стилями, изображениями и асинхронным кодом. Вот как это работает с Event Loop.

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Пример Event Loop</title>
  <script>
    console.log('1. Начало синхронного выполнения скрипта в <head>');
    
    // Асинхронная задача: таймер
    setTimeout(() => {
      console.log('6. Выполнение setTimeout (макрозадача)');
    }, 0);
    
    // Микрозадача: Promise
    Promise.resolve().then(() => {
      console.log('3. Микрозадача из Promise');
    });
    
    console.log('2. Конец синхронного выполнения в <head>');
  </script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="content">Контент страницы</div>
  <script src="external-script.js"></script>
  <script>
    console.log('4. Синхронный код из <body> после загрузки DOM');
    
    // Другой асинхронный вызов
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        console.log('7. Микрозадача из fetch (после ответа сети)');
      });
    
    // Дополнительная микрозадача
    queueMicrotask(() => {
      console.log('5. Микрозадача из queueMicrotask');
    });
    
    console.log('4.1. Конец скрипта в <body>');
  </script>
</body>
</html>

Последовательность работы Event Loop

При обработке этой страницы Event Loop проходит через следующие этапы:

1. Синхронное выполнение и парсинг HTML

Движок браузера парсит HTML и выполняет синхронный код по мере его встречи.
Call Stack заполняется задачами:
- console.log('1. Начало синхронного выполнения скрипта в <head>')
- Регистрация setTimeout (колбэк помещается в очередь макрозадач).
- Создание Promise (колбэк .then() помещается в очередь микрозадач).
- console.log('2. Конец синхронного выполнения в <head>').

2. Загрузка DOM и внешних ресурсов

Браузер загружает стили и скрипт external-script.js (если он синхронный, он блокирует парсинг, но в современных подходах часто используют async или defer).
После построения DOM выполняется скрипт в <body>:
- console.log('4. Синхронный код из <body> после загрузки DOM')
- Вызов fetch (сетевая операция, ответ обрабатывается через микрозадачи).
- Регистрация queueMicrotask.
- console.log('4.1. Конец скрипта в <body>').

3. Обработка очередей Event Loop

Event Loop циклически проверяет очереди в следующем порядке:

a. Выполнение микрозадач (Microtask Queue)

Микрозадачи обрабатываются сразу после завершения текущей синхронной задачи и перед рендерингом. Порядок будет:

console.log('3. Микрозадача из Promise'); // Из первого <script>
console.log('5. Микрозадача из queueMicrotask'); // Из второго <script>

b. Рендеринг (Render Phase)

Браузер перерисовывает страницу, если это необходимо (например, после загрузки DOM и скриптов). Этот этап может включать Layout, Paint и Composite.

c. Выполнение макрозадач (Task Queue / Callback Queue)

Макрозадачи обрабатываются после рендеринга. Примеры: setTimeout, setInterval, события DOM.

console.log('6. Выполнение setTimeout (макрозадача)');

d. Сетевые операции и события

Когда приходит ответ от fetch, он добавляется в очередь микрозадач и выполняется:

console.log('7. Микрозадача из fetch (после ответа сети)');

Итоговый вывод в консоли

Учитывая порядок Event Loop, вывод будет таким:

1. Начало синхронного выполнения скрипта в <head>
2. Конец синхронного выполнения в <head>
4. Синхронный код из <body> после загрузки DOM
4.1. Конец скрипта в <body>
3. Микрозадача из Promise
5. Микрозадача из queueMicrotask
6. Выполнение setTimeout (макрозадача)
7. Микрозадача из fetch (после ответа сети)

Ключевые моменты

Call Stack: Выполняет синхронный код по принципу LIFO (Last In, First Out).
Microtask Queue: Включает промисы, queueMicrotask, MutationObserver. Выполняется сразу после текущей задачи.
Task Queue: Включает таймеры, события, сетевые колбэки. Выполняется после микрозадач и рендеринга.
Render Phase: Происходит периодически, чтобы обновить интерфейс.

Этот процесс демонстрирует, как JavaScript управляет асинхронностью, обеспечивая отзывчивость страницы даже при выполнении тяжелых операций.