> Какой механизм браузера отвечает за порядок выполнения микротасков и макротасков в JavaScript (JavaScript)

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

Порядок выполнения микротасков и макротасков в JavaScript определяет event loop браузера. После выполнения каждого макротаска (например, setTimeout, обработчик DOM-события) event loop проверяет очередь микротасков (Promise.then, MutationObserver) и выполняет все микротаски до опустошения очереди, прежде чем перейти к следующему макротаску или рендерингу.

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

Event loop - это механизм, который координирует выполнение кода, обработку событий и рендеринг в браузере. Он работает по следующему алгоритму:

1. Выполнение синхронного кода - сначала выполняется весь синхронный код в текущем стеке вызовов.
2. Обработка микротасков - после опустошения стека event loop проверяет очередь микротасков и выполняет все задачи из неё до полного опустошения. Если во время выполнения микротаска добавляется новый микротаск, он также будет выполнен в этом же цикле.
3. Рендеринг - браузер может выполнить рендеринг страницы (не гарантируется после каждого цикла).
4. Макротаск - берётся один макротаск из очереди макротасков и выполняется.

Макротаски включают: setTimeout, setInterval, setImmediate (Node.js), I/O, UI-события (click, scroll), рендеринг.

Микротаски включают: Promise.then/catch/finally, MutationObserver, queueMicrotask, process.nextTick (Node.js).

Ключевое отличие: микротаски имеют приоритет над макротасками и выполняются между макротасками, но после завершения текущего синхронного кода.

На практике

Понимание event loop критично для:

• Избежания блокировки UI - длительные микротаски могут заблокировать рендеринг, так как все микротаски выполняются до перехода к следующему макротаску.
• Порядка выполнения асинхронного кода - Promise.then выполняется раньше setTimeout с нулевой задержкой.
• Оптимизации производительности - разбиение тяжёлых задач на микротаски может привести к зависанию интерфейса, лучше использовать макротаски или requestAnimationFrame.

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

Пример кода

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

setTimeout(() => console.log('2: макротаск'), 0);

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

Promise.resolve().then(() => {
  console.log('4: микротаск');
  queueMicrotask(() => console.log('5: микротаск внутри микротаска'));
});

console.log('6: синхронный');

// Вывод: 1, 6, 3, 4, 5, 2

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

Начни с краткого определения event loop как механизма, управляющего порядком выполнения. Затем опиши алгоритм: синхронный код → микротаски → рендеринг → макротаск. Приведи примеры макротасков и микротасков. Объясни, почему микротаски имеют приоритет и как это влияет на производительность. Упомяни, что в разных средах (браузер vs Node.js) поведение может незначительно отличаться (например, process.nextTick в Node.js). Заверши практическим примером с выводом.

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

• Понимание асинхронной модели JavaScript и event loop
• Знание различий между микротасками и макротасками
• Способность предсказать порядок выполнения кода
• Понимание влияния на производительность и рендеринг
• Осведомлённость о специфике разных сред выполнения

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

• Утверждение, что setTimeout(fn, 0) выполняется мгновенно или сразу после синхронного кода
• Игнорирование того, что микротаски выполняются до рендеринга и макротасков
• Непонимание, что микротаски, добавленные во время выполнения микротаска, обрабатываются в том же цикле
• Смешивание понятий event loop браузера и Node.js (разные очереди и приоритеты)
• Забывание про requestAnimationFrame, который выполняется перед рендерингом, но не является ни микро-, ни макротаском