Какие API создают microtask, а какие macrotask?

Question

Microtask — это задачи с более высоким приоритетом, которые выполняются сразу после текущего стека вызовов. Macrotask — задачи с обычным приоритетом, которые обрабатываются по очереди между рендерами. Promise и queueMicrotask создают microtask, а setTimeout и события DOM — macrotask. Разница влияет на порядок выполнения и рендер.

YeaHub · Accepted Answer

ОпределениеMicrotask — задача, которая выполняется сразу после завершения текущего синхронного кода.Macrotask — задача, которая попадает в очередь событий и выполняется в следующем цикле event loop.API, создающие microtaskСначала перечислим задачи с высоким приоритетом.Promise.then / catch / finallyqueueMicrotaskMutationObserverPromise.resolve().then(() => {
  console.log("microtask");
});
API, создающие macrotaskТеперь задачи с обычным приоритетом.setTimeoutsetIntervalsetImmediate (в среде Node.js)DOM-события (click, scroll)requestAnimationFrame (особый случай, перед рендером)setTimeout(() => {
  console.log("macrotask");
}, 0);
Порядок выполненияОбщая схема выглядит так:Выполняется синхронный кодВыполняются все microtaskВыполняется рендерВыполняется одна macrotaskПрактический выводMicrotask имеют приоритет над macrotaskНеправильное использование Promise может “отодвигать” рендерЭто важно при оптимизации UIВыводMicrotask и macrotask — разные очереди с разным приоритетом. Знание API, которые их создают, помогает предсказывать порядок выполнения кода.