Приведи пример Microtask

Пример Microtask в JavaScript: промис и очередь микрозадач

В JavaScript микрозадачи (Microtasks) — это задачи с высшим приоритетом, которые выполняются после текущей синхронной задачи, но до следующей макрозадачи (Macrotask), такой как рендеринг или обработка событий. Они используются для асинхронных операций, требующих максимально быстрого выполнения. Классический пример — обработка промисов (Promises).

Ключевые характеристики микрозадач:

• Выполняются в очереди микрозадач (Microtask Queue).
• Имеют приоритет над макрозадачами (например, setTimeout, setInterval, события UI).
• Часто используются для обновления состояния до рендеринга браузера.

Практический пример: Promise.then() как микрозадача

Рассмотрим код, демонстрирующий порядок выполнения микрозадач и макрозадач:

console.log('1. Начало синхронного кода');

// Макрозадача через setTimeout
setTimeout(() => {
  console.log('6. Макрозадача из setTimeout');
}, 0);

// Создание промиса (микрозадача)
Promise.resolve()
  .then(() => {
    console.log('3. Микрозадача 1 из Promise');
    return 'Данные';
  })
  .then((data) => {
    console.log('4. Микрозадача 2 из Promise с данными:', data);
  });

// Ещё одна микрозадача через queueMicrotask
queueMicrotask(() => {
  console.log('5. Микрозадача через queueMicrotask');
});

console.log('2. Конец синхронного кода');

Ожидаемый вывод:

1. Начало синхронного кода
2. Конец синхронного кода
3. Микрозадача 1 из Promise
4. Микрозадача 2 из Promise с данными: Данные
5. Микрозадача через queueMicrotask
6. Макрозадача из setTimeout

Разбор примера:

1. Синхронный код выполняется первым — выводятся строки 1 и 2.
2. Очередь микрозадач очищается после синхронного кода:
   • Выполняются обработчики .then() промиса (строки 3 и 4).
   • Выполняется микрозадача из queueMicrotask() (строка 5).
3. Очередь макрозадач обрабатывается после микрозадач — выполняется setTimeout (строка 6).

Почему это важно на практике?

Микрозадачи критичны для:

• Асинхронного обновления состояния в UI-фреймворках (например, React или Vue). Изменения состояния через промисы обрабатываются до ререндера.
• Обеспечения предсказуемости выполнения асинхронных операций. Например, в тестах с использованием Jest/Puppeteer.
• Избежания "дрожания" (jank) в анимациях, так как тяжёлые задачи можно разбить на микрозадачи.

API для работы с микрозадачами:

• Promise.resolve().then() — стандартный способ добавления микрозадачи.
• queueMicrotask(callback) — явное добавление микрозадачи (современный API).
• MutationObserver — использует микрозадачи для обработки изменений DOM.

Распространённая ошибка:

// Непонимание порядка выполнения
setTimeout(() => console.log('Макрозадача'), 0);
Promise.resolve().then(() => console.log('Микрозадача'));
console.log('Синхронный код');
// Вывод: Синхронный код → Микрозадача → Макрозадача

Итог: Микрозадачи — это фундаментальная часть Event Loop в JavaScript, обеспечивающая приоритетное выполнение асинхронного кода. Их правильное использование улучшает отзывчивость приложений и помогает управлять сложными цепочками асинхронных операций. В реальных проектах они часто применяются для оптимизации обновлений интерфейса, обработки результатов запросов к API и контроля потока выполнения.