No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

JavaScript Runtime

11/13
Recursos

Recordando el material de Call Stack, se mencionó que JavaScript realiza una tarea a la vez en el Call Stack, esto se denomina código síncrono o Single thread. La sincronía puede presentar problemas en operaciones que demoren demasiado.

Representacíon de síncronismo en JavaScript

Ejemplo práctico

Por ejemplo, imagina que JavaScript es una tienda de tacos, tú trabajas ahí y solamente puedes hacer una preparación a la vez. Llegan tres personas que ordenan un taco, una torta y un taco, y tienes que atenderlos en ese orden.

El primer taco probablemente se demore 5 minutos. Luego, la preparación de la torta es más compleja, por lo que posiblemente demorará 20 minutos. En este punto, el tercer cliente se ha hartado de la espera y se retira. Este proceso no es óptimo.

console.log("taco")
console.log("torta")
console.log("taco")

En Internet sucede lo mismo, si un usuario no observa información en tu página web en los primeros cinco segundo, se retirará.

Entonces, una solución sería ejecutar las tareas más lentas (torta) después de las más rápidas (tacos). Y esta solución se llama asincronismo y JavaScript tiene una manera de manejarlo.

Contribución creada por Andrés Guano.

Aportes 85

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

❤️ grabado en la memory heap de mi corazón.

No soy de México, pero como que se me antojó un taco.

Quién más se antojó de tacos como yo !!! 🌮😭hahah
Amé esta explicación 💚

Por aquí te dejo una lectura para complementar acerca del Runtime Enviroment 😉
Y, por aquí te dejo una receta de tacos al pastor, para que no te quedes con las ganas 😜

les recomiendo este articulo,aclara mucho mas los conceptos
https://medium.com/@olinations/the-javascript-runtime-environment-d58fa2e60dd0

Genial el ejemplo de los tacos jaja

Próximamente curso de preparación de tacos con Diego de Granda !!

JS runtime

JavaScript es síncrono, va haciendo una tarea a la vez.

  • Primero tenemos nuestro código en el memory heap, tenemos referencias
  • Cuando vamos a ejecutar alguna parte de nuestro código va al call stack
  • En el call stack se va apilando las tareas que tiene que hacer, cuando resuelve la tarea la saca del call stack
  • Si hay código asíncrono se va a la parte de Web API´s, son API´s que nos proporciona el navegador para poder hacer interacciones dentro de nuestra aplicación (DOM, XMLHttpRequest, eventos)
  • Cuando las API´s son requeridas pasan al callback queue, usan el modelo FIFO (First In First Out)
  • Cuando termina de ejecutarse la parte síncrona, la parte asíncrona que esta en el callback queue pasa al call stack

JavaScript es síncrono, hace una tarea a la vez. Esto hace que se vea lento o que el tiempo de espera sea bastante lento.

Ya que tengamos la variable podemos agregarla al CallStack y con esto ya le podemos dar interacción con los elementos del navegador.

Un ejemplo de esto es que si nos entran 4 tareas, una de 1 segundo, una de 2 segundos, una de 10 segundos y otra de 3 segundos. Quiere decir que se irán haciendo con forma de pila pero se tendrán que esperar la ultima a que termine totalmente de hacer la tarea larga, ya que solo puede hacer una tarea al mismo tiempo.

Se viene uno de los temas estrella de JavaScript, y Platzi tiene un curso enteramente dedicado al asíncronismo con JavaScript 👀

No entendí lo que es el JavaScript Runtime

El mejor ejemplo de la vida ❤️ que gran profesor, ya tienes un nuevo fan @dgranada ❤️____❤️

ok, entendido, no tortas 😉

Que bueno saber como funciona todo lo de JavaScript en los navegadores, ya entiendo mejor todo lo que pasa detras de lo que hacemos.

Entendido.
Ya no quiero torta

console.log("taco 1");
console.log("taco 2");
console.log("torta");
console.log("taco 3");

Todo melo melo 😄

JavaScript es síncrono. Aunque con el event loop podemos simular procesos multi-hilo

Ya me dio hambre

