JavaScript
Explica cómo el Event Loop coordina el Call Stack, las colas, los checkpoints de microtasks y las oportunidades de renderizado sin interrumpir el trabajo actual.
El coordina cuándo puede comenzar una nueva unidad de trabajo en un agente de JavaScript.
Call Stack ocupado
↓ termina
procesar microtasks
↓
posible renderizado
↓
elegir otra task
↓
ejecutarla en el stackCada job o callback de JavaScript se ejecuta hasta:
await.button.addEventListener("click", () => {
updateA();
updateB();
});Otro evento no entra entre updateA y updateB mientras esa callback siga ejecutándose.
El stack contiene las llamadas que se están ejecutando.
Las colas contienen trabajo preparado para ejecutarse después.
Queue: callback lista
Stack: callback ejecutándoseUna callback encolada no está “dentro” del stack esperando.
Los navegadores manejan distintas fuentes de tareas: eventos, timers, networking, mensajes y otras. El runtime puede elegir entre fuentes respetando las reglas de la plataforma.
Por eso el modelo educativo de “una callback queue” es útil para empezar, pero incompleto.
Los detalles exactos dependen del host.
console.log("A");
setTimeout(() => {
console.log("B");
}, 0);
console.log("C");Resultado:
A
C
BEl timer no ejecuta B inmediatamente. Programa una oportunidad futura.
console.log("A");
Promise.resolve().then(() => {
console.log("B");
});
console.log("C");Resultado:
A
C
BLa reacción de la promesa también espera a que termine el código actual, aunque se procesa como microtask y tiene una prioridad de checkpoint distinta a una task de timer.
El navegador necesita oportunidades para:
Una task larga puede impedir esas oportunidades.
button.addEventListener("click", () => {
processMillionsOfItems();
});Aunque no exista un bucle infinito, una sola callback demasiado larga puede producir una interfaz congelada.
Una estrategia es procesar por partes y devolver control al host.
function processInChunks(items) {
let index = 0;
function runChunk() {
const limit = Math.min(index + 100, items.length);
while (index < limit) {
processItem(items[index]);
index++;
}
if (index < items.length) {
setTimeout(runChunk, 0);
}
}
runChunk();
}Esto no paraleliza, pero crea oportunidades entre chunks.
Ambos tienen Event Loop, pero sus fases, APIs y prioridades no son idénticas.
No extrapoles reglas específicas de process.nextTick, setImmediate o fases de Node.js hacia el navegador.
Una API puede provocar ejecución adicional antes de que tu función termine si llama código de usuario de forma síncrona.
items.sort(comparator);sort llama al comparator durante la operación actual. Eso no pasa por una task futura; es una llamada síncrona normal.
let state = "idle";
async function load() {
state = "loading";
const data = await fetchData();
state = "success";
return data;
}Entre la suspensión y la continuación, otros eventos pueden cambiar estado externo. La función conserva su entorno, pero el mundo alrededor puede haber cambiado.
setTimeout(..., 0) significa ejecución inmediata.¿Por qué un timer de 0 milisegundos puede tardar mucho más?
Porque el retraso indica un mínimo antes de que la callback pueda quedar elegible. Todavía debe terminar el trabajo actual, procesarse las microtasks y llegar una oportunidad donde el host elija esa task.
Tasks, microtasks y renderizado explica las dos categorías que más afectan el orden observable del código asíncrono.