> Что такое микрозадачи и макрозадачи (JavaScript)

Короткий ответ

Микрозадачи и макрозадачи - это два типа задач в event loop JavaScript. Макрозадачи включают setTimeout, setInterval, I/O, рендеринг. Микрозадачи - Promise.then/catch/finally, queueMicrotask, MutationObserver. После каждой макрозадачи event loop выполняет все накопившиеся микрозадачи перед обработкой следующей макрозадачи или рендерингом.

Подробное объяснение

Event loop в JavaScript работает по принципу очереди, но не все задачи равны. Макрозадачи (macrotasks) - это крупные единицы работы, которые ставятся в очередь из внешних источников: таймеры, события DOM, сетевые запросы. Микрозадачи (microtasks) - это более приоритетные задачи, которые выполняются сразу после завершения текущей макрозадачи, до того как event loop перейдет к следующей макрозадаче или обновлению UI.

Порядок выполнения:

1. Выполняется текущая макрозадача (например, скрипт).
2. Очищается очередь микрозадач - все микрозадачи выполняются одна за другой.
3. Если нужно, происходит рендеринг (браузер может оптимизировать).
4. Берется следующая макрозадача из очереди.

Этот механизм гарантирует, что микрозадачи (например, resolve промиса) обрабатываются как можно быстрее, не дожидаясь следующего тика event loop. Однако если микрозадачи порождают новые микрозадачи, они будут выполнены в том же цикле, что может заблокировать рендеринг.

На практике

На практике различие важно для:

• Порядка выполнения кода: setTimeout(() => console.log('macro'), 0) выполнится после Promise.resolve().then(() => console.log('micro')).
• Производительности: если в микрозадаче запустить бесконечный цикл, UI зависнет, так как рендеринг откладывается.
• Асинхронных операций: await в async-функциях создает микрозадачу для продолжения после промиса.

Пример: при обработке событий или анимациях лучше использовать requestAnimationFrame (макрозадача, связанная с рендерингом), а не queueMicrotask, чтобы не блокировать отрисовку.

Пример кода

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

setTimeout(() => {
  console.log('2: макрозадача (setTimeout)');
}, 0);

Promise.resolve().then(() => {
  console.log('3: микрозадача (Promise.then)');
});

queueMicrotask(() => {
  console.log('4: микрозадача (queueMicrotask)');
});

console.log('5: еще синхронный код');

// Вывод:
// 1: синхронный код
// 5: еще синхронный код
// 3: микрозадача (Promise.then)
// 4: микрозадача (queueMicrotask)
// 2: макрозадача (setTimeout)

Как отвечать на собеседовании

Начни с краткого определения: микрозадачи - это Promise.then, queueMicrotask; макрозадачи - setTimeout, I/O. Объясни порядок выполнения: после каждой макрозадачи event loop выполняет все микрозадачи. Приведи простой пример с setTimeout и Promise.resolve(). Упомяни, что микрозадачи могут блокировать рендеринг, если их слишком много. Не углубляйся в детали реализации V8 или Node.js, если не спрашивают.

Что проверяет интервьюер

• Понимание event loop и асинхронности в JavaScript.
• Знание конкретных API: Promise, setTimeout, queueMicrotask.
• Умение предсказывать порядок вывода кода с асинхронными операциями.
• Осознание практических последствий: блокировка UI, производительность.

Типичные ошибки

• Путать микрозадачи с макрозадачами (например, считать setTimeout микрозадачей).
• Думать, что setTimeout с задержкой 0 выполняется мгновенно - на самом деле он ждет следующей макрозадачи.
• Не учитывать, что микрозадачи из вложенных промисов выполняются в том же цикле, задерживая рендеринг.
• Считать requestAnimationFrame микрозадачей - это макрозадача, связанная с рендерингом.