Si, así es Estudiante.
Esta clase da hambre, es normal. Descansa y ve por tus tacos. 💚️

Muy buen ejemplo, aunque ya me provoco comer tacos 🤣 🌮

Excelente ejemplo para dar el tema.
Aunque salí de clase con antojo de unos tacos D:
Pero desde que empezó la cuarentena no salimos mas que para lo indispensable.

espero que lo entiendan

En el desarrollo web, no se suele utilizar el motor directamente. El motor de JavaScript funciona dentro de un entorno (JavaScript runtime environment), lo que proporciona características adicionales a sus scripts que puede usar en tiempo de ejecución.

Estas características pueden ser librerías o API’s que permiten comunicarse con el mundo que rodea al motor. Un ejemplo aquí podría ser el acceso a la información sobre el navegador web en el que se ejecuta el script. O una notificación sobre un clic del ratón.

Ahhh entonces mi JavaScript es lento por la tortilla!!! jajaja

Me pareció un ejemplo o demostración un poco extraño pero creo que se entiende el concepto jajaja

Justo tenia la duda en clases pasadas de si primero iba el memory heap y luego el call stack

jaja buen ejemplo con tacos y torta, ya se me antojaron 😅

Un **JavaScript Runtime** (Entorno de ejecución de JavaScript) es un conjunto de herramientas y componentes que permiten ejecutar código JavaScript fuera del navegador o dentro de él. El runtime gestiona la ejecución del código JavaScript, proporciona APIs adicionales que interactúan con el entorno (como el navegador o el sistema operativo), y maneja la **asincronía** y la **gestión de eventos**. ### Componentes de un JavaScript Runtime El **JavaScript Runtime** está compuesto por varios elementos clave que trabajan juntos para ejecutar el código JavaScript y manejar operaciones externas como I/O, manejo de eventos, y asincronía. 1. **Motor de JavaScript (JavaScript Engine)**: * El **motor de JavaScript**, como **V8** (usado en Chrome y Node.js), es responsable de **compilar** y **ejecutar** el código JavaScript. Convierte el código fuente en código máquina y ejecuta las instrucciones. * Ejemplos de motores de JavaScript: * **V8** (Chrome, Node.js) * **SpiderMonkey** (Firefox) * **JavaScriptCore** (Safari) * **Chakra** (Microsoft Edge, antes de adoptar Chromium) 2. **Event Loop (Bucle de eventos)**: * El **Event Loop** es un mecanismo central en el runtime de JavaScript que maneja la **asincronía**. JavaScript es de un solo hilo (**single-threaded**), lo que significa que solo puede ejecutar una operación a la vez. Sin embargo, el Event Loop permite que JavaScript maneje operaciones asíncronas como solicitudes a servidores o temporizadores sin bloquear la ejecución del programa. * Funciona monitoreando la **cola de tareas** (task queue) y ejecuta las funciones que están listas para ser procesadas (como callbacks o promesas resueltas). * Esto es lo que permite que JavaScript ejecute operaciones largas (como leer un archivo o hacer una solicitud HTTP) sin bloquear el resto del código. 3. **Call Stack (Pila de llamadas)**: * La **pila de llamadas** es la estructura que lleva el control de las funciones que están siendo ejecutadas en un momento dado. Cuando se invoca una función, esta se apila en la call stack. Cuando la función termina, se elimina de la pila. * El **Event Loop** interactúa con la call stack, asegurándose de que solo se ejecute una tarea a la vez. 4. **Web APIs o System APIs**: * En el navegador, las **Web APIs** son proporcionadas por el entorno (el navegador) y permiten acceder a funcionalidades que no forman parte del lenguaje JavaScript, como la manipulación del **DOM**, **fetch** para hacer peticiones HTTP, **setTimeout**, acceso a APIs de local storage, y más. * En entornos fuera del navegador, como **Node.js**, las APIs del sistema permiten interactuar con el sistema operativo, archivos, red y otros recursos del sistema, lo que permite ejecutar JavaScript en el backend. 5. **Callback Queue (Cola de tareas)**: * La **cola de tareas** es donde se almacenan las funciones que deben ejecutarse después de que se complete una operación asíncrona. Esto incluye los **callbacks** de eventos, temporizadores y promesas. * El **Event Loop** monitorea esta cola y pasa las funciones a la **call stack** cuando está vacía. 6. **Microtask Queue**: * Es una cola separada donde se colocan las tareas de mayor prioridad, como las promesas resueltas o los callbacks del `MutationObserver`. Las microtareas tienen prioridad sobre las tareas normales en la cola de tareas y se ejecutan inmediatamente después de que se vacía la call stack. ### Flujo de trabajo del JavaScript Runtime 1. **Ejecución del código**: Cuando se ejecuta un script JavaScript, el motor lo compila y lo ejecuta línea por línea. Las funciones se apilan en la call stack, y las instrucciones se ejecutan de manera sincrónica. 2. **Operaciones asíncronas**: Si el código incluye operaciones asíncronas, como una solicitud de red (`fetch()`) o un temporizador (`setTimeout()`), esas tareas se delegan a las APIs correspondientes (Web API o System API) mientras el código principal sigue ejecutándose. 3. **Finalización de la tarea asíncrona**: Una vez que la operación asíncrona (como la solicitud HTTP) ha terminado, el callback asociado con esa operación se coloca en la **callback queue**. 4. **Event Loop**: El **Event Loop** monitorea la call stack y la callback queue. Si la call stack está vacía, el Event Loop toma el primer callback de la callback queue y lo coloca en la call stack para que sea ejecutado. 5. **Microtasks**: Antes de procesar una nueva tarea de la callback queue, el Event Loop verifica si hay tareas en la **microtask queue** y las ejecuta primero, ya que estas tienen prioridad. ### JavaScript Runtime en el Navegador En un entorno de navegador, el JavaScript Runtime está compuesto por: * **Motor de JavaScript** (como V8 en Chrome o SpiderMonkey en Firefox). * **Web APIs**, que proporcionan acceso al DOM, `fetch()`, `setTimeout()`, `localStorage`, etc. * **Event Loop**, que gestiona las operaciones asíncronas. * **Task Queue** y **Microtask Queue**, que gestionan las funciones asíncronas a ejecutar. ### JavaScript Runtime en Node.js En **Node.js**, el JavaScript Runtime es similar, pero en lugar de Web APIs, utiliza las **System APIs** que proporcionan acceso al sistema de archivos, red, manejo de procesos y otros recursos del sistema operativo. * **Motor de JavaScript V8**. * **System APIs** para realizar operaciones de I/O, acceso a archivos, etc. * **Event Loop** proporcionado por **libuv**, que es la biblioteca en C utilizada por Node.js para manejar las operaciones asíncronas. ### Ejemplo simple del JavaScript Runtime javascriptCopiar código`console.log("Inicio"`); `// Operación asíncrona: se ejecuta después de 2 segundos` `setTimeout(() =>` { ` console.log("Se ejecuta después de 2 segundos"`); `}, 2000`); `console.log("Fin"`); ### Ejecución: 1. El **motor de JavaScript** ejecuta las líneas sincrónicas "Inicio" y "Fin" inmediatamente. 2. `setTimeout()` es una operación asíncrona. Se delega a las Web APIs y se coloca en la **callback queue** después de 2 segundos. 3. Una vez que la call stack esté vacía (después de ejecutar "Fin"), el **Event Loop** moverá el callback de `setTimeout()` desde la callback queue a la call stack y lo ejecutará. ### Resumen Un **JavaScript Runtime** es un entorno que combina el motor de JavaScript, APIs externas y mecanismos como el **Event Loop** y las colas de tareas para manejar la ejecución de código sincrónico y asíncrono. Ya sea en el navegador o en entornos como Node.js, el JavaScript Runtime permite que el código JavaScript interactúe con el entorno, ejecute tareas de manera eficiente y maneje la asincronía de forma no bloqueante.
Con el ejemplo de los tacos comprendí mejor lo de la sincronía y asincronía😀👍

La parte asíncrona se ejecuta mientras la parte síncrona se ejecuta. Luego de que haya terminado todas la parte síncrona para no afectar el rendimiento de la página, el resultado de la parte asíncrona pasa al callstack.

JavaScript hace las cosas como yo, de una en una :p

Jajaja mas alla de lo que explico Diego, fue muy gracioso notar cuando habla de la torta y dice que se debe abrir el pan. Por lo tanto, me pregunto: como es una torta hecha de pan?

Interesante la clase de cocina y JavaScript XD

Excelente explicacion

Quiero un taco al pastor.

Ya antojaron 😈😳😎🤙
.

Buenas, como estan! Les comparto mi carpeta de Google Docs para que entre todos podamos seguir aportando a la toma de notas de un montón de los cursos de Platzi. Hagamos una comunidad!!!

https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

esta clase me hizo dar hambre XD

Se me antojaron los tacos 😭

Muchos tacos por aqui, pero basicamente esto funciona que se hace una tarea la vez y cuando hay una tarea grande deja todo lo demas y hace esa tarea?

JavaScript Runtime Enviroment (JRE)
El JS engine está formado por heap y call stack.
El motor de JS no se ejecuta de forma aislada
Esta embebido en el entorno de JS runtime enviroment, donde existen más componentes.
EL JRE son todos los componentes que trabajan al ejecutar el codigo JS.
El JRE nos proporciona características adicionales (click evento, información del navegador, solicitudes HTTP, etc.) y hace a JS asíncrono y no bloqueante con ayuda de sus componentes.
El JRE contiene los siguientes componentes:
• Motor JavaScript
• Web APIs
• Callback Queue (cola de devolución o cola de mensajes)
• Job Queue
• Event Loop (bucle de eventos)

