React Frontend Developer

Question 1

В чем отличие между microtask queue и task queue?

Accepted Answer

В JavaScript есть две очереди для обработки асинхронных задач: microtask queue и task queue. Microtask queue содержит задачи, такие как Promise и MutationObserver, которые выполняются после завершения текущего стека выполнения, но перед выполнением задач из task queue. В отличие от этого, task queue содержит задачи, связанные с событиями и таймерами, которые обрабатываются только после выполнения всех микротасков.

Question 2

В каком порядке выполняются microtask и macrotask?

Accepted Answer

Microtask выполняются раньше macrotask. Сначала выполняется весь синхронный код, затем очищается очередь microtask, и только потом берётся следующая macrotask. Promise.then и queueMicrotask относятся к microtask, а setTimeout — к macrotask. Это влияет на порядок выполнения кода и рендеринг. Понимание порядка помогает правильно писать асинхронную логику.

Question 3

Что относится к microtask, а что к macrotask?

Accepted Answer

Microtask и macrotask — это разные очереди задач в Event Loop.
Microtask имеют более высокий приоритет и выполняются раньше.
Macrotask выполняются по одной за итерацию цикла.
Неправильное понимание их порядка часто приводит к неожиданному поведению кода.

Question 4

Что произойдет, если очередь microtask будет заполняться бесконечно?

Accepted Answer

Если очередь microtask постоянно пополняется, Event Loop не перейдёт к macrotask.
В результате UI не будет перерисовываться.
Приложение может «зависнуть» без явных ошибок.
Это называется starvation macrotask.

Question 5

Какие задачи относятся к microtasks, а какие к macrotasks?

Accepted Answer

Microtasks — это задачи с более высоким приоритетом, которые выполняются сразу после завершения текущего синхронного кода. К ним относятся Promise.then, catch, finally, queueMicrotask, MutationObserver. Macrotasks — это задачи общего планирования, такие как setTimeout, setInterval, setImmediate, обработчики событий и I/O. Event loop всегда сначала выполняет все microtasks, и только потом берёт следующую macrotask.

Question 6

В каком порядке выполняются setTimeout и Promise.then?

Accepted Answer

Promise.then всегда выполняется раньше, чем setTimeout, даже если таймер имеет задержку 0. Это происходит потому, что then попадает в очередь microtasks, а setTimeout — в очередь macrotasks. После завершения синхронного кода event loop сначала очищает очередь microtasks, и только потом берёт следующую macrotask.

Question 7

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

Accepted Answer

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

Question 8

Может ли микрозадача заблокировать рендер браузера?

Accepted Answer

Да, микрозадачи могут заблокировать рендер браузера. Браузер выполняет все microtask перед тем, как перейти к рендеру. Если microtask постоянно добавляют новые microtask, рендер откладывается. Это состояние называется starvation.

Question 9

Что такое MutationObserver и queueMicrotask?

Accepted Answer

MutationObserver позволяет отслеживать изменения в DOM без постоянных проверок. Он реагирует на добавление, удаление или изменение узлов. queueMicrotask позволяет вручную добавить задачу в очередь microtask. Оба механизма тесно связаны с event loop и выполняются до macrotask.

Question 10

Почему Promise.then попадает в очередь microtasks?

Accepted Answer

Promise.then попадает в microtask queue, чтобы выполняться сразу после текущего синхронного кода. Это даёт более высокий приоритет по сравнению с macrotasks. Такой механизм обеспечивает предсказуемость и согласованность асинхронного поведения. Он позволяет Promise работать быстрее, чем таймеры. Это важная часть спецификации JavaScript.

Вопросы React Frontend Developer