Lo Que Todos Fingimos Saber: Las Diferencias Entre el Motor de JS y el Tiempo de Ejecución de JS

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Los frameworks modernos de desarrollo web proporcionan tantos niveles de abstracción que los desarrolladores no necesitan un entendimiento profundo de los tiempos de ejecución o motores subyacentes para comenzar a trabajar. De hecho, la facilidad de uso es el objetivo de los frameworks modernos y un buen indicador de su éxito. Al iniciar una aplicación, es fácil ver Node como solo "una pieza del rompecabezas" y confundirlo con un motor de JavaScript, o un lenguaje, cuando, en realidad, no es ninguno de los dos.

Es valioso para los desarrolladores entender las diferencias entre los motores y los tiempos de ejecución empleados en sus proyectos de full-stack para tener un modelo mental de cómo se está ejecutando su código y optimizarlo para los entornos en los que se está ejecutando. El objetivo de esta charla es aclarar la distinción entre un motor de JavaScript y un tiempo de ejecución, revisar cómo interactúan entre sí (tanto en servidores como en la web) y ver aplicaciones prácticas de este conocimiento.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Karina Ionkina
Karina Ionkina
Samiul Huque
Samiul Huque
11 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla profundiza en las complejidades del motor de JavaScript y el tiempo de ejecución, enfatizando la importancia de entender los procesos de ejecución para un desarrollo y depuración efectivos. Discute cómo los motores de JavaScript optimizan el código a través del análisis, árboles de sintaxis abstracta y ejecución de código byte. Las estrategias para optimizar el código incluyen mantener la estabilidad de tipos, usar arrays de tipo estable y formas de objetos consistentes para evitar la desoptimización. Las recomendaciones para mejorar la ejecución de JavaScript implican asegurar la consistencia de tipos de entrada, usar arrays de tipo estable y entender el papel del bucle de eventos en la ejecución de código a través de diferentes tiempos de ejecución y motores.

1. Introducción al motor y tiempo de ejecución de JavaScript

Short description:

La charla introduce la diferencia entre el motor de JavaScript y el tiempo de ejecución, enfatizando la importancia de comprender el proceso de ejecución para un mejor desarrollo y depuración de código.

Hola a todos, bienvenidos a nuestra charla. Hoy vamos a hablar sobre lo que todos presentamos para conocer, la diferencia entre el motor de JavaScript y el tiempo de ejecución de JavaScript. Antes de comenzar, mi nombre es Sam y esta es mi co-presentadora, Karina. Ambos somos de Nueva York, ambos jugamos al tenis, ambos fuimos a la misma escuela secundaria, y ambos actualmente trabajamos en Bloomberg como ingenieros de software. Y hoy estamos realmente emocionados de hablar con ustedes sobre JavaScript. Antes de sumergirnos, ¿por qué estamos dando esta charla y por qué es relevante para ustedes? El desarrollo moderno de JavaScript está lleno de frameworks muy útiles que te permiten construir y enviar código muy rápidamente. Pero estos frameworks abstraen muchas de las complejidades de bajo nivel que hacen que tu código funcione. Creemos que entender lo que sucede bajo el capó te permitirá tener un modelo mental de cómo se está ejecutando tu código para que puedas escribir y depurar más fácilmente tu código JavaScript. JavaScript es técnicamente una especificación, eso es todo. ECMAScript es el nombre de la especificación para JavaScript y define qué es JavaScript. Entonces, ¿qué exactamente define ECMAScript? Define la sintaxis, los tipos disponibles, los operadores y la semántica del lenguaje. Puedes pensar en estos como las reglas para los caracteres que realmente escribes, como for, while, if, corchetes, y así sucesivamente. Además de ECMAScript, también está el motor del que hablará Karina, y ese motor implementa la especificación. Y luego está el tiempo de ejecución que toma el motor y te permite ejecutar tu código. Y ahora le paso la palabra a Karina.

2. Exploring JavaScript Engine Optimization

Short description:

Los motores de JavaScript son programas de bajo nivel que analizan y ejecutan código, convirtiéndolo en código máquina rápido para la ejecución por la CPU. Los componentes procesan JavaScript analizando el código fuente, creando un árbol de sintaxis abstracta y ejecutando código de bytes. Los intérpretes recopilan información de tipos, datos de perfilado y optimizan el código basado en comportamientos pasados.

