El event loop: call stack queue microtasks
Visualice cómo se ejecuta JavaScript: la pila de llamadas, la cola de tareas, las microtareas de Promises y por qué la interfaz nunca se bloquea durante operaciones asíncronas.
El event loop: call stack queue microtasks es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
JavaScript es monohilo
JavaScript se ejecuta en un único hilo: solo puede ejecutar una parte del código a la vez. Sin embargo, gestiona miles de operaciones asíncronas (peticiones de red, temporizadores y eventos de interfaz) sin bloquearse. ¿Cómo? Mediante el bucle de eventos.
La pila de llamadas
La pila de llamadas es donde JavaScript realiza el seguimiento de la función que se está ejecutando. Cuando se llama a una función, se apila un frame. Cuando esta devuelve un resultado, el frame se desapila. Si la pila se llena (por una recursión infinita), se produce un desbordamiento de pila.
function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();
// Call stack during c():
// c ← top
// b
// a
// (anonymous)Web APIs — Delegar trabajo
Cuando JavaScript llama a una función asíncrona (setTimeout, fetch, addEventListener), el trabajo se delega en una Web API del navegador. El motor de JS continúa con la línea siguiente: no espera.
console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2La cola de tareas (cola de macrotareas)
Cuando se completa una operación de Web API (vence un temporizador, fetch se resuelve), el callback se coloca en la cola de tareas (cola de macrotareas). El bucle de eventos mueve el callback a la pila de llamadas solo cuando la pila está vacía.
La cola de microtareas
Las Promises utilizan una cola de microtareas, una cola de alta prioridad. Después de que se completa cada tarea y antes de seleccionar la siguiente, se vacían todas las microtareas pendientes. Las microtareas siempre se ejecutan antes de la siguiente macrotarea.
console.log('1');
setTimeout(() => console.log('timeout'), 0); // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeoutEl bucle de eventos en acción
Algoritmo del bucle de eventos: 1) Ejecute la tarea actual de la pila de llamadas hasta que quede vacía. 2) Vacíe toda la cola de microtareas. 3) Opcionalmente, realice el renderizado. 4) Seleccione la siguiente macrotarea y repita el proceso.
queueMicrotask()
queueMicrotask(fn) programa un callback en la cola de microtareas sin crear una Promise. Rara vez hace falta usarlo directamente, pero resulta útil para comprender cómo las bibliotecas implementan la programación de tareas.
queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtaskPor qué las tareas largas congelan la interfaz
Si una tarea sincrónica se ejecuta durante demasiado tiempo (por ejemplo, un bucle intensivo que procesa muchos datos), el bucle de eventos no puede procesar los eventos de la interfaz ni realizar renderizados. Esto congela la página. Divida el trabajo largo en fragmentos con setTimeout para devolver el control al bucle de eventos.
// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }
// Better — yield periodically:
async function processInChunks(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
}
}Web Workers: paralelismo real
Para trabajos que requieren mucho procesamiento de la CPU, utilice un Web Worker, un hilo independiente con su propio bucle de eventos. Los workers se comunican con el hilo principal mediante postMessage. No hay memoria compartida ni condiciones de carrera.
requestAnimationFrame
requestAnimationFrame(callback) programa un callback antes del siguiente repintado del navegador. Úselo para animaciones controladas por JavaScript: se sincroniza con la frecuencia de actualización de la pantalla (normalmente, 60fps).
function animate(timestamp) {
// update positions based on timestamp
element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);Visualización del bucle de eventos
La demostración interactiva de latentflip.com/loupe le permite pegar código y observar la pila de llamadas, la Web API, la cola de tareas y el bucle de eventos a cámara lenta. Es esencial para desarrollar una comprensión intuitiva.
Comprobación rápida
Después de que se resuelve una Promise, ¿en qué cola se ejecuta su callback .then()?
Resumen: el bucle de eventos
JavaScript es monohilo. El trabajo asíncrono se envía a las Web APIs. Los callbacks regresan mediante la cola de tareas (setTimeout, callbacks de fetch) o la cola de microtareas (Promises). El bucle de eventos vacía las microtareas después de cada tarea, antes del siguiente renderizado o de la siguiente macrotarea. El código sincrónico largo bloquea todo.
Preguntas frecuentes
¿La lección «El event loop: call stack queue microtasks» es gratis?
Sí — el texto completo de «El event loop: call stack queue microtasks» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El event loop: call stack queue microtasks»?
Visualice cómo se ejecuta JavaScript: la pila de llamadas, la cola de tareas, las microtareas de Promises y por qué la interfaz nunca se bloquea durante operaciones asíncronas. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El event loop: call stack queue microtasks»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El event loop: call stack queue microtasks
- Callbacks y callback hell
- Promises: then catch finally Promise.all
- async/await y gestión de errores