JavaScript Runtime

Como llegan las tareas van saliendo en el entorno de JavaScript. El lenguaje no se fija en si hay otros procesos más rapidos o no, solo se fija en sacar las tareas tal y como fueron entrando en la pila de tareas.

Diego: *Va a la taquería y pide una orden
Taquero: “No se puede, no hay tortillas”

const torta = "sanguche";

Diego hablando de Tacos :v ya medio hambre jajajaj 😄

Con este ejemplooooo!

El ejemplo de los tacos <3

a este ejemplo le falto… una Coca Cola

!TACOSSSSSSSSSSSSSSSSSSSS!

Me dio hambre con el menú XD

Esta clase da antojo de tacos xD

¡Llegando a esta clase, me dio mucha hambre! jeje Genial ejemplo!

El mejor ejemplo ❤️

Mucho taco y torta, pero ¿Y la coquita? xD

Lo ideal siempre pedir tacos jeje, buena explicación!

Ya me dieron ganas de taco 😄

Vamos a vender tacos ahor amismo jaja xd

Que buena analogía lo de los tacos, 😄 gran explicacion

😃

A darle!

Obligado a pausar el video e ir a la cocina a buscar que comer…!! Efecto colateral de esta clase.

Excelente explicación

Es lo mismo que ocurre cuando agregamos un timeOut 😃

Excelente ejemplo, gracias Diego

Js lenguaje sincrono y que puede simular una asincronia total.

Pero por favor, el tremendo ejemplo para entender el tema, mejor no pudiste haberlo dicho Diego. Si no se entiende con esta explicación… (sin comentarios)

gran info neni

Que mejor manera de aprender que con tacos!

Son las 11pm y Diego ha hecho que se me antojen de tacos 😦

Lo mejor de esta clase no fue el tema, fue la explicación con tacos del proceso síncrono. Viva México 🇲🇽

Creo que aqui quizas hizo falta explicar un poco mas del JS Engine, no menciono nada del Event Loop.

Esta es la clase del curso donde te va a dar hambre.

Muy buena explicación. Bastante fundamental, pero estuvo genial.

a alguien mas le dio hambre durante la explicacion? 😂

Se podría decir que el Runtime por defecto es sincrono ?

Ahora cada que vaya por unos de pastor :3 me voy a acordar del event loop ❤️

f

Hace 1 año el tema de sincronía y sincronía me causaban mucho dolor de cabeza. Y tan sencillo que es! >.<