Sí, así que echemos un vistazo más de cerca al motor. Los MDN web docs tienen una definición para los motores de JavaScript. En pocas palabras, son solo programas de bajo nivel que analizan y ejecutan código JavaScript. También convierten tu JavaScript de alto nivel en código máquina rápido que puede ser ejecutado por la CPU para algunos caminos de código. Y repasaremos cómo hace esto al observar primero cómo los componentes del motor procesan el código JavaScript.

Así que primero, tu código fuente de JavaScript se pasa al analizador. Este analiza ese código fuente y lo convierte en una representación en árbol del código fuente o el árbol de sintaxis abstracta. Luego, ese árbol se pasa al intérprete que lee y ejecuta instrucciones de bajo nivel específicas del motor llamadas código de bytes. JavaScript es un lenguaje dinámico, por lo que los tipos no se conocen hasta el tiempo de ejecución, y eso hace que sea difícil optimizar de antemano, a diferencia de lenguajes como C o C++.

Así que los intérpretes de JavaScript hacen un par de cosas. Una, ejecutan el código de bytes paso a paso. Pero mientras hacen eso, también recopilan información de tipos y datos de perfilado, que incluyen información como la frecuencia de llamadas a funciones, formas de argumentos, y cuando una función se llama con frecuencia, lo que llamamos una función caliente o un camino de código caliente, el motor lo identifica como digno de optimización. Así que el intérprete luego pasa esos datos de perfilado y ese código de bytes al compilador de optimización o al compilador justo a tiempo.

3. Strategies for Optimizing JavaScript Code

Short description:

El compilador crea código máquina optimizado basado en tipos de datos y comportamientos del código. Los desarrolladores pueden asegurar la estabilidad de tipos, usar arrays de tipo estable y mantener formas de objetos consistentes. Las optimizaciones dependen de suposiciones, y romperlas lleva a la desoptimización, afectando el rendimiento.

Y el compilador usará esa información para crear código máquina altamente optimizado para ser ejecutado directamente por la CPU. Y hay algunos métodos que el compilador emplea para generar este código máquina rápido. Utiliza especialización de tipos, que es básicamente generar código máquina adaptado a los tipos de datos reales utilizados en tiempo de ejecución. Utiliza inlining de funciones, donde reemplaza funciones pequeñas con sus cuerpos reales en el sitio de llamada, y también desenrollado de bucles.

Así que en lugar de ejecutar un bucle pequeño muchas veces, expandirá el cuerpo del bucle para hacer múltiples iteraciones. A medida que el compilador de optimización optimiza tu código, se basa en suposiciones basadas en cómo tu código se ha comportado hasta ahora. Así que podría ver que una variable es siempre un número, o podría notar que un objeto siempre tiene la misma estructura, y estos ayudan al motor a generar ese código máquina altamente eficiente y omitir comprobaciones en tiempo de ejecución. Sin embargo, si una suposición se rompe, ese código máquina optimizado se descarta y el código de bytes original es enviado de vuelta al intérprete.

Así que esto puede llevar tiempo, y las desoptimizaciones frecuentes debido a patrones de código inestables pueden añadir una sobrecarga significativa. Y hay un par de cosas que nosotros como desarrolladores podemos hacer para evitar que las suposiciones se rompan. Así que una suposición que tu motor hace es que las variables y los parámetros de función se usan consistentemente con los mismos tipos. Así que podemos asegurar la estabilidad de tipos manteniendo nuestras funciones monomórficas, y eso ayuda a tus motores a usar caches en línea para recordar la estructura de la función.

4. Optimizing JavaScript Execution and Runtimes

Short description:

Asegúrate de que los tipos de entrada sean consistentes, usa arrays de tipo estable, mantén las formas de los objetos y evita los sitios de llamada megamórficos. Mantén las funciones puras, cortas y de tipo estable para la optimización. Comprende el runtime, su papel en la ejecución del código y la importancia de las APIs para diferentes entornos.

y eso ayuda a tus motores a usar caches en línea para recordar la estructura de la función. Así que queremos asegurarnos de que siempre usamos los mismos tipos de entrada. Otro ejemplo es usar arrays de tipo estable, o arrays donde todos los elementos son del mismo tipo, por ejemplo, números, y eso permite al motor usar representaciones internas especiales que se rompen cuando introduces un tipo mixto. Al motor también le encantan las formas de objetos consistentes. Asume que siguen la misma estructura interna y crean clases ocultas basadas en cosas como nombres de propiedades y orden de propiedades. Así que podemos evitar añadir propiedades después de la construcción del objeto. Añadir un atributo por sí solo no garantiza que romperá las suposiciones, depende en gran medida del contexto y si cambia la forma de la clase oculta, pero como regla general, quieres mantener las formas de los objetos consistentes. También quieres evitar los sitios de llamada megamórficos, que son llamadas a funciones o accesos a propiedades que usan diferentes tipos o formas en tiempo de ejecución. Queremos mantenerlo consistente porque los optimizadores no pueden inlining una función si no está claro qué versión se está llamando. Y al motor también le encanta cuando las funciones de código caliente son predecibles. Podemos ayudar a hacerlas predecibles evitando declaraciones de funciones en bucles para reducir la complejidad del alcance. Crear cierres repetidamente hace que el compilador just-in-time los trate como nuevos cada vez, y eso rompe la optimización. También podemos usar funciones puras, cortas y inlinables. Así que evita efectos secundarios y evita depender de o cambiar cualquier cosa fuera del alcance de la función para mantener las funciones puras. Así que en resumen, mantén tus funciones puras, cortas y de tipo estable, y usa herramientas como el nodo trace opt flag para monitorear lo que se está optimizando y desoptimizando para mejorar tu rendimiento.

Y de esa manera mantendrás a tu motor feliz y lo ayudarás a optimizar tu código. Ahora se lo pasaré de nuevo a Sam. Gracias, Karina. Así que vamos a adentrarnos un poco en el runtime. ¿Qué es el runtime? El runtime El runtime es solo código. Al igual que el motor es código de bajo nivel del que Karina acaba de hablar, el runtime también es código de bajo nivel. Es código que hace tres cosas principales. Inventa el motor, añade llamadas API adicionales para el entorno específico en el que estás ejecutando, y luego gestiona el event loop. Así que a la derecha, tenemos un ejemplo inventado de un runtime que vamos a repasar en cada uno de los pasos ahora mismo. Pero antes de comenzar, ¿cuáles son algunos runtimes ampliamente utilizados? Los dos más populares son Node, que es lo que usas para programar JavaScript en el back end, y luego está Browser, con el que todos estamos familiarizados. Cada navegador que probablemente hayas usado, Chrome, Firefox, Safari, tiene su propio runtime de JavaScript único. Entonces, ¿qué significa que un runtime embeba el motor? Si tomamos Node como ejemplo, Node es un runtime que está implementado en C++, y puedes ver a la derecha que está importando algo llamado V8. V8 es el motor que el runtime de Node usa, y V8 expone una API para embebido. Así que si fueras a hacer tu propio runtime con V8 como el motor, podrías importar eso y luego instanciarlo, y ahora tienes eso como el motor para tu runtime. Y el runtime también añade APIs. ¿Por qué necesitamos APIs en un runtime?

5. Understanding JavaScript Runtimes and Event Loop

Short description:

Explica las diferencias entre el runtime de Node y el del navegador, APIs comunes como FS y DOM, variados runtimes y motores. Comprende el event loop, sus componentes y cómo decide la ejecución del código. Recapitulación del motor y el runtime como código de bajo nivel para la ejecución de JavaScript.

