JavaScript Academy · Урок

queueMicrotask и порядок выполнения

Точно управляйте порядком выполнения.

«queueMicrotask и порядок выполнения» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Познакомьтесь с queueMicrotask

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

Это самый простой инструмент для переноса работы на ближайшую контрольную точку микрозадач.

Базовое использование

Передайте функцию в queueMicrotask. Она выполнится после завершения синхронного кода.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Тот же приоритет, что и у промисов

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

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Опережает setTimeout

Как и любая микрозадача, обратный вызов queueMicrotask выполняется до любой макрозадачи setTimeout, даже если она была поставлена в очередь раньше.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Порядок внутри обработки очереди

Микрозадачи выполняются в порядке FIFO. Первая поставленная в очередь микрозадача выполняется первой, когда очередь обрабатывается.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Вложенные микрозадачи

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

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Полный пример порядка выполнения

Объединим синхронный код, микрозадачи и макрозадачу. Проследите за правилом: сначала синхронное выполнение, затем микрозадачи по порядку, затем таймер.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Чередование с асинхронным выполнением и ожиданием

Продолжение после await также является микрозадачей, поэтому оно чередуется с queueMicrotask в порядке постановки задач в очередь.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Зачем использовать queueMicrotask

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

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Избегайте бесконечных циклов микрозадач

Поскольку микрозадачи полностью обрабатываются до макрозадач, обратный вызов, который постоянно ставит сам себя в очередь, навсегда заблокирует таймеры и отрисовку. Всегда предусматривайте условие остановки.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Полная мысленная модель

Каждый оборот цикла обработки событий: выполните макрозадачу (или начальный скрипт), затем обработайте все микрозадачи, затем выполните отрисовку и повторите. queueMicrotask позволяет точно подключиться к этой фазе обработки очереди.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Быстрая проверка

Когда выполняется обратный вызов queueMicrotask относительно setTimeout(fn, 0)?

Итоги: queueMicrotask и порядок выполнения

Вы научились управлять порядком выполнения на детальном уровне:

queueMicrotask ставит микрозадачу в очередь без промиса.
Он использует общую с обратными вызовами промисов очередь микрозадач и соблюдает порядок FIFO.
Все микрозадачи обрабатываются до любой макрозадачи и до отрисовки.
Модель цикла: макрозадача, обработка микрозадач, отрисовка, повтор.

Часто задаваемые вопросы

Урок «queueMicrotask и порядок выполнения» бесплатный?

Да — полный текст урока «queueMicrotask и порядок выполнения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «queueMicrotask и порядок выполнения»?

Точно управляйте порядком выполнения. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

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

Сколько времени занимает урок «queueMicrotask и порядок выполнения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy