¿Cómo funciona el Event Loop en JavaScript?

Si bien puede requerir una comprensión profunda de lenguajes como C ++ y C para escribir código de producción a gran escala, JavaScript a menudo se puede escribir con una comprensión básica de lo que se puede hacer con el lenguaje.


Los conceptos, como pasar devoluciones de llamada a funciones o escribir código asincrónico, a menudo no son tan difíciles de implementar, lo que hace que la mayoría de los desarrolladores de JavaScript se preocupen menos por lo que sucede debajo del capó. Simplemente no les importa entender las complejidades que el lenguaje les ha abstraído profundamente.

Como desarrollador de JavaScript, se vuelve cada vez más importante comprender lo que realmente sucede bajo el capó y cómo funcionan la mayoría de estas complejidades que nos abstraen. Nos ayuda a tomar decisiones más informadas, que a su vez pueden aumentar drásticamente el rendimiento de nuestro código.

Este artículo se centra en uno de los conceptos o términos muy importantes pero raramente entendidos en JavaScript. los LAZO DE EVENTO!. 

No se puede evitar escribir código asincrónico en JavaScript, pero ¿por qué un código que se ejecuta de forma asincrónica realmente significa? es decir. El bucle de eventos

Antes de que podamos entender cómo funciona el bucle de eventos, primero debemos entender qué es JavaScript en sí mismo y cómo funciona!

¿Qué es JavaScript??

Antes de continuar, me gustaría que retrocedamos a lo más básico. ¿Qué es realmente JavaScript? Podríamos definir JavaScript como;

JavaScript es un lenguaje simultáneo, asincrónico, no bloqueante, de alto nivel, interpretado y de un solo subproceso.

Espera, que es esto? ¿Una definición de libro? ��

Vamos a descomponerlo!

Las palabras clave aquí con respecto a este artículo son de un solo hilo, sin bloqueo, concurrente, y asincrónico.

Hilo único

Un hilo de ejecución es la secuencia más pequeña de instrucción programada que puede ser administrada independientemente por un planificador. Un lenguaje de programación es de un solo subproceso, lo que significa que solo puede realizar una tarea u operación a la vez. Esto significa que ejecutaría un proceso completo de principio a fin sin que el hilo sea interrumpido o detenido..

A diferencia de los lenguajes de subprocesos múltiples, donde se pueden ejecutar múltiples procesos en varios subprocesos simultáneamente sin bloquearse entre sí.

¿Cómo puede JavaScript ser de un solo subproceso y sin bloqueo al mismo tiempo?

Pero, ¿qué significa bloquear??

Sin bloqueo

No hay una definición única de bloqueo; simplemente significa cosas que se ejecutan lentamente en el hilo. Entonces, no bloquear significa cosas que no son lentas en el hilo.

Pero espera, ¿dije que JavaScript se ejecuta en un solo hilo? Y también lo dije sin bloqueo, lo que significa que la tarea se ejecuta rápidamente en la pila de llamadas. ¿¿¿Pero cómo??? ¿Qué tal cuando corremos temporizadores? Bucles?

¡Relajarse! Lo descubriríamos en un momento ��.

Concurrente

La concurrencia significa que el código se está ejecutando simultáneamente por más de un hilo.

Ok, las cosas se están poniendo realmente extraño ahora, ¿cómo puede JavaScript tener un solo subproceso y ser concurrente al mismo tiempo? es decir, ejecutar su código con más de un hilo?

Asincrónico

La programación asincrónica significa que el código se ejecuta en un bucle de eventos. Cuando hay una operación de bloqueo, se inicia el evento. El código de bloqueo sigue ejecutándose sin bloquear el hilo de ejecución principal. Cuando el código de bloqueo termina de ejecutarse, es el resultado de las operaciones de bloqueo y los empuja de nuevo a la pila..

¿Pero JavaScript tiene un solo hilo? Lo que luego ejecuta este código de bloqueo mientras permite que se ejecuten otros códigos en el hilo?

Antes de continuar, repasemos lo anterior.

  • JavaScript es de un solo subproceso
  • JavaScript no bloquea, es decir, los procesos lentos no bloquean su ejecución
  • JavaScript es concurrente, es decir, ejecuta su código en más de un hilo al mismo tiempo
  • JavaScript es asíncrono, es decir, ejecuta código de bloqueo en otro lugar.

Pero lo anterior no cuadra exactamente, ¿cómo puede un lenguaje de subproceso único ser no bloqueante, concurrente y asíncrono??

Vamos a profundizar un poco, vamos a los motores de tiempo de ejecución de JavaScript, V8, tal vez tiene algunos hilos ocultos que no conocemos.

Motor V8

El motor V8 es un motor de tiempo de ejecución de ensamblaje web de código abierto de alto rendimiento para JavaScript escrito en C ++ por Google. La mayoría de los navegadores ejecutan JavaScript usando el motor V8, e incluso el popular entorno de ejecución de nodo js también lo usa.

En inglés simple, el V8 es un programa C ++, que recibe código JavaScript, lo compila y lo ejecuta.

El V8 hace dos cosas principales;

  • Asignación de memoria de montón
  • Contexto de ejecución de la pila de llamadas

Lamentablemente, nuestra sospecha estaba mal. El V8 tiene solo una pila de llamadas, piense en la pila de llamadas como el hilo.

Un hilo === una pila de llamadas === una ejecución a la vez.

Imagen – Hacker Noon

Dado que V8 tiene solo una pila de llamadas, ¿cómo se ejecuta JavaScript de forma simultánea y asincrónica sin bloquear el hilo de ejecución principal??

Intentemos averiguarlo escribiendo un código asincrónico simple pero común y analizándolo juntos.

JavaScript ejecuta cada código línea por línea, uno después del otro (un solo subproceso). Como se esperaba, la primera línea se imprime en la consola aquí, pero ¿por qué se imprime la última línea antes del código de tiempo de espera? ¿Por qué el proceso de ejecución no espera el código de tiempo de espera (bloqueo) antes de continuar para ejecutar la última línea??

Algún otro hilo parece habernos ayudado a ejecutar ese tiempo de espera ya que estamos bastante seguros de que un hilo solo puede ejecutar una sola tarea en cualquier momento.

Echemos un vistazo al Código fuente V8 por un momento.

¡¡¡¿¿Esperar lo??!!! No hay funciones de temporizador en V8, no DOM? ¿No hay eventos? ¿Sin AJAX? Yeeeeessss!!!

Los eventos, DOM, temporizadores, etc. no son parte de la implementación principal de JavaScript, JavaScript cumple estrictamente con las especificaciones de Ecma Scripts y a menudo se hace referencia a varias versiones de acuerdo con sus especificaciones de Ecma Scripts (ES X).

Flujo de trabajo de ejecución

Los navegadores proporcionan eventos, temporizadores y solicitudes de Ajax en el lado del cliente y, a menudo, se denominan API web. ¡Son los que permiten que el JavaScript de un solo subproceso no sea bloqueante, concurrente y asíncrono! Pero cómo?

Hay tres secciones principales en el flujo de trabajo de ejecución de cualquier programa de JavaScript, la pila de llamadas, la API web y la cola de tareas.

La pila de llamadas

Una pila es una estructura de datos en la que el último elemento agregado es siempre el primero en eliminarse de la pila, se podría considerar como una pila de una placa en la que solo se puede eliminar primero la primera placa que fue la última agregada. Una pila de llamadas no es más que una estructura de datos de pila donde las tareas o el código se ejecutan en consecuencia.

Consideremos el siguiente ejemplo;

Fuente: https://youtu.be/8aGhZQkoFbQ

Cuando llama a la función printSquare (), se inserta en la pila de llamadas, la función printSquare () llama a la función square (). La función square () se inserta en la pila y también llama a la función multiply (). La función de multiplicación se empuja a la pila. Dado que la función de multiplicación regresa y es lo último que se empujó a la pila, primero se resuelve y se elimina de la pila, seguido de la función square () y luego la función printSquare ().

La API web

Aquí es donde el código que no es manejado por el motor V8 se ejecuta para no “bloquear” el hilo principal de ejecución. Cuando Call Stack encuentra una función de API web, el proceso se transfiere inmediatamente a la API web, donde se ejecuta y libera a Call Stack para realizar otras operaciones durante su ejecución..

Volvamos a nuestro ejemplo setTimeout anterior;

Cuando ejecutamos el código, la primera línea de console.log se inserta en la pila y obtenemos nuestro resultado casi de inmediato, al llegar al tiempo de espera, los temporizadores son manejados por el navegador y no son parte de la implementación central de V8, se empujan a la API web en su lugar, liberando la pila para que pueda realizar otras operaciones.

Mientras el tiempo de espera aún se está ejecutando, la pila avanza a la siguiente línea de acción y ejecuta el último console.log, lo que explica por qué obtenemos eso antes de la salida del temporizador. Una vez que se completa el temporizador, sucede algo. El console.log in y luego el temporizador aparecen mágicamente en la pila de llamadas nuevamente!

Cómo?

El bucle de eventos

Antes de discutir el bucle de eventos, primero veamos la función de la cola de tareas.

Volviendo a nuestro ejemplo de tiempo de espera, una vez que la API web finaliza la ejecución de la tarea, no la devuelve automáticamente a la Pila de llamadas. Va al Cola de tareas. 

Una cola es una estructura de datos que funciona según el principio Primero en entrar, primero en salir, por lo que a medida que las tareas se insertan en la cola, salen en el mismo orden. Las tareas que han sido ejecutadas por las API web, que se envían a la Cola de tareas, luego regresan a la Pila de llamadas para imprimir su resultado..

Pero espera. QUE ES EL CORDERO EL BUCLE DE EVENTOS???

Fuente: https://youtu.be/8aGhZQkoFbQ

El bucle de eventos es un proceso que espera a que la Pila de llamadas se borre antes de enviar devoluciones de llamadas desde la Cola de tareas a la Pila de llamadas. Una vez que la pila está limpia, el bucle de eventos se activa y comprueba la cola de tareas para ver las devoluciones de llamada disponibles. Si hay alguno, lo empuja a la Pila de llamadas, espera a que la Pila de llamadas vuelva a estar limpia y repite el mismo proceso.

Fuente: https://www.quora.com/How-does-an-event-loop-work/answer/Timothy-Maxwell

El diagrama anterior muestra el flujo de trabajo básico entre el bucle de eventos y la cola de tareas.

Conclusión

Si bien esta es una introducción muy básica, el concepto de programación asincrónica en JavaScript brinda suficiente información para comprender claramente lo que sucede debajo del capó y cómo JavaScript puede ejecutarse de manera simultánea y asincrónica con un solo hilo.

JavaScript siempre es a pedido, y si tiene curiosidad por aprender, le aconsejaría que consulte esto Curso Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map