Cuando JavaScript se ejecuta en Node en un servidor back-end, necesita hacer cosas muy diferentes a lo que JavaScript necesitaría hacer si se ejecuta en el navegador en tu computadora, libre para acceder a un sitio web. Para hacer esto, es cuando el runtime implementa estas APIs, y para hacer eso, en tu código de bajo nivel, podrías definir una función, y luego después de eso, harías dos cosas. Definirías un binding, que te permite exponer esa función que escribes en C++, o C, u otro lenguaje de bajo nivel, y luego dos, después de definir el binding, puedes llamarlo en JavaScript. Así que hablamos de Node en el navegador. ¿Cuáles son algunas APIs comunes de runtime para Node? En Node, quieres poder acceder al sistema de archivos con FS, quieres obtener información a nivel de sistema como información de CPU o memoria, puedes hacerlo con la API de OS, y luego también quieres crear servicios usando HTTP y HTTPS. Si estás usando JavaScript en un navegador, y estás en un runtime de navegador, quieres hacer cosas muy diferentes. Quieres poder interactuar con HTML a través del DOM, quieres hacer solicitudes de red usando Fetch, y luego quieres almacenar cosas en tu navegador usando local storage y session storage. Hay muchos otros runtimes y motores. Esta no es una lista completa, pero algunos runtimes y motores que deberías conocer. Está Deno, Bun, y Electron, esos son runtimes, y luego para motores, está V8, está JavaScript Core, y luego está V8 Plus Chromium.

Hasta ahora, hemos cubierto las dos cosas que hace el runtime. La tercera cosa más importante, no la más importante, pero una cosa muy importante, es el event loop. ¿Qué es el event loop? Bueno, el runtime usa el event loop para determinar cuándo ejecutar tu código. El event loop es solo código adicional que es parte del runtime que escribes, y algunos event loops son incluso bibliotecas. Como Node usa la biblioteca liduv del event loop, que es una biblioteca de C++ que puedes embebir en tu propio código. Para entender lo que el event loop está haciendo, hay cuatro componentes que queremos tener en cuenta. Está el propio event loop, que es el código que está escrito en el runtime. Está la call stack, que es donde tu código se ejecuta realmente, y luego hay dos colas, la microtask queue y la task queue, que también se refiere como la macro task queue. Y todos estos se combinan con el runtime, el motor, y todos los otros componentes para ejecutar tu código. Así que a la derecha tenemos pseudocódigo que muestra lo que sucede a un alto nivel. Lo que está sucediendo es que el event loop verifica si la call stack está vacía. Si lo está, toma todo de la microtask queue y lo coloca en la call stack para que ese código sea ejecutado. Y luego, una vez que todos los elementos de la microtask queue están hechos, toma un elemento de la task queue o la macro task queue, lo pone en la call stack para ser ejecutado. Así que el event loop es un proceso que se ejecuta continuamente que puedes pensar que monitorea la call stack y la queue para decidir cuándo se ejecuta el código. Y esta es la forma principal en que JavaScript se comporta de manera asíncrona, aunque es de un solo hilo.

Así que para recapitular, el motor es un código de bajo nivel que ejecuta JavaScript. De manera similar al motor, el runtime también es código de bajo nivel y permite que tu código sea ejecutado. Gracias por escuchar nuestra charla.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Cargadores ESM: Mejorando la carga de módulos en Node.js
JSNation 2023JSNation 2023
22 min
Cargadores ESM: Mejorando la carga de módulos en Node.js
Top Content
ESM Loaders enhance module loading in Node.js by resolving URLs and reading files from the disk. Module loaders can override modules and change how they are found. Enhancing the loading phase involves loading directly from HTTP and loading TypeScript code without building it. The loader in the module URL handles URL resolution and uses fetch to fetch the source code. Loaders can be chained together to load from different sources, transform source code, and resolve URLs differently. The future of module loading enhancements is promising and simple to use.
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
React Day Berlin 2022React Day Berlin 2022
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
Diagnostics de Node.js listos para usar
Node Congress 2022Node Congress 2022
34 min
Diagnostics de Node.js listos para usar
This talk covers various techniques for getting diagnostics information out of Node.js, including debugging with environment variables, handling warnings and deprecations, tracing uncaught exceptions and process exit, using the v8 inspector and dev tools, and generating diagnostic reports. The speaker also mentions areas for improvement in Node.js diagnostics and provides resources for learning and contributing. Additionally, the responsibilities of the Technical Steering Committee in the TS community are discussed.
El Estado de Node.js 2025
JSNation 2025JSNation 2025
30 min
El Estado de Node.js 2025
The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.

Workshops on related topic

Masterclass de Node.js
Node Congress 2023Node Congress 2023
109 min
Masterclass de Node.js
Top Content
Workshop
Matteo Collina
Matteo Collina
¿Alguna vez has tenido dificultades para diseñar y estructurar tus aplicaciones Node.js? Construir aplicaciones que estén bien organizadas, sean probables y extensibles no siempre es fácil. A menudo puede resultar ser mucho más complicado de lo que esperas. En este evento en vivo, Matteo te mostrará cómo construye aplicaciones Node.js desde cero. Aprenderás cómo aborda el diseño de aplicaciones y las filosofías que aplica para crear aplicaciones modulares, mantenibles y efectivas.

Nivel: intermedio
Construir y Desplegar un Backend Con Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Construir y Desplegar un Backend Con Fastify & Platformatic
Top Content
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic te permite desarrollar rápidamente GraphQL y REST APIs con un esfuerzo mínimo. La mejor parte es que también te permite desatar todo el potencial de Node.js y Fastify siempre que lo necesites. Puedes personalizar completamente una aplicación de Platformatic escribiendo tus propias características y plugins adicionales. En la masterclass, cubriremos tanto nuestros módulos de Open Source como nuestra oferta en la Nube:- Platformatic OSS (open-source software) — Herramientas y bibliotecas para construir rápidamente aplicaciones robustas con Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (actualmente en beta) — Nuestra plataforma de alojamiento que incluye características como aplicaciones de vista previa, métricas integradas e integración con tu flujo de Git (https://platformatic.dev/). 
En esta masterclass aprenderás cómo desarrollar APIs con Fastify y desplegarlas en la Platformatic Cloud.
Construyendo un Servidor Web Hiper Rápido con Deno
JSNation Live 2021JSNation Live 2021
156 min
Construyendo un Servidor Web Hiper Rápido con Deno
Workshop
Matt Landers
Will Johnston
2 authors
Deno 1.9 introdujo una nueva API de servidor web que aprovecha Hyper, una implementación rápida y correcta de HTTP para Rust. El uso de esta API en lugar de la implementación std/http aumenta el rendimiento y proporciona soporte para HTTP2. En este masterclass, aprende cómo crear un servidor web utilizando Hyper en el fondo y mejorar el rendimiento de tus aplicaciones web.
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Construye aplicaciones peer-to-peer con Pear Runtime
JSNation 2024JSNation 2024
152 min
Construye aplicaciones peer-to-peer con Pear Runtime
WorkshopFree
David Mark Clements
David Mark Clements
Aprende cómo construir rápidamente aplicaciones peer-to-peer con Pear Runtime. No se requieren servidores. Comprende los paradigmas peer-to-peer y construye aplicaciones a partir de bloques de construcción bien definidos. En este masterclass se cubrirá cómo crear aplicaciones de escritorio y terminales (con discusión para móviles) que funcionan completamente peer-to-peer desde cualquier lugar del mundo. Al final de este masterclass, deberías saber cómo construir un nuevo tipo de aplicación altamente escalable con costos infraestructurales reducidos (~0) junto con arquitecturas adecuadas y mejores prácticas para aplicaciones peer-to-peer. Del creador de Pear Runtime y la compañía que nos trae keet.io. Tabla de contenido:- Introducción a Pear- Preguntas y respuestas iniciales- Configuración- Creación de una aplicación de escritorio Pear- Compartir una aplicación Pear- Ejecutar una aplicación Pear- Creación de una aplicación terminal Pear- Lanzamiento de una aplicación Pear- Discusiones arquitecturales- Preguntas y respuestas finales
GraphQL: De Cero a Héroe en 3 horas
React Summit 2022React Summit 2022
164 min
GraphQL: De Cero a Héroe en 3 horas
Workshop
Pawel Sawicki
Pawel Sawicki
Cómo construir una aplicación GraphQL fullstack (Postgres + NestJs + React) en el menor tiempo posible.
Todos los comienzos son difíciles. Incluso más difícil que elegir la tecnología es desarrollar una arquitectura adecuada. Especialmente cuando se trata de GraphQL.
En este masterclass, obtendrás una variedad de mejores prácticas que normalmente tendrías que trabajar en varios proyectos, todo en solo tres horas.
Siempre has querido participar en un hackathon para poner algo en funcionamiento en el menor tiempo posible, entonces participa activamente en este masterclass y únete a los procesos de pensamiento del instructor.