Как работает Event Loop в JavaScript?

Question

Event Loop - это механизм, который позволяет JavaScript обрабатывать асинхронные операции в однопоточном окружении. Он постоянно проверяет очередь задач и выполняет их по порядку. Сначала выполняются все синхронные задачи из call stack, затем микрозадачи (promises), затем макрозадачи (setTimeout, события). Этот цикл обеспечивает неблокирующее выполнение кода.

YeaHub · Accepted Answer

Основные компоненты Event LoopCall Stack (Стек вызовов)LIFO-структура (последний вошел - первый вышел)Хранит выполняемые функцииОдин поток выполнения - одна операция в момент времениjavascriptfunction first() { second(); console.log('First'); } function second() { console.log('Second'); } first(); // Call stack: first -> second -> console.logCallback Queue (Очередь колбэков)FIFO-структура (первый вошел - первый вышел)Хранит готовые к выполнению асинхронные колбэкиМакрозадачи: setTimeout, setInterval, UI eventsMicrotask Queue (Очередь микрозадач)Приоритет над callback queueХранит микрозадачи: Promise then/catch/finally, queueMicrotaskВыполняется полностью после каждого макрозаданияПринцип работы Event LoopБазовый циклВыполнить синхронный код из call stackПроверить очередь микрозадач - выполнить все до опустошенияВыполнить одну макрозадачу из callback queueПовторить с шага 2Практические примерыПример выполненияjavascriptconsole.log('Start'); // 1. Синхронный код setTimeout(() => { console.log('Timeout'); // 4. Макрозадача }, 0); Promise.resolve().then(() => { console.log('Promise'); // 3. Микрозадача }); console.log('End'); // 2. Синхронный код // Результат: Start, End, Promise, TimeoutПодробный разбор выполненияjavascript// 1. Синхронная фаза console.log('Script start'); setTimeout(function timeout1() { console.log('Timeout 1'); }, 0); Promise.resolve().then(function promise1() { console.log('Promise 1'); }); setTimeout(function timeout2() { console.log('Timeout 2'); Promise.resolve().then(function promise2() { console.log('Promise 2'); }); }, 0); console.log('Script end'); /* Порядок выполнения: 1. Script start 2. Script end 3. Promise 1 (микрозадача) 4. Timeout 1 (макрозадача) 5. Timeout 2 (макрозадача) 6. Promise 2 (микрозадача внутри макрозадачи) */Типы очередей и их приоритетыОчередь микрозадач (Microtask Queue)Promise callbacks (.then, .catch, .finally)queueMicrotask()MutationObserver (в браузере)process.nextTick (в Node.js)Очередь макрозадач (Macrotask Queue)setTimeout, setIntervalsetImmediate (Node.js)I/O операцииUI rendering (браузер)События (click, load и т.д.)Event Loop в разных средахБраузерНесколько очередей для разных типов событийRender steps - обновление UI между задачамиRequestAnimationFrame - синхронизация с кадрами анимацииNode.jsНесколько фаз event loop: timers, pending callbacks, idle/prepare, poll, check, closeprocess.nextTick - отдельная очередь с высшим приоритетомsetImmediate - выполнение после фазы pollБлокирующие операцииПроблемы долгих вычисленийjavascript// Плохо - блокирует event loop function heavyCalculation() { let result = 0; for (let i = 0; i < 1000000000; i++) { result += Math.sqrt(i); } return result; } // Лучше - разбить на части async function nonBlockingCalculation() { let result = 0; const chunkSize = 1000000; for (let i = 0; i < 1000000000; i += chunkSize) { // Позволяет event loop обрабатывать другие задачи await new Promise(resolve => setTimeout(resolve, 0)); for (let j = i; j < i + chunkSize; j++) { result += Math.sqrt(j); } } return result; }Best PracticesИзбегание блокировки event loopРазбивайте тяжелые вычисления на частиИспользуйте Web Workers для CPU-intensive задачПрименяйте асинхронные операции для I/OМинимизируйте синхронные операции в циклахПравильное использование Promisejavascript// Эффективное создание микрозадач async function processData(data) { // Используйте queueMicrotask для приоритетных задач queueMicrotask(() => { console.log('High priority task'); }); // Promise для обычных асинхронных операций return await fetch('/api/process', { method: 'POST', body: JSON.stringify(data) }); }Вывод: Понимание Event Loop критически важно для написания эффективного и отзывчивого JavaScript-кода. Используйте асинхронные операции для предотвращения блокировки и правильно распределяйте задачи между очередями.