В чем отличие Event Loop в браузере от Event Loop в Node.js?

Отличие Event Loop в браузере vs Node.js

Event Loop — это механизм для выполнения асинхронного кода, но реализация кардинально отличается.

Event Loop в браузере

Фазы браузерного Event Loop:

1. Call Stack (стек вызовов)
2. Web APIs (таймеры, fetch, события)
3. Callback Queue (микротаски, потом макротаски)
4. Event Loop (проверяет очередь)

Порядок выполнения:

// 1️⃣ Микротаски (высший приоритет)
Promise.resolve().then(() => console.log("Promise"));
queueMicrotask(() => console.log("Microtask"));

// 2️⃣ Макротаски (низший приоритет)
setTimeout(() => console.log("Timeout"), 0);

// 3️⃣ UI рендеринг
requestAnimationFrame(() => console.log("Animation"));

console.log("Synchronous");

// Результат:
// Synchronous
// Promise
// Microtask
// Animation Frame
// Timeout

Event Loop в Node.js

Node.js имеет более сложный Event Loop с 6 фазами:

1. Timers (setTimeout, setInterval)
2. Pending Callbacks
3. Idle, Prepare (внутренние)
4. Poll (I/O операции)
5. Check (setImmediate)
6. Close Callbacks

Пример в Node.js:

console.log("1. Start");

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

Promise.resolve()
  .then(() => console.log("3. Promise"));

setImmediate(() => {
  console.log("4. setImmediate");
});

console.log("5. End");

// Node.js:
// 1. Start
// 5. End
// 3. Promise
// 2. setTimeout (Phase: Timers)
// 4. setImmediate (Phase: Check)

Ключевые отличия

process.nextTick — уникально для Node.js

console.log("1. Start");

process.nextTick(() => console.log("2. nextTick"));
Promise.resolve().then(() => console.log("3. Promise"));

console.log("4. End");

// Node.js:
// 1. Start
// 4. End
// 2. nextTick ✅ Выполняется ДО Promise!
// 3. Promise

// Браузер:
// 1. Start
// 4. End
// 3. Promise (nextTick не существует)

Микротаски vs Макротаски

Браузер - Микротаски:

• Promise.then()
• queueMicrotask()
• MutationObserver

Браузер - Макротаски:

• setTimeout
• setInterval
• requestAnimationFrame
• I/O

Node.js - Микротаски:

• Promise.then()
• queueMicrotask()
• process.nextTick() (выполняется ПЕРВЫМ!)

Node.js - Макротаски (по фазам):

• setTimeout/setInterval (Phase: Timers)
• I/O (Phase: Poll)
• setImmediate (Phase: Check)

Практический пример

// Браузер:
setTimeout(() => console.log("Macro 1"), 0);
Promise.resolve().then(() => console.log("Micro 1"));
setTimeout(() => console.log("Macro 2"), 0);
Promise.resolve().then(() => console.log("Micro 2"));

// Браузер результат:
// Micro 1
// Micro 2
// Macro 1
// Macro 2

// Node.js (почти то же, но может быть другой порядок):
// Micro 1
// Micro 2
// Macro 1
// Macro 2

Почему это важно?

1. Браузер — нужно учитывать UI рендеринг, requestAnimationFrame полезен для анимаций
2. Node.js — нужно знать о фазах для оптимизации асинхронного кода
3. process.nextTick в Node.js имеет ВЫСШИЙ приоритет
4. setImmediate в Node.js выполняется после I/O (Poll phase)