Когда добавляются задачи в очередь microtask?

Microtask — часть механизма event loop, который определяет порядок выполнения асинхронного кода.

1) Когда создаются microtask

Microtask добавляются при:

1. Выполнении Promise.then, catch, finally.

2. Вызове queueMicrotask.

3. Использовании MutationObserver.

Пример:

Promise.resolve().then(() => {
  console.log("microtask");
});

2) Когда они выполняются

Определение: Microtask queue — очередь задач, которая выполняется сразу после завершения текущего стека вызовов, но до следующей macrotask.

Порядок:

1. Выполняется текущий код.

2. Выполняются все microtask.

3. Затем следующая macrotask.

3) Отличие от macrotask

Macrotask:

1. setTimeout

2. setInterval

3. события DOM

Microtask:

1. Promise

2. queueMicrotask

Пример:

setTimeout(() => console.log("macrotask"));
Promise.resolve().then(() => console.log("microtask"));

Результат:

microtask
macrotask

4) Почему это важно для React и браузера

1. Microtask могут выполняться перед отрисовкой.

2. Большое количество microtask может задержать repaint.

3. Это влияет на производительность.

Вывод: microtask добавляются при работе Promise и подобных механизмов и выполняются сразу после текущего кода, раньше macrotask.