Microtareas en JavaScript
La cola de microtareas en JavaScript es clave del modelo asíncrono: prioriza ciertas devoluciones de llamada y las ejecuta antes que el event loop continúe.
En JavaScript, la cola de microtareas es un componente fundamental del modelo de ejecución asíncrona. Prioriza ciertas devoluciones de llamada, garantizando que se ejecuten después del script actual pero antes de que el event loop continúe con otras tareas como la renderización o la gestión de eventos de usuario. Esta guía ofrece un análisis profundo sobre cómo utilizar eficazmente la cola de microtareas para mejorar las aplicaciones JavaScript.
Comprendiendo el Event Loop y la Cola de Microtareas
El motor JavaScript utiliza un event loop que gestiona la ejecución de scripts, permitiendo operaciones no bloqueantes. La cola de microtareas forma parte de este event loop. Se usa específicamente para las promesas (consulta JavaScript: Promises) y otras operaciones como queueMicrotask, garantizando que se procesen al final de la ejecución actual del event loop de JavaScript, antes de la fase de renderización.
Hay dos colas distintas que conviene tener en cuenta:
- La cola de microtareas contiene las devoluciones de llamada de promesas resueltas/rechazadas y de
queueMicrotask(). Después de cada tarea, el motor vacía esta cola por completo antes de hacer cualquier otra cosa. - La cola de macrotareas (a veces llamada cola de tareas) contiene las devoluciones de llamada de
setTimeout,setInterval, I/O y eventos de UI. Solo se ejecuta una macrotarea por iteración del bucle.
La regla clave: cuando el código síncrono actual termina, el motor vacía primero la cola de microtareas por completo, y solo entonces recoge la siguiente macrotarea. Por eso una devolución de llamada de una promesa siempre se ejecuta antes que la de un setTimeout(…, 0) programado anteriormente. Para ver el panorama completo de cómo interactúan estas colas, consulta Event Loop: Microtasks and Macrotasks.
Ejemplo: Promesa Básica
En este ejemplo, la consola registra primero 'Script end' y luego 'Promise resolved'. Esto muestra cómo JavaScript difiere las resoluciones de promesas a la cola de microtareas.
¿Cómo Funciona la Cola de Microtareas?
La cola de microtareas ejecuta las tareas programadas como microtareas. Esto incluye operaciones de:
- Promesas
- Object.observe (obsoleto)
- MutationObserver
- API
queueMicrotask()
Cada una de estas microtareas se procesa completamente antes de pasar a la siguiente o antes de que se ejecute cualquier renderización u otras macrotareas.
Programación de Microtareas
Puedes programar microtareas directamente usando la función queueMicrotask. Esta función recibe una devolución de llamada y la añade a la cola de microtareas. Como puedes ver, la cola se ejecuta después de que todas las demás tareas hayan terminado.
Microtarea vs. Macrotarea: Por Qué una Promesa Supera a setTimeout(0)
Un punto de confusión común es por qué una devolución de llamada de una promesa se ejecuta antes que la de un setTimeout(…, 0), incluso cuando el temporizador se programa primero. La respuesta es la regla anterior: una vez que el código síncrono termina, el motor vacía la cola de microtareas completa antes de tocar la cola de macrotareas, donde viven las devoluciones de llamada de setTimeout. Incluso un temporizador con retraso cero tiene que esperar.
La salida siempre es:
1: synchronous start
2: synchronous end
3: promise (microtask)
4: setTimeout (macrotask)Las líneas 1 y 2 se ejecutan primero porque el código síncrono nunca cede. Luego se vacía la cola de microtareas (la devolución de llamada de la promesa), y solo después llega el turno de la siguiente macrotarea — la devolución de llamada de setTimeout. Aprende más sobre los temporizadores en Scheduling: setTimeout and setInterval.
Orden Dentro de la Cola de Microtareas
Las microtareas se ejecutan en el orden en que fueron puestas en cola (FIFO). Mezclar devoluciones de llamada .then() con queueMicrotask() lo deja claro — ambas alimentan la misma cola, por lo que el resultado es simplemente primero en entrar, primero en salir:
Esto registra start, end, promise 1, queueMicrotask, promise 2. Ten en cuenta que una microtarea programada por otra microtarea se añade a la misma cola y se ejecuta en el mismo ciclo de vaciado — antes de cualquier renderización o macrotarea. Esto es exactamente lo que hace que los bucles de microtareas descontrolados puedan privar al resto de la página de recursos.
Aplicaciones Prácticas de las Microtareas
Las microtareas son especialmente útiles en aplicaciones web complejas para tareas que requieren atención inmediata después del script actual, pero antes de que el sistema gestione otros eventos o vuelva a renderizar la UI.
Escenario: Procesamiento de Datos en Tiempo Real
Considera un escenario donde los datos en tiempo real de un servidor deben procesarse sin interrumpir la experiencia del usuario:
Este ejemplo demuestra cómo obtener datos de forma asíncrona, procesarlos y programar una actualización de la UI en la cola de microtareas.
Manejo Eficiente de Errores en Promesas
Gestionar los errores de forma efectiva en el código asíncrono es crucial. Usar la cola de microtareas con el manejo de errores de promesas garantiza que los errores se traten inmediatamente después de la lógica de resolución de la promesa, pero antes que otras tareas no relacionadas.
Buenas Prácticas para Usar la Cola de Microtareas
- Ordenar Tareas: Comprender cuándo usar microtareas para garantizar la secuenciación correcta de las operaciones.
- Evitar el Agotamiento de Recursos: Asegurarse de que la cola de microtareas no reciba continuamente nuevas tareas, impidiendo que se ejecuten macrotareas como las actualizaciones de la UI.
- Depuración: Rastrear y depurar la ejecución de microtareas para evitar comportamientos inesperados en el código asíncrono.
Conclusión
Dominar la cola de microtareas en JavaScript es esencial para desarrollar aplicaciones avanzadas y receptivas. Al aprovechar eficazmente este poderoso componente del modelo de ejecución de JavaScript, los desarrolladores pueden garantizar interacciones más fluidas y no bloqueantes, y una experiencia de usuario mejorada. Esta exploración proporciona los conocimientos fundamentales y las habilidades prácticas para utilizar la cola de microtareas de forma efectiva en cualquier proyecto basado en JavaScript.