Event loop
Вопрос
Объясни event loop: как браузер решает, что выполнять следующим.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
JS однопоточный, есть стек вызовов
макрозадачи: таймеры, события, сеть - по одной за цикл
микрозадачи: промисы, queueMicrotask, MutationObserver
после каждой макрозадачи очередь микрозадач вычерпывается полностью
рендер происходит между макрозадачами, requestAnimationFrame - перед отрисовкой
бесконечная генерация микрозадач заблокирует рендер
Что могут спросить следом
- Что выведет код с async/await и setTimeout вперемешку
- Куда попадает requestAnimationFrame относительно промисов
- Почему setTimeout(fn, 0) срабатывает не через 0 мс
Разбор
JS выполняется в одном потоке. Когда стек пуст, цикл событий берёт одну макрозадачу
(таймер, событие, колбэк сети), выполняет её, а затем полностью вычерпывает очередь
микрозадач - колбэки промисов, queueMicrotask, MutationObserver. Только после этого
браузер может отрисовать кадр.
setTimeout(() => console.log('macro'));
Promise.resolve().then(() => console.log('micro'));
console.log('sync'); // sync → micro → macro
Практическое следствие: цепочка промисов, которая порождает новые промисы бесконечно,
заморозит отрисовку так же надёжно, как while(true).
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.