Що таке "microtask queue"?

JavaScriptJunior~2 хв читання

1. Що таке черга мікрозадач

Microtask queue (черга мікрозадач) - це черга задач, які повинні бути виконані одразу після поточного коду, але до наступного макротаска (наприклад, setTimeout, click, load тощо).

Тобто:

JavaScript виконує твій основний код (main script);
потім виконує всі мікротаски (наприклад, .then() з Promise);
і тільки потім переходить до наступного макротаска (наприклад, setTimeout).

2. Приклад (зверни увагу на порядок)

javascript

console.log('1');

setTimeout(() => console.log('2 - setTimeout'), 0);

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

console.log('4');

Результат у консолі:

javascript

1
4
3 - Promise
2 - setTimeout

Чому так:

Спочатку виконується весь синхронний код (1, 4);
Потім - мікротаски (Promise.then);
І тільки потім - макротаски (setTimeout).

3. Які операції створюють мікротаски

Джерело мікротаски	Приклад
Promises	`Promise.resolve().then(...)`
MutationObserver	спостереження за DOM
queueMicrotask()	ручне створення мікротаски
async/await	всередині `await` створюється мікротаска

4. Приклад з `queueMicrotask`

javascript

console.log('A');

queueMicrotask(() => console.log('B - microtask'));

console.log('C');

Вивід:

javascript

A
C
B - microtask

Мікротаска B виконується після завершення поточного коду, але до будь-яких інших подій (setTimeout тощо).

5. Приклад з Promises і setTimeout

javascript

setTimeout(() => console.log('timeout'), 0);

Promise.resolve().then(() => console.log('promise'));

queueMicrotask(() => console.log('microtask'));

Вивід:

javascript

promise
microtask
timeout

Усі мікротаски виконуються до setTimeout.

6. Порядок виконання в Event Loop (спрощено)

javascript

Виконати весь синхронний код (script)
Виконати всі мікротаски (Promise, queueMicrotask)
Перейти до наступного макротаска (setTimeout, DOM events тощо)
Повторити цикл

7. Приклад з async/await

javascript

async function example() {
  console.log('start');
  await null; // створює мікротаску
  console.log('end');
}

example();
console.log('after');

Вивід:

javascript

start
after
end

Чому:

await призупиняє функцію;
код "після" йде в чергу мікрозадач;
після виконання поточного коду (after) - виконується end.

8. Відмінність microtask від macrotask

Тип	Приклади	Коли виконується
Microtask	`Promise.then`, `queueMicrotask`, `await`, `MutationObserver`	Одразу після поточного коду, перед макротасками
Macrotask	`setTimeout`, `setInterval`, `I/O`, `click`, `load`	Після всіх мікротасок, у наступному циклі Event Loop

9. Приклад повної картини

javascript

console.log('1');

setTimeout(() => console.log('2 - макротаск'), 0);

Promise.resolve().then(() => console.log('3 - мікротаск'));

queueMicrotask(() => console.log('4 - мікротаск'));

console.log('5');

Результат:

javascript

1
5
3 - мікротаск
4 - мікротаск
2 - макротаск

Підсумок

Поняття	Що це
Microtask queue	Черга задач, що виконуються після поточного коду, але до наступного макротаска
Приклади джерел	Promises, `queueMicrotask`, `await`, `MutationObserver`
Коли виконуються	Після основного коду і перед `setTimeout`
Навіщо потрібні	Щоб обробляти асинхронний код швидко, без затримок (наприклад, результати Promise)

Запам'ятай просто:

Microtasks виконуються "між рядків" - одразу після твого коду.

Macrotasks (setTimeout, click) виконуються "потім", на наступному кроці Event Loop.

Або коротко: Promises -> microtasks -> швидше, ніж setTimeout.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.