> Как проходят таски в event loop (JavaScript)

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

Event loop - это механизм, который координирует выполнение кода, обработку событий и отложенных задач в однопоточном JavaScript. Он последовательно обрабатывает очередь задач (task queue) и очередь микрозадач (microtask queue), обеспечивая неблокирующее выполнение. Таски (макрозадачи) берутся из очереди по одной за цикл, а микрозадачи - все подряд до опустошения очереди перед рендерингом или следующей макрозадачей.

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

Event loop работает по принципу цикла: на каждой итерации проверяет, есть ли задачи в очереди макрозадач (setTimeout, setInterval, I/O, UI events). Если есть - берет одну и выполняет. После выполнения макрозадачи проверяется очередь микрозадач (Promise.then/catch/finally, queueMicrotask, MutationObserver). Все микрозадачи выполняются до опустошения очереди, даже если они добавляют новые микрозадачи. Затем происходит рендеринг (если нужно), и цикл повторяется.

Важно: рендеринг не гарантирован после каждой макрозадачи - браузер может объединять несколько циклов. requestAnimationFrame выполняется перед рендерингом, но после микрозадач. Это делает его подходящим для анимаций, но не для критичных по времени операций.

На практике

Для senior-разработчика понимание event loop критично при оптимизации производительности. Например, разбивка тяжелых вычислений на части через setTimeout(fn, 0) позволяет не блокировать UI, но создает макрозадачи, которые могут задерживать рендеринг. Использование queueMicrotask или Promise.resolve().then() дает более приоритетное выполнение, но может привести к starvation макрозадач, если микрозадачи добавляются бесконечно.

При работе с анимациями и интерактивностью важно знать, что requestAnimationFrame выполняется до рендеринга, а setTimeout(fn, 0) - после. Это влияет на выбор инструмента: для плавных анимаций - rAF, для отложенных невизуальных операций - setTimeout.

Пример кода

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

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

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

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

requestAnimationFrame(() => console.log('5: перед рендерингом'));

// Вывод: 1, 3, 4, 2, 5
// (порядок 5 может варьироваться в зависимости от браузера и фазы рендеринга)

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

Начни с краткого определения event loop как механизма координации очередей. Затем опиши порядок: макрозадача → все микрозадачи → рендеринг (опционально). Подчеркни разницу между макро- и микрозадачами, приведи примеры. Упомяни requestAnimationFrame и его место в цикле. Если спросят про Node.js - добавь разницу с браузерным event loop (фазы timers, poll, check и т.д.). Избегай излишней детализации про libuv, если не спрашивают.

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

Интервьюер оценивает глубину понимания асинхронности, знание приоритетов задач, умение предсказывать порядок выполнения. Для senior важно не только знание теории, но и практическое применение: как избежать blocking the event loop, как правильно выбирать между setTimeout, Promise и rAF. Также проверяется способность объяснить сложные концепции простым языком.

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

• Путать макрозадачи и микрозадачи (например, считать Promise макрозадачей).
• Думать, что setTimeout(fn, 0) выполняется мгновенно - на самом деле минимальная задержка 4ms после вложенности.
• Игнорировать рендеринг и requestAnimationFrame при объяснении.
• Утверждать, что event loop - это часть JavaScript, хотя это среда исполнения (браузер/Node.js).
• Не учитывать, что микрозадачи могут блокировать event loop, если добавляются бесконечно.