Объясните event loop
Вопрос
Объясните, как работает event loop в браузере. Как в нём выполняются setTimeout, промисы и отрисовка?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
JS однопоточный: стек вызовов, пока стек не пуст, ничего другого не выполняется
Ожидание (таймеры, сеть, события) ведёт окружение, колбэки попадают в очереди
Задачи: таймеры, события, сообщения; микрозадачи: промисы, `await`, `queueMicrotask`
Оборот: одна задача, затем все микрозадачи, затем возможная отрисовка
Следствие: промис всегда раньше `setTimeout(fn, 0)`
Долгий синхронный код и бесконечные микрозадачи блокируют отрисовку
Что могут спросить следом
- Где в этом цикле
requestAnimationFrame? - Что выведет
async-функция с кодом до и послеawait? - Как event loop в Node отличается от браузерного?
Разбор
Образцовый ответ: «JavaScript выполняет код в одном потоке, есть стек вызовов, и пока он не пуст, ничего другого не происходит. Всё ожидание: таймеры, сеть, клики, ведёт браузер, а когда событие наступило, он ставит колбэк в очередь. Очереди две по смыслу. Задачи: колбэки таймеров, события, сообщения. Микрозадачи: колбэки промисов, продолжения после await, queueMicrotask. Цикл работает так: берёт одну задачу, выполняет её до пустого стека, затем выполняет все микрозадачи, включая добавленные по ходу, затем, если подошло время кадра, вызывает requestAnimationFrame и рисует. Потом следующая задача. Отсюда порядок: сначала синхронный код, потом промисы, потом таймеры, даже с нулевой задержкой. И отсюда же проблемы: длинный синхронный цикл или микрозадачи, бесконечно порождающие микрозадачи, не дают браузеру отрисовать кадр, и страница зависает. Тяжёлую работу дроблю на задачи или выношу в воркер».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
Что на самом деле значит setTimeout(fn, 0)
Следующий вопрос
Тяжёлые вычисления без зависания интерфейса