Microtasks vs Macrotasks
Contenido del curso
Microtasks vs Macrotasks
Contenido del curso
Santiago Pineda Botero
andreaamado
Juan Sebastian Traslavina
Julian Sosa
Roger Alberto Chan Arjona
Carlos Emiliano Buelna García
Qué enseña realmente y qué solo aparenta enseñar Enseña la jerarquía de ejecución (síncrono > microtasks > macrotasks). Aparenta enseñar la arquitectura del event loop, pero solo describe sus componentes externos sin explicar la implementación del motor (V8) o las fases específicas del event loop (timers, pending callbacks, poll, check, close).
Contenidos de la clase
Vacíos, omisiones y riesgos pedagógicos Falla pedagógica: No explica el riesgo de "starvation" (inanición) de macrotasks si se encadenan microtasks infinitas. No menciona cómo el bloqueo del hilo principal afecta la interfaz de usuario.
Evaluación por nivel
requestAnimationFrame, que tienen comportamientos específicos fuera de este modelo simple.process.nextTick (Node.js).setTimeout y Promise.then que dispara otro then sin condición de salida.
Rigor: Revela que la clase es teórica y omite riesgos de producción.
Aporte: Define los límites de seguridad del event loop.Pregunta: ¿Por qué setTimeout(fn, 0) no se ejecuta inmediatamente?
Respuesta: Porque es una macrotask y debe esperar a que el call stack y la cola de microtasks estén vacíos.
Elemento concreto: La distinción entre macrotask y ejecución síncrona.
Por qué importa: Corrige la falsa expectativa de ejecución instantánea.
Aplicación: Planificación de tareas de baja prioridad.
Ejemplo: Diferir un log pesado tras renderizar.
Rigor: Muestra la naturaleza asíncrona del event loop.
Aporte: Clarifica el modelo de ejecución.
Pregunta: ¿Cómo afecta la prioridad de microtasks al renderizado del navegador? Respuesta: El navegador intenta renderizar entre macrotasks; muchas microtasks retrasan el frame. Elemento concreto: La jerarquía de ejecución. Por qué importa: Impacta en la fluidez de la UI. Aplicación: Optimización de animaciones. Ejemplo: Evitar promesas pesadas en eventos de scroll. Rigor: La clase ignora el renderizado. Aporte: Conecta JS con el motor de render.
Pregunta: ¿Es setImmediate una macrotask en el navegador?
Respuesta: No, es específica de Node.js y se comporta como macrotask en la fase 'check'.
Elemento concreto: Lista de macrotasks mencionadas.
Por qué importa: Evita errores de portabilidad.
Aplicación: Desarrollo backend.
Ejemplo: Diferir lógica en servidores Express.
Rigor: La clase mezcla entornos sin aclarar.
Aporte: Precisión técnica entre entornos.
Pregunta: ¿Por qué no se puede usar await para pausar el hilo principal?
Respuesta: Porque await solo pausa la función asíncrona, no el hilo principal; el event loop sigue procesando otras tareas.
Elemento concreto: La naturaleza de las promesas como microtasks.
Por qué importa: Desmitifica la "pausa" en JS.
Aplicación: Diseño de flujos asíncronos.
Ejemplo: Esperar una API sin bloquear el botón de cancelar.
Rigor: Explica el modelo no bloqueante.
Aporte: Clarifica la concurrencia.
Por salen las preguntas en ingles?
Hola estuvo interesante pero falto hablar de process.nextTick() como se mezcla con los microtask.
Excelente explicación, he visto otras explicaciones pero esta da al punto.
EVENT LOOP
El Event Loop es el mecanismo interno que permite a JavaScript manejar tareas asíncronas aunque el lenguaje funcione con un solo hilo (single thread).
Su función principal es coordinar la ejecución del código, revisando constantemente qué tareas están listas para ejecutarse y en qué orden deben entrar al Call Stack.
¿Cómo funciona?
El Event Loop conecta:
el Call Stack (donde se ejecuta el código),
con las colas de tareas pendientes.
Su regla principal es:
Solo mueve una tarea al Call Stack cuando este está completamente vacío.
Tipos de tareas
JavaScript maneja dos categorías principales de tareas:
1. Macrotask
Ejemplos:
Las macrotask se ejecutan una por una.
El Event Loop toma una tarea, la ejecuta completamente y luego pasa a la siguiente.
2. Microtask
Ejemplos:
.then()
.catch()
.finally()
queueMicrotask()
Las microtask tienen mayor prioridad que las macrotask.
Generalmente son generadas por las Promises y se almacenan en una cola especial que el Event Loop procesa antes de continuar con otras tareas.
Regla importante
Todas las microtask se ejecutan antes de cualquier macrotask.
Esto significa que:
termina una tarea actual,
el Event Loop vacía completamente la cola de microtask,
y recién después ejecuta la siguiente macrotask.
Orden de ejecución en JavaScript
Cuando en un archivo existe código síncrono, microtask y macrotask, el orden será:
Una promesa puede entenderse como una abstracción de alto nivel para manejar operaciones asíncronas. Con posibles estados pendiente, resuelta y rechazada.
Una microtask es la unidad de trabajo que se ejecuta en la cola.
La regla mental microtask siempre antes que la siguiente macrotask.