Браузер и фронтенд-рантайм

Event loop: предскажи вывод

Суть Читай реальные JS-сниппеты и предсказывай точный порядок выполнения — синхронный код, microtask, task, rAF и порядок фаз в Node.

Высота — путь к senior

НольJuniorMiddleSenior

Ты на senior-высоте — в орбите

◷ 14 min

Предсказание точного порядка лога — чистейшая проверка, действительно ли ты держишь модель loop. Читай каждый сниппет, отслеживай, в какую очередь попадает каждый колбэк, и выбери вывод, который предскажет внимательный инженер.

Цель

Потренируй трассировку, которую мысленно прогоняешь в каждом async-баге: классифицируй каждый колбэк как sync, microtask, task или работу кадра и упорядочи по фиксированным правилам loop — включая Node-специфичное переупорядочивание.

Сниппет 1 — sync, microtask и task в одном витке

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

Викторина

Что это залогирует и в каком порядке?

Сниппет 2 — async/await без сахара

async function run() {
  console.log('1');
  await null;            // suspends; resume is queued as a microtask
  console.log('2');
}
console.log('3');
run();
console.log('4');
Promise.resolve().then(() => console.log('5'));

Викторина

Каков порядок вывода?

Сниппет 3 — rAF против microtask против task

console.log('start');
requestAnimationFrame(() => console.log('raf'));
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');

Викторина

Если браузер рисует кадр на этом витке, каков самый надёжный порядок?

Сниппет 4 — порядок фаз в Node

// Run with: node script.js
const fs = require('fs');
fs.readFile(__filename, () => {
  setTimeout(() => console.log('timeout'), 0);
  setImmediate(() => console.log('immediate'));
  process.nextTick(() => console.log('nextTick'));
  Promise.resolve().then(() => console.log('promise'));
});

Викторина

Внутри этого I/O-колбэка каков детерминированный порядок вывода в Node?

Итог

Любая головоломка с порядком async решается одной трассировкой: сначала весь синхронный код, затем microtask checkpoint дренируется до пустоты (возобновления await и колбэки .then в порядке FIFO), затем шаг рендеринга выполняет rAF на границе кадра, затем loop берёт следующий task (setTimeout, MessageChannel). Node наслаивает сверху машину фаз: process.nextTick дренируется до microtask между каждой фазой, а внутри I/O-колбэка setImmediate (check-фаза, эта итерация) обходит setTimeout(0) (timers-фаза, следующая итерация). Классифицируй каждый колбэк по очереди, затем упорядочивай по этим фиксированным правилам — никогда по позиции в исходнике.

Продолжить восхождение ↑Event loop: вытащи взаимодействие из INP-ада