Что такое макро и микро задачи?

Краткий ответ

Микро задачи — выполняются сразу после текущей операции ⚡ Макро задачи — выполняются в следующем цикле event loop 🔄

// Микро задачи: Promise.then, queueMicrotask
// Макро задачи: setTimeout, setInterval, события
 
console.log('1');
setTimeout(() => console.log('2'), 0); // Макро
Promise.resolve().then(() => console.log('3')); // Микро
console.log('4');
 
// Порядок: 1, 4, 3, 2

Полный ответ

Макро и микро задачи — как очереди в магазине: одни клиенты обслуживаются быстрее, другие ждут своей очереди! 🏪👥

Event Loop — главный организатор

Event Loop — как кассир в магазине: решает, кто следующий будет обслужен:

// Event Loop работает по простым правилам:
// 1. Выполняет текущий код
// 2. Проверяет микро задачи
// 3. Проверяет макро задачи
// 4. Повторяет

Микро задачи — срочные поручения

Микро задачи — как срочные заказы: делают сразу после текущего дела:

// Примеры микро задач:
// - Promise.then/catch/finally
// - queueMicrotask
// - await (внутри использует Promise)
 
console.log('Начало');
 
// Микро задача
Promise.resolve().then(() => console.log('Микро задача'));
 
console.log('Конец');
 
// Порядок выполнения:
// 1. Начало
// 2. Конец  
// 3. Микро задача

Макро задачи — обычные дела

Макро задачи — как обычные покупки: ждут своей очереди:

// Примеры макро задач:
// - setTimeout/setInterval
// - События кликов, скролла
// - XMLHttpRequest (AJAX)
 
console.log('Начало');
 
// Макро задача
setTimeout(() => console.log('Макро задача'), 0);
 
console.log('Конец');
 
// Порядок выполнения:
// 1. Начало
// 2. Конец
// 3. Макро задача

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

Очередь выполнения — строгая иерархия:

console.log('1');
 
// Макро задача
setTimeout(() => console.log('2'), 0);
 
// Микро задача
Promise.resolve().then(() => console.log('3'));
 
// Еще одна микро задача
Promise.resolve().then(() => console.log('4'));
 
console.log('5');
 
// Порядок выполнения:
// 1. '1' (обычный код)
// 2. '5' (обычный код)
// 3. '3' (микро задача)
// 4. '4' (микро задача)
// 5. '2' (макро задача)

Правила очередности:

Обычный код выполняется первым
Все микро задачи — до макро задач
Макро задачи — в следующем цикле

Практическое применение

Использование микро задач

// Когда нужно выполнить код "сразу после"
function updateUI() {
  // Обновляем интерфейс
  element.textContent = 'Новый текст';
  
  // Сразу после — делаем дополнительную работу
  Promise.resolve().then(() => {
    // Эта работа выполнится до любого setTimeout
    console.log('Дополнительная работа');
  });
}

Использование макро задач

// Когда нужно отложить выполнение
function deferWork() {
  // Откладываем до следующего цикла
  setTimeout(() => {
    console.log('Отложенная работа');
  }, 0);
}

Частые ошибки

Не понимать приоритеты

// ❌ Ошибка — думать, что setTimeout выполнится первым
setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
 
// Результат: Promise, затем setTimeout
 
// ✅ Правильно — помнить, что микро задачи первее

Смешивать синхронный и асинхронный код

// ❌ Ошибка — не понимать порядок
console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
Promise.resolve().then(() => console.log('4'));
console.log('5');
 
// Порядок: 1, 3, 5, 4, 2
 
// ✅ Правильно — сначала синхронный код, потом микро, потом макро

Простые правила

Микро задачи — сразу после текущего кода ⚡
Макро задачи — в следующем цикле event loop 🔄
Все микро задачи — до макро задач! 🏃‍♂️
Promise.then — микро задача 🤝
setTimeout — макро задача ⏰
await — использует микро задачи 🔄

Понимание макро и микро задач помогает писать предсказуемый асинхронный код! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