Чем отличаются microtask’и, создаваемые промисами, от microtask’ов, созданных queueMicrotask

1️⃣ Как кратко ответить

Microtask’и, создаваемые промисами, автоматически добавляются в очередь microtask’ов при разрешении или отклонении промиса. queueMicrotask позволяет вручную добавить функцию в очередь microtask’ов. Оба метода добавляют задачи в одну и ту же очередь, но queueMicrotask предоставляет прямой контроль над добавлением задач.

2️⃣ Подробное объяснение темы

В JavaScript существует два типа очередей для выполнения задач: очередь макрозадач (macrotask queue) и очередь микрозадач (microtask queue). Понимание различий между ними и их применением важно для управления асинхронным кодом.

Что такое microtask?

Microtask — это небольшая задача, которая выполняется после завершения текущей операции и перед началом следующей макрозадачи. Microtask’и обеспечивают более высокий приоритет выполнения по сравнению с макрозадачами, что позволяет им выполняться быстрее.

Промисы и microtask’и

Когда промис разрешается (fulfilled) или отклоняется (rejected), его обработчики (then, catch, finally) добавляются в очередь microtask’ов. Это означает, что они будут выполнены после завершения текущего цикла событий, но до выполнения любых макрозадач, таких как setTimeout или setInterval.

Пример:

console.log('Начало');
​
Promise.resolve().then(() => {
  console.log('Промис выполнен');
});
​
console.log('Конец');

• console.log('Начало') и console.log('Конец') выполняются синхронно.
• Promise.resolve().then(...) добавляет обработчик в очередь microtask’ов.
• console.log('Промис выполнен') выполняется после завершения текущего стека вызовов, но до любых макрозадач.

queueMicrotask

queueMicrotask — это метод, который позволяет вручную добавить функцию в очередь microtask’ов. Это полезно, когда нужно выполнить небольшую задачу с высоким приоритетом после текущего стека вызовов.

Пример:

console.log('Начало');
​
queueMicrotask(() => {
  console.log('Microtask выполнен');
});
​
console.log('Конец');

• console.log('Начало') и console.log('Конец') выполняются синхронно.
• queueMicrotask(...) добавляет функцию в очередь microtask’ов.
• console.log('Microtask выполнен') выполняется после завершения текущего стека вызовов.

Сравнение

• Промисы: Автоматически добавляют обработчики в очередь microtask’ов при разрешении или отклонении.
• queueMicrotask: Предоставляет прямой контроль для добавления функций в очередь microtask’ов.

Оба метода добавляют задачи в одну и ту же очередь, но queueMicrotask позволяет разработчику явно управлять добавлением задач, что может быть полезно для оптимизации и управления асинхронным поведением приложения.