Bucle de eventos: se dice que un bucle de eventos en JavaScript es un proceso en ejecución constante que mantiene una pestaña en la pila de llamadas. Su función principal es verificar si la pila de llamadas está vacía o no. Si la pila de llamadas resulta estar vacía, el bucle de eventos procede a ejecutar todas las devoluciones de llamadas que esperan en la cola de tareas. Dentro de la cola de tareas, las tareas se clasifican ampliamente en dos categorías, a saber, microtareas y macrotareas.
Microtareas dentro de un bucle de eventos: se dice que una microtarea es una función que se ejecuta después de que la función o el programa que la creó finaliza y solo si la pila de ejecución de JavaScript está vacía, pero antes de devolver el control al bucle de eventos que se está utilizando. por el agente de usuario para impulsar el entorno de ejecución del script. Una microtarea también es capaz de poner en cola otras microtareas.
Las microtareas a menudo se programan para cosas que deben completarse inmediatamente después de la ejecución del script actual. Al completar una macrotarea, el bucle de eventos pasa a la cola de microtareas. El bucle de eventos no pasa a la siguiente tarea fuera de la cola de microtareas hasta que se completen todas las tareas dentro de la cola de microtareas. Esto implica que la cola de microtareas tiene una prioridad más alta.
Una vez que finalizan todas las tareas dentro de la cola de microtareas, solo entonces el bucle de eventos vuelve a la cola de macrotareas. La razón principal para priorizar la cola de microtareas es mejorar la experiencia del usuario. La cola de microtareas se procesa después de las devoluciones de llamada dado que cualquier otro JavaScript no se encuentra en ejecución intermedia. Las microtareas incluyen devoluciones de llamadas de observadores de mutaciones, así como devoluciones de llamadas de promesas.
En tal caso, en el que se agregan nuevas microtareas a la cola, estas microtareas adicionales se agregan al final de la microcola y también se procesan. Esto se debe a que el bucle de eventos seguirá llamando a microtareas hasta que no queden más microtareas en la cola, incluso si se siguen agregando nuevas tareas. Otra razón importante para utilizar microtareas es garantizar un orden coherente de las tareas y, al mismo tiempo, reducir el riesgo de retrasos causados por los usuarios.
Sintaxis: Adición de microtareas:
queueMicrotask(() => {
// Code to be run inside the micro-task
});
La función de microtarea en sí no toma parámetros y no devuelve un valor.
Ejemplos: process.nextTick, Promises, queueMicrotask, MutationObserver
Macro-tareas dentro de un ciclo de eventos: Macro-tarea representa un trabajo discreto e independiente. Estos son siempre la ejecución del código JavaScript y la cola de microtareas está vacía. La cola de macrotareas a menudo se considera lo mismo que la cola de tareas o la cola de eventos. Sin embargo, la cola de macrotareas funciona igual que la cola de tareas. La única pequeña diferencia entre los dos es que la cola de tareas se usa para declaraciones síncronas, mientras que la cola de tareas macro se usa para declaraciones asíncronas.
En JavaScript, no se permite la ejecución de ningún código hasta que se produzca un evento. {Vale la pena mencionar que la ejecución de un código JavaScript es en sí misma una macrotarea.} El evento se pone en cola como una macrotarea. Cuando se está ejecutando una tarea (macro), presente en la cola de macrotareas, se pueden registrar nuevos eventos y, a su vez, crearlos y agregarlos a la cola.
En la inicialización, el motor de JavaScript primero realiza la primera tarea en la cola de macrotareas y ejecuta el controlador de devolución de llamada. Luego, el motor de JavaScript envía estas funciones asíncronas al módulo API, y el módulo las empuja a la cola de macrotareas en el momento adecuado. Una vez dentro de la cola de macrotareas, se requiere que cada macrotarea espere la siguiente ronda del bucle de eventos. De esta forma se ejecuta el código.
Todas las microtareas registradas se procesan de una sola vez en un único ciclo de ejecución de macrotareas. En comparación, la cola de macrotareas tiene una prioridad más baja. Las macrotareas incluyen el análisis de HTML, la generación de DOM, la ejecución del código JavaScript del subproceso principal y otros eventos, como la carga de páginas, la entrada, los eventos de red, los eventos de temporizador, etc.
Ejemplos: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, Representación de la interfaz de usuario
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA