Event loop: как браузер успевает всё

Движок делает ровно одно дело за раз. Чтобы не потерять, где он сейчас находится, он ведёт стек вызовов — стопку карточек. Вызвали функцию — карточка легла сверху, функция вернулась — карточка снялась. Пока стопка не пуста, поток занят.

function inner() {
  return "готово";
}
function outer() {
  console.log("outer работает");
  return inner();
}
console.log(outer());

Стопка не бесконечная. Если функции складываются быстрее, чем снимаются, место заканчивается — и движок честно об этом сообщает.

function loop(n) {
  return loop(n + 1); // возврата не будет, карточки только копятся
}
try {
  loop(0);
} catch (e) {
  console.log(e.constructor.name);
}

Ни setTimeout, ни fetch, ни подписка на клик не описаны в языке. Это функции браузера. Движок просто передаёт поручение: «отсчитай полсекунды и позови вот эту функцию» — и тут же снимает карточку со стека. Считает уже браузер, своими средствами, вне потока JavaScript.

console.log("до таймера");
setTimeout(function () {
  console.log("таймер сработал");
}, 500);
console.log("после таймера");

Поэтому ожидание не блокирует поток. Пока таймер тикает, а сервер думает над ответом, стек пуст и поток свободен для другой работы.

Когда таймер дозвонил или ответ пришёл, колбэк не врывается в выполнение. Он встаёт в очередь задач и ждёт. Очередь честная: кто раньше стал готов, тот раньше и выполнится.

console.log("синхронный код");
setTimeout(() => console.log("жду 100 мс"), 100);
setTimeout(() => console.log("жду 0 мс"), 0);

Обратите внимание: порядок строк в коде ничего не решает. Решает момент, когда задача попала в очередь.

setTimeout(() => console.log("таймер"), 0);
Promise.resolve().then(() => console.log("промис"));
console.log("прямо сейчас");

Event loop устроен до обидного просто. Он спрашивает: стек пуст? Если да — берёт первую задачу из очереди и кладёт её на стек. Если нет — ждёт. И так бесконечно, пока открыта вкладка.

console.log("1");
setTimeout(() => {
  console.log("3");
  setTimeout(() => console.log("4"), 0);
}, 0);
console.log("2");

Ключевое свойство — задачу никто не прерывает на полпути. Взялся выполнять функцию — доведёт до конца, и только потом заглянет в очередь. Отсюда все радости и все беды однопоточности.

Правило одного дела: пока функция не вернулась, на странице не происходит ничего, что требует JavaScript и раскладки.

Ноль в setTimeout — это не «выполни немедленно», а «поставь в очередь без дополнительной задержки». Задача всё равно дождётся, пока опустеет стек и разберутся микрозадачи.

const start = Date.now();
setTimeout(() => {
  console.log("таймер дождался пустого стека");
}, 0);
while (Date.now() - start < 50) {} // держим поток занятым 50 мс
console.log("синхронная работа закончена");

Зато у приёма есть законное применение: setTimeout(f, 0) откладывает работу «на потом», отпуская поток и давая браузеру вдохнуть между делами.

let n = 0;
const t0 = Date.now();
(function tick() {
  if (n++ < 20) return setTimeout(tick, 0);
  console.log(Date.now() - t0 > 20);
})();

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

function freeze(ms) {
  const end = Date.now() + ms;
  while (Date.now() < end) {} // страница не отвечает всё это время
}
console.log("начали");
freeze(300);
console.log("отпустили");

Лечится это не ускорением кода, а его нарезкой. Считаем небольшую порцию, отдаём поток браузеру через setTimeout — он успевает нарисовать кадр и обработать клики, — и возвращаемся за следующей порцией.

let sum = 0, i = 0;
function chunk() {
  const end = Math.min(i + 5, 15);
  for (; i < end; i++) sum += i;
  if (i < 15) setTimeout(chunk, 0); // отпускаем поток между порциями
  else console.log(sum);
}
chunk();