Microtasks

Stack & Event Loop (tasks, microtasks)

JS выполняет одно задание в единицу времени.

Последовательность заданий формируется в стеке.

Цикл событий (Event Loop) - параллельные стеку процессы (в браузере или NodeJS), управляет формированием очереди для вставки в стек асинхронных заданий.

Цикл событий (Event Loop) имеет три отдельных очереди.

Queues:

tasks: события DOM, setTimeout, setInterval и др/
microtasks promise и MutationObserver (аналог события)
render расчет стилей, применение стилий, расчет layout, попиксельній расчет и отрисовка

Microtasks

Выполняются сразу после tasks
В отличие от tasks имеют максимальный приоритет и загружаются в стек до тех пор, пока очередь microtasks не опустошится. Если при добавлении microtasks в очередь будут поступать следующие задачи до опустошения очереди, то это заблокирует другие очереди и rendring в том числе.

Пример последовательности выполнения заданий из очереди tasks и microtasrs

 
console.log('старт программы');

setTimeout(function() {
  console.log('setTimeout 0');
}, 0);

Promise.resolve().then(function() {
  console.log('promise');
}).then(function() {
  console.log('следующий promise');
});

console.log('выход из потока');
console.log('выход из программы');