Порядок микро- и макрозадач
Вопрос
В каком порядке выполнится: синхронный код, await, setTimeout, queueMicrotask?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
сначала весь синхронный код текущего вызова
затем вся очередь микрозадач: промисы, queueMicrotask
микрозадачи, порождённые микрозадачами, выполняются в том же проходе
только потом одна макрозадача: setTimeout, событие
между макрозадачами браузер может отрисовать кадр
requestAnimationFrame идёт перед отрисовкой, после микрозадач
Что могут спросить следом
- Почему цепочка промисов может заморозить отрисовку
- Где в этом порядке стоит MutationObserver
- Что произойдёт при рекурсивном queueMicrotask
Разбор
Порядок: синхронный код → вся очередь микрозадач (включая те, что появились по ходу) → возможная отрисовка → одна макрозадача → снова микрозадачи.
console.log(1);
setTimeout(() => console.log(4));
Promise.resolve().then(() => console.log(3));
queueMicrotask(() => console.log('3 тоже'));
console.log(2);
await эквивалентен then: код после него - микрозадача. requestAnimationFrame стоит
особняком - его колбэки вызываются перед отрисовкой кадра, то есть после микрозадач,
но до следующего таймера.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.