Приведи пример микротаски

Пример микротаски в JavaScript

Давайте рассмотрим классический пример микротаски на основе Promise.resolve(), который демонстрирует приоритетность микротаск перед макротасками в Event Loop.

Код примера

console.log('Начало синхронного кода');

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

// Микротаска через Promise
Promise.resolve()
    .then(() => {
        console.log('Микротаска 1: Promise.resolve');
    })
    .then(() => {
        console.log('Микротаска 2: цепочка then');
    });

// Ещё один способ создания микротаски
queueMicrotask(() => {
    console.log('Микротаска 3: queueMicrotask');
});

console.log('Конец синхронного кода');

Результат выполнения

Начало синхронного кода
Конец синхронного кода
Микротаска 1: Promise.resolve
Микротаска 3: queueMicrotask
Микротаска 2: цепочка then
Макротаска: setTimeout

Почему такой порядок вывода?

Это происходит из-за устройства Event Loop в JavaScript:

1. Синхронный код выполняется немедленно
2. Микротаски (microtasks) обрабатываются сразу после завершения текущего синхронного кода, но до рендеринга и макротаск
3. Макротаски (macrotasks) обрабатываются в следующей итерации Event Loop

Ключевые характеристики микротаск

Микротаски — это задачи, которые имеют высший приоритет в цикле событий:

• Выполняются непрерывно до опустошения очереди микротаск
• Не дают браузеру выполнить рендеринг между микротасками
• Создаются различными API:
  • Promise.then() / Promise.catch() / Promise.finally()
  • queueMicrotask()
  • MutationObserver
  • process.nextTick() (в Node.js)

Практический пример из реальной разработки

// Пример: обработка данных с приоритетом через микротаски
class DataProcessor {
    constructor() {
        this.data = [];
        this.isProcessing = false;
    }
    
    addData(item) {
        this.data.push(item);
        this.scheduleProcessing();
    }
    
    scheduleProcessing() {
        if (this.isProcessing) return;
        
        // Используем микротаску для обработки
        queueMicrotask(() => {
            this.isProcessing = true;
            this.processData();
        });
    }
    
    processData() {
        while (this.data.length > 0) {
            const item = this.data.shift();
            console.log('Обработка:', item);
        }
        this.isProcessing = false;
    }
}

// Использование
const processor = new DataProcessor();

// Эти вызовы будут обработаны как микротаски
processor.addData('Данные 1');
processor.addData('Данные 2');

// Синхронный код выполнится первым
console.log('Синхронная операция');

// Макротаска выполнится после микротаск
setTimeout(() => {
    processor.addData('Данные 3');
}, 0);

Важные нюансы работы с микротасками

• Бесконечные цепочки микротаск могут заблокировать основной поток
• Ошибки в микротасках не прерывают выполнение других микротаск
• Порядок выполнения: микротаски обрабатываются в порядке очереди (FIFO)

Сравнение с макротасками

// Демонстрация разницы приоритетов
console.log('Старт');

// Макротаски
setTimeout(() => console.log('setTimeout 1'), 0);
setInterval(() => {}, 100); // просто для примера

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

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

// Важно: даже если промис создан внутри setTimeout
setTimeout(() => {
    Promise.resolve().then(() => console.log('Promise внутри setTimeout'));
    console.log('setTimeout 2');
}, 0);

console.log('Финиш');

Вывод:

Старт
Финиш
Promise 1
queueMicrotask 1
Promise 2
setTimeout 1
setTimeout 2
Promise внутри setTimeout

Понимание микротаск критически важно для:

• Оптимизации производительности
• Предотвращения блокировок UI
• Корректной работы анимаций
• Реализации сложных асинхронных паттернов

Это основа работы современных фронтенд-фреймворков (React, Vue, Angular), где обновления состояния часто планируются как микротаски для обеспечения согласованности и производительности.