Avanzadojavascript
El Event Loop y Modelo de Concurrencia
Comprende el corazón del asincronismo en JavaScript: Call Stack, Web APIs, Microtasks (Promesas) y Macrotasks (Timers).
Single Threaded pero No Bloqueante
JavaScript ejecuta código en un único hilo (un solo Call Stack). Sin embargo, puede delegar operaciones costosas (como temporizadores o peticiones de red) al navegador o entorno de Node.js a través de las Web APIs.
javascript
1console.log("1 - Inicio síncrono");
2
3setTimeout(() => {
4 console.log("2 - Macrotask (setTimeout)");
5}, 0);
6
7Promise.resolve().then(() => {
8 console.log("3 - Microtask (Promesa)");
9});
10
11console.log("4 - Fin síncrono");
12
13// Orden de salida:
14// 1 - Inicio síncrono
15// 4 - Fin síncrono
16// 3 - Microtask (Promesa)
17// 2 - Macrotask (setTimeout)Prioridad de Microtasks sobre Macrotasks
Al terminar de vaciar el Call Stack, el Event Loop siempre vacía COMPLETAMENTE la cola de Microtasks (promesas,
queueMicrotask, MutationObserver) antes de tomar la siguiente Macrotask (setTimeout, setInterval, eventos I/O).javascript
1// Crear una microtarea explícita
2queueMicrotask(() => {
3 console.log("Microtarea ejecutada inmediatamente tras el código actual");
4});Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output