Что относится к микро- и макротаскам в Event Loop?

Event Loop: микро- и макротаски

• Event Loop — механизм, управляющий асинхронным выполнением кода в JS
• Макротаски: I/O-события, setTimeout, setInterval, setImmediate и рендеринг
• Микротаски: callbacks промисов, process.nextTick (Node.js), MutationObserver
• Микротаски запускаются сразу после завершения текущего стека и раньше макротасок
• Макротаски выполняются после обработки всех микротасок и до начала следующего цикла Event Loop
• Порядок выполнения: стек → микротаски → макротаски → перерисовка
• Обеспечивает предсказуемость и эффективность асинхронного кода в браузерах и Node.js

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

Основной ответ

Event Loop в JavaScript — механизм, обеспечивающий асинхронное выполнение кода. Он распределяет работу между макротасками (macro-tasks) и микротасками (micro-tasks), определяя порядок их обработки. Макротаски представляют собой крупные операции, например обработку сетевых событий или таймеров. Микротаски — это небольшие, но более приоритетные действия: они выполняются сразу после завершения текущего стека вызовов и до запуска следующей макротаски.

Ключевые моменты

• Макротаски (macro-tasks): выполняют код, который находится за пределами контекста текущей функции, включая обработчики событий (click, setTimeout, setInterval), I/O-события и задачи Web APIs, например setTimeout. После завершения макротаски Event Loop переходит к проверке очереди микротасок.
• Микротаски (micro-tasks): к ним относятся промисы (Promise.then, catch, finally), операции MutationObserver и queueMicrotask. Это более приоритетные задачи: они запускаются сразу после завершения текущего стека вызовов, но ещё до следующей макротаски.
• Итак, микротаски быстро выполняют небольшие операции и подготавливают приложение к следующему циклу Event Loop. Благодаря этому сохраняются предсказуемый порядок выполнения и более плавное отображение UI.

Практический контекст

В React 18+ и актуальных браузерах микротаски помогают оптимизировать рендеринг и не допускать "мерцания" UI. Например, после обработки события click (макротаски) все callbacks промисов (микротаски) выполняются до запуска следующей макротаски, поэтому состояние обновляется мгновенно. Понимание этой разницы необходимо для оптимизации асинхронных операций и предотвращения ошибок, связанных с порядком выполнения кода.