Зачем нужны micro tasks?

Зачем нужны micro tasks?

Micro tasks (микротаски) — это очень важная концепция в JavaScript, которая относится к управлению асинхронным кодом и порядком выполнения операций. Они являются частью Event Loop и работают на более высоком приоритете, чем обычные задачи (макротаски).

Что такое micro tasks?

Micro tasks — это асинхронные операции, которые выполняются сразу после завершения текущего синхронного кода, но ДО выполнения следующей макротаски (например, setTimeout). К микротаскам относятся:

• Promises (then, catch, finally)
• async/await (который под капотом использует Promises)
• MutationObserver
• queueMicrotask() — явное добавление в очередь микротасок

Очередь выполнения (Event Loop)

Event Loop работает по следующему принципу:

1. Выполнить синхронный код (call stack)
2. Выполнить ВСЕ микротаски (microtask queue)
3. Выполнить одну макротаску (macrotask queue)
4. Перейти к шагу 2

Вот наглядный пример:

console.log('1. Синхронный код');

setTimeout(() => {
  console.log('4. Макротаска (setTimeout)');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('2. Микротаска (Promise)');
  });

console.log('3. Ещё синхронный код');

// Вывод:
// 1. Синхронный код
// 3. Ещё синхронный код
// 2. Микротаска (Promise)
// 4. Макротаска (setTimeout)

Этот порядок вывода показывает приоритет: синхронный код → все микротаски → первая макротаска.

Зачем они нужны?

1. Гарантия порядка выполнения

Микротаски гарантируют, что операции выполнятся в предсказуемом порядке. Это критично для работы с Promise chains и async/await.

const promise = Promise.resolve();
promise.then(() => console.log('Первый then'));
promise.then(() => console.log('Второй then'));

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

// Оба then выполнятся РАНЬШЕ, чем setTimeout

2. Эффективность

Микротаски выполняются быстрее, чем макротаски (setTimeout, setInterval). Они не требуют ожидания (обычно 1-4 мс), что улучшает производительность.

3. Работа с асинхронным кодом

Без микротасок Promises были бы невозможны или крайне неэффективны. async/await полностью полагается на микротаски.

async function fetchData() {
  const response = await fetch('/api/data'); // микротаска
  return response.json();
}

4. Реактивность UI

Микротаски позволяют обновить состояние (state) в React или Vue ДО перерисовки, что обеспечивает корректное отображение.

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

const queueMicrotask = () => {
  console.log('Микротаска 1');
};

Promise.resolve()
  .then(() => console.log('Микротаска 2'));

setTimeout(() => {
  console.log('Макротаска');
  Promise.resolve().then(() => console.log('Микротаска 3'));
}, 0);

// Вывод:
// Микротаска 1
// Микротаска 2
// Макротаска
// Микротаска 3

Выводы

Микротаски — это механизм, который делает JavaScript асинхронность предсказуемой и эффективной. Понимание их работы критично для:

• Отладки проблем с порядком выполнения кода
• Оптимизации производительности
• Правильной работы с Promises и async/await
• Разработки реактивных интерфейсов

Это одна из фундаментальных концепций современного JavaScript, которую должен понимать каждый frontend-разработчик.