Что такое микротаски

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

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

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

Микротаски — это часть модели событийного цикла в JavaScript, которая определяет порядок выполнения асинхронных операций. Чтобы понять, как работают микротаски, важно сначала разобраться с понятием событийного цикла.

Событийный цикл — это механизм, который позволяет JavaScript выполнять код, собирать и обрабатывать события и выполнять подзадачи из очереди. Он состоит из нескольких этапов, включая выполнение кода, обработку макротасок и микротасок.

Макротаски и микротаски

• Макротаски: Это крупные задачи, такие как обработка событий, выполнение setTimeout, setInterval и другие. Они выполняются в очереди макротасок.
• Микротаски: Это более мелкие задачи, которые выполняются после текущей макротаски и перед началом следующей. Примеры включают обработку промисов и вызовы process.nextTick в Node.js.

Как работают микротаски

Когда JavaScript выполняет код, он сначала завершает текущую макротаску. После этого он проверяет очередь микротасок и выполняет все задачи из этой очереди, прежде чем перейти к следующей макротаске. Это гарантирует, что микротаски всегда выполняются до следующего рендеринга.

Пример кода

console.log('Начало'); // Выводит "Начало"
​
setTimeout(() => {
  console.log('Макротаска'); // Выводится после всех микротасок
}, 0);
​
Promise.resolve()
  .then(() => {
    console.log('Микротаска 1'); // Выполняется после текущей макротаски
  })
  .then(() => {
    console.log('Микротаска 2'); // Выполняется после предыдущей микротаски
  });
​
console.log('Конец'); // Выводит "Конец"

Пояснение к коду

1. console.log('Начало'); — Синхронный код, выполняется сразу.
2. setTimeout(() => { ... }, 0); — Добавляет функцию в очередь макротасок.
3. Promise.resolve().then(...).then(...); — Добавляет функции в очередь микротасок.
4. console.log('Конец'); — Синхронный код, выполняется сразу после "Начало".
5. После завершения текущей макротаски (весь синхронный код), выполняются все микротаски:
   • console.log('Микротаска 1');
   • console.log('Микротаска 2');
6. После выполнения всех микротасок, выполняется макротаска из очереди:
   • console.log('Макротаска');

Зачем нужны микротаски

Микротаски позволяют выполнять асинхронные операции с более высоким приоритетом, чем макротаски. Это особенно полезно для обработки промисов, где важно, чтобы все then-обработчики были выполнены до следующего рендеринга. Это помогает поддерживать плавность интерфейса и своевременную обработку данных.