Что такое microtask

Вопрос

Что такое microtask

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет услышать, что кандидат понимает разницу между микрозадачами и макрозадачами, а также знает, как они взаимодействуют в цикле событий JavaScript. Также важно упомянуть примеры использования микрозадач, таких как промисы.

Ключевые тезисы

• Microtask — это задача, которая выполняется после текущей синхронной задачи, но до выполнения других задач из очереди событий.
• Microtasks используются для выполнения кода, который должен быть выполнен быстро и с минимальной задержкой, например, промисы и обработчики MutationObserver.
• Microtasks имеют приоритет над макрозадачами (например, setTimeout, setInterval) и выполняются в рамках одного цикла событий.

Подробный ответ

Microtask (микрозадача) — это задача, которая выполняется в рамках одного цикла событий (event loop), но после завершения текущей синхронной задачи и до выполнения других задач из очереди событий, таких как макрозадачи. Microtasks используются для выполнения кода, который должен быть обработан быстро и с минимальной задержкой. Примеры microtasks включают обработку промисов (Promise) и вызовы MutationObserver. Важно понимать, что microtasks имеют более высокий приоритет по сравнению с макрозадачами (например, setTimeout, setInterval), что позволяет им выполняться раньше, даже если они были добавлены позже. Этот механизм обеспечивает более эффективное управление асинхронным кодом, особенно в случаях, когда требуется выполнить задачи с минимальной задержкой. Однако чрезмерное использование microtasks может привести к проблемам с производительностью, так как они блокируют выполнение других задач до тех пор, пока очередь microtasks не будет полностью очищена.

Практические примеры

Пример 1

Обработка промисов. Когда промис разрешается (resolve), его обработчики then, catch и finally добавляются в очередь microtasks и выполняются сразу после завершения текущей синхронной задачи. Пример кода:

console.log('Start');
Promise.resolve().then(() => console.log('Microtask 1'));
setTimeout(() => console.log('Macrotask 1'), 0);
console.log('End');
// Output: Start, End, Microtask 1, Macrotask 1

Пример 2

Использование MutationObserver. MutationObserver позволяет отслеживать изменения в DOM и добавляет обработчики в очередь microtasks. Это полезно, когда нужно быстро реагировать на изменения в DOM. Пример кода:

const targetNode = document.createElement('div');
const observer = new MutationObserver(() => console.log('DOM changed!'));
observer.observe(targetNode, { attributes: true });
targetNode.setAttribute('data-example', 'value');

Частые ошибки

• Типичная ошибка — непонимание порядка выполнения microtasks и macrotasks. Например, кандидаты могут ожидать, что setTimeout выполнится раньше, чем обработчик промиса, что неверно.
• Другая ошибка — создание слишком большого количества microtasks, что может привести к блокировке основного потока и снижению производительности приложения.

Связанные темы

• Цикл событий (event loop)
• Промисы (Promises)
• Макрозадачи (macrotasks)
• Асинхронный код в JavaScript
• Оптимизация производительности веб-приложений

Follow-up вопросы

Какие примеры microtasks вы можете назвать?

Уровень: basic

Примеры microtasks включают промисы (Promise) и обработчики MutationObserver. Эти задачи выполняются в рамках текущего цикла событий, до того как браузер перейдет к макрозадачам.

В чем отличие microtasks от macrotasks?

Уровень: intermediate

Microtasks выполняются сразу после текущей синхронной задачи и до того, как браузер перейдет к макрозадачам (например, setTimeout, setInterval). Макрозадачи выполняются в следующем цикле событий.

Как работает очередь microtasks в цикле событий?

Уровень: intermediate

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

Можно ли создавать собственные microtasks? Если да, то как?

Уровень: advanced

Создавать собственные microtasks можно через промисы (Promise) или используя API, такие как queueMicrotask. Это позволяет выполнять код с минимальной задержкой в рамках текущего цикла событий.

Как microtasks влияют на производительность приложения?

Уровень: advanced

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