Event loop JavaScript обрабатывает два типа асинхронных задач: микротаски и макротаски, которые различаются в основном приоритетом и временем выполнения.
Микротаски — это высокоприоритетные коллбэки, которые выполняются сразу после текущей задачи и перед запуском любого макротаска. Основные источники:
Promise коллбэки (.then, .catch, .finally)queueMicrotask()MutationObserverМакротаски — это стандартные асинхронные операции, помещённые в отдельную очередь и обрабатываемые по одной. Основные источники:
setTimeout и setIntervalEvent loop следует такой последовательности:
1. Выполнить текущую (macro)задачу
2. Полностью очистить очередь микротасков
3. Обновить отрисовку (если нужно)
4. Взять следующий макротаск и повторить
Вся очередь микротасков всегда полностью обрабатывается перед началом следующего макротаска — это ключевое различие.
console.log('start');
setTimeout(() => console.log('macrotask'), 0);
Promise.resolve().then(() => console.log('microtask'));
console.log('end');
// Output: start → end → microtask → macrotask
Понимание этого различия помогает избежать тонких ошибок в асинхронном коде. Поскольку микротаски выполняются до того, как браузер сможет отрисовать или обработать ввод пользователя, перегруженная очередь микротасков может заблокировать отрисовку и сделать UI неотзывчивым.
Микротаски выполняются сразу после завершения текущего макротаска и перед началом любого следующего макротаска, что гарантирует полное опустошение очереди микротасков перед переходом к следующему макротаску.
Новый — ещё не проверен сообществом
Вы