Микрозадачи и макрозадачи

JavaScript выполняется в одном потоке: пока работает функция, ничто её не прервёт. Всё отложенное — таймеры, ответы сети, реакции на промисы — складывается в очереди и ждёт, когда поток освободится. Очередей две, и это ключ ко всему поведению асинхронного кода.

Макрозадачи — крупные самостоятельные порции работы: колбэк setTimeout, обработчик клика, разбор пришедшего скрипта. Микрозадачи — мелкие довески к только что закончившейся работе: реакции промисов. Правило простое: движок берёт одну макрозадачу, доводит её до конца, а потом опустошает микроочередь целиком — до последней задачи, включая те, что появились по ходу дела. Только после этого наступает очередь следующей макрозадачи.

setTimeout(() => console.log("макро"), 0);
Promise.resolve().then(() => console.log("микро"));
console.log("синхронно");

Ноль в setTimeout ничего не ускоряет: он лишь означает «поставь в конец макроочереди». А микрозадача успевает проскочить раньше, потому что её разбирают сразу после текущего куска синхронного кода.

Запоминать нужно не так много. Всё, что связано с промисами, — микрозадачи. Всё остальное, что приходит «извне», — макрозадачи.

Promise.resolve()
  .then(() => console.log("цепочка: шаг 1"))
  .then(() => console.log("цепочка: шаг 2"));
Promise.resolve().then(() => console.log("соседний промис"));

Каждое звено цепочки — отдельная микрозадача, и в очередь оно встаёт только после того, как отработало предыдущее. Поэтому соседний промис вклинивается между шагами. А микрозадача, порождённая другой микрозадачей, всё равно успевает выполниться до ближайшего таймера — очередь опустошается до дна.

setTimeout(() => console.log("таймер"), 0);
Promise.resolve().then(() => {
  console.log("микро 1");
  Promise.resolve().then(() => console.log("микро 2"));
});

Классика, которую спрашивают почти дословно. Прежде чем читать дальше, попробуйте выписать порядок сами.

console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
setTimeout(() => console.log("4"), 0);
Promise.resolve().then(() => console.log("5"));
console.log("6");

Читается это в три прохода. Сначала синхронный код сверху вниз — печатаются 1 и 6, а таймеры и промисы только записываются в очереди. Затем опустошается микроочередь в порядке постановки — 3 и 5. И лишь потом идут макрозадачи, тоже по порядку, — 2 и 4.

Между двумя макрозадачами микроочередь всегда опустошается до дна. Одна фраза — и половина таких задач решается в уме.

async function f() {
  console.log("A");
  await null;
  console.log("B");
}
setTimeout(() => console.log("C"), 0);
f();
console.log("D");

С async/await работает то же правило, просто менее заметно. Начало функции выполняется синхронно, а всё, что стоит после await, движок оформляет как микрозадачу — даже если ждать нечего и справа от await стоит обычный null.

Если нужна именно микрозадача, а промис не при чём, есть прямой способ — queueMicrotask(fn). Он кладёт функцию в ту же очередь, что и реакции промисов, без лишней обёртки и без создания объекта Promise.

queueMicrotask(() => console.log("через queueMicrotask"));
Promise.resolve().then(() => console.log("через промис"));
console.log("синхронно");

Зачем это нужно на практике? Чтобы функция вела себя предсказуемо. Библиотечная функция, которая иногда вызывает колбэк сразу, а иногда — позже, порождает плавающие баги. Отложив вызов в микроочередь, вы гарантируете: колбэк всегда асинхронный, но при этом отработает до отрисовки и до любого таймера.

function emit(value, handler) {
  queueMicrotask(() => handler(value));
}
emit(42, (v) => console.log("получено", v));
console.log("подписка оформлена");

У приоритета есть обратная сторона. Пока микроочередь не опустеет, браузер не перейдёт к следующей макрозадаче и не перерисует страницу. Микрозадача, которая бесконечно ставит саму себя, намертво вешает вкладку — таймеры не сработают, клики не обработаются, интерфейс замрёт. Конечное число повторов безопасно, бесконечное — нет.

let count = 0;
function step() {
  count += 1;
  if (count < 5) queueMicrotask(step);
}
queueMicrotask(step);
setTimeout(() => console.log(count), 0);

Если нужно перемолоть много данных, режьте работу на порции и раскладывайте их по макрозадачам через setTimeout: между ними браузер успеет отрисовать кадр и ответить на действия пользователя. Микрозадачи — для коротких довесков, а не для тяжёлых циклов.