Cómo funciona el JavaScript Engine

El script se carga como un flujo de bytes UTF-16, ya sea para la red, la caché o un** trabajador**, y se pasa a un decodificador de flujo de bytes.

El decodificador de flujo de bytes decodifica los bytes en tokens. Los tokens se envían al analizador.

El analizador genera **nodos **basados en los tokens, y crea un Abstract Syntax Tree.

El intérprete camina a través de la AST y genera byte code.

El byte code y el feedback type se envían al optimizing compiler, que genera código de máquina altamente optimizado.

Apuntes de la clase:

Ya no tengo que decir que estoy “caliente” sino que estoy “listo para ser optimizado” jaja

Cómo funciona el JavaScript Engine

‌

Justo después de que el AST se crea se pasa el código a Bytecode. Bytecode: es lo que va a estar ejecutando el motor de JavaScript y a su vez va a estar produciendo código optimizado.

‌

Las observaciones que se hace al Bytecode cuando se ejecuta hace posible optimizarlo.

‌

Bytecode es parecido a assembly pero sobre un motor virtual. Assembly es el código en binario.

‌

Cuando el motor v8 produce este código lo crea en machine code.

‌

El profiling toma anotaciones de bytecode y ve repeticiones en el código puede hacer optimizaciones. Ejemplo:

‌

Cuando una función está hot significa que es hora de optimizar esa parte del código, eso sucede cuando se llama muchas veces. Allí es donde se pasa a machine code.

‌

Cuando la función recibe un parámetro diferente se quita la optimización y se pasa a bytecode.

‌

Veamos las capas de optimización:

‌

Cada navegador tiene su propia forma de optimizar su código. Quizá nos parezca muy diferente pero al final hace su trabajo; ejecutar el código de la mejor forma.

Si queremos aprovechar al máximo las bondades de los motores de Javascript debemos preocuparnos por:

1. Las funciones reciban los mismos tipos de datos
2. Los tipos de datos que contengan estructuras (Arreglos y Objectos) mantengan la misma forma estructural.

De esa forma el motor de Javascript podrá optimizar el código que se ejecuta constantemente enviándolo de ByteCode a OptimizedCode

consejo,
vean el curso de fundamentos de ingenieria de software

Dejo por aquí este articulo que vi muy interesante para complementar el tema: https://blog.logrocket.com/how-javascript-works-optimizing-the-v8-compiler-for-efficiency/

Cuando V8 compila el código, el parseador genera un Abstract Syntax Tree. Ignition, nombre del interpretador de este motor, genera el bytecode desde este AST. TurboFan, el compilador optimizador, eventualmente toma el bytecode y genera un machine code optimizado.
.
PD: Dejo la referencia de esto acá, no soy muy bueno en inglés, pero consideré importante esta info.

El código va a empezar a ponerse caliente!!! 😄 Que grande es Richard!! Que bien explica y como simplifica cosas tan abstractas!! Felicidades profe!!

Ohhh que genial! Aquí puedo comprender un poco mejor a V8, pensaba que V8 era el único motor de JavaScript, ahora veo que existen más…

Algo interesante y que no sabía era lo de la hot function, ahora veo que se puede optimizar gracias al optimizador interno de V8, es prácticamente como una inteligencia artificial interna del motor que mira cómo se está comportando la ejecución de una función y si detecta una constante en sus llamados procede a optimizarla, pero es justo en el momento en el que detecta que esa constante se rompe (Porque el programador hizo algo raro) cuando el motor decide ya no optimizarlo porque noto un comportamiento diferente, y es ahí cuando viene la deoptimización, y simplemente la deoptimiza para dejar el programa tal cual, para que no cause errores la optimización anterior, me encanta!

Hoy aprendi la importancia de las funciones recursivas y funciones reutilizables. La manera en que estan hechas hace que sean facil de optimizar.
Gracias Richard K. sigame enseñado por favaaar!

Esta clase estuvo mas suave que las anteriores xd

No me quedo claro… si se encuentra código que debe ser optimizado, después ese código pasa ya a Machine code?
pero si no, ese código se ejecuta solo con bytecode?
Solo si se optimiza el código es cuando pasa a machine code?

Vaya buena explicación de optimizat y deoptimizar

En el sticker de la laptop ya habíamos visto cuál es la parte favorita.

:_D

MAS CALIENTEEEEE Y LISTO PARA SER OPTIMIZADO ,EXCELENTE EXPLICACION PROFESOR LO ENTENDI PERFECTO

El profiler y el observador son lo mismo?

Ahora entiendo muy bien el gráfico, que buena la clase ya que en el curso dedicado a v8 y el navegador no lo entedi por la falta de explicacion del profesor.

Muy interesante esta clase!! Me siento emocionado y asustado a la vez!!

How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code

https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e#47e8

Este enlace en una joyita: JS Engine

Waaao que buen curso este, muy profundo y profesional

Lo que aprendí en la universidad es que el código maquina o Ensamblador, es el código de más bajo nivel que puede ser escrito por un programador. Se basa en un set o conjunto de instrucciones predefinidas y registros de trabajo y memoria. Un ejemplo sería programar un microcontrolador en MPLAB, usando instrucciones para declarar puertos de entrada o salida, leer input, hacer operaciones (es necesario mover el dato al registro de trabajo), etc. las instrucciones usualmente vienen en el DATASHEET. Espero les ayude a esclarecer un poco.

Next level esta clase!!!

Hot Function
Cold Function

Nuevos conceptos sobre optimizacion y detimizacion si es que existe este ultimo término—el caso es que es genial conocer como funciona la optimizacion y en general todo motor de js en cada navegador.

https://www.youtube.com/watch?v=QpDpRmlFfqI Excelentes ext

Esta serie de articulos se reaccionan y las explicaciones son bastante detalladas, y con sus animaciones ayuda a que sea mas fácil de entender.
https://dev.to/lydiahallie/series/3341

Les comparto una lectura muy completa de como funciona el motor de javascript
https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

Me encantó el ejemplo de la función que se calentaba XD

V8 no es el único motor de JavaScript. Cada navegador que existe solia tiene un motor de JavaScript. Aunque diversos navegadores están adoptando a V8.

Recapitulando el JavaScript Engine tenemos lo siguiente:

1. El escáner: Es el código consumido en una secuencia de caracteres Unicode que se decodifican a partir de una secuencia de unidades de código UTF-16.
2. Tokens: Bloques creados a partir de tu código y que hacen referencia a que estás escribiendo.
3. Parser y pre-parser: El parser maneja el código que se necesita de inmediato. El pre-parser maneja el código que se puede usar más adelante. Ambos identifican diferentes tipos de errores.
4. AST: A partir de los nodos que genera el parser, se crea el AST. Un árbol que representa tu código sintácticamente.
5. Interprete: El intérprete recorre el AST y genera byte code basado en la información que contiene.
6. Profiler y compiler: El profiler monitorea y mira el código para optimizarlo. El compiler optimiza ese código y genera machine code.

Despues de que el Parser hizo su trabajo y nos dio el AST continua el compilador para obtener codigo optimizado.

Repasando que hace el JS Engine es:

• Recibe codigo fuente
• Parsea el codigo y produce el AST
• Se compila Bytecode y se ejecuta
• Se optimiza a machine code y se reemplaza el codigo base.

Una comparacion de Bytecode vs Machine code podria ser que:

• Bytecode
  • Codigo parecido a Assembly
  • Portatil
  • Ejecutado por una virtual machine
• Machine Code
  • Binario
  • Instrucciones especificas a una arquitectura o procesador

El motor V8 se encarga de convertir en Machine Code el codigo, no se ocupa la maquina virtual. El programa que esta entre el bytecode y el Optimizing es el Profiler que lo que hace es que toma observacion de la ejecucion y cuando ve que las funciones son iguales, esta hace varias optimizaciones. Esto se llama HotFuntion cuando el motor ve una funcion que siempre se repita y al detectar esto ahora lo optimiza.

Cuando el motor ve que pasa algo que no esperaba, devuelve el codigo Bytecode y se des-optimiza. El programa sigue funcionando pero no de forma eficiente.

Los diferentes motores se manejan de forma diferentes, pero aunque otros navegadores tengan mas capas de complejidad no quiere decir que sea mas rapido.

Me parece interesante entender como analiza el código y en que forma se optimiza o deoptimiza el mismo.

siento que estas clases son como las amtes en la u, siento son importantes pero no veo la utilidad inmediata jajaja

Basándonos en la lógica del código caliente, el cual se pondrá caliente simpre que pasemos los mismo tipos de datos, entiendo entonces que el código que se escribe con TypeScript al ser transpilado a JavaScript el motor V8 optimizará el código pasándolo a Machine Code, ¿Entendí bien?

Bytecode es como el código assembler pero en lugar de operar en el procesador opera en la máquina virtual V8 del navegador.

Machine code es el más bajo nivel, es código binario que va directo al procesador.

El profiler se sitúa en medio del bytecode y el optimizador

Excelente explicación del tema

muy interesante lo que sucede con javascript, me pregunto como será con los otros lenguajes…!!!

En la universidad se me complicaba el lenguaje ensamblador, me quedo con JS.

Si a un ciclo, array o función, le pasamos objetos que tengan una forma diferente, o argumentos de tipos diferentes, El motor V8 no va a poder optimizar esa parte del código, o se va a tener que deoptimizar

La parte que mas se entendio!!

Con esto entendi la clase anterior

Notable clase !

Excelente clase, había visto el tema antes pero no me quedaba claro y con esta clase lo entendí perfectamente

Que manera de explicar todo. Muy buena clase.

MÁS CALIENTEEEEEEE :v

Excelente clase! Ya muchas cosas empiezan a tener sentido, estoy viendo la luz!

Excelente clase.

Machine code! es ejecuta a Bytecode en binarios.

Mejor explicado imposible. Que nota de clase 🤯🔥

Fantástica clase.

Interesante clase

excelentemente explicado

Cada vez me gusta mas JS 😃

Excelente clase, ya quiero saber mas sobre el EventLoop

ByteCode: es lo que va a leer el motor de Javascript y a su vez va a ser interpretado.
ByteCode: parecido a Assembly, es portátil y se ejecuta en una VM.
MachineCode: Es código binario y lleva instrucciones precisas a Procesador.
·
Profiler: está en el medio de Bytecode y e Optimizador. Decide si pasa el código para ser optimizado.

_
· V8: El que estudiamos en ésta clase
· Spider Monkey: Dos capas de Optmización
· Chakra: Dos capas de Optmización, Recibe información de Profiling de varios lugares
· JavaScriptCore: Tres capas de Optmización.

Excelente

Cada máquina virtual tiene sus particularidades, por ejemplo V8 tiene algo llamado Hot Functions.

Cuando una sentencia función es ejecutada muy frecuentemente, V8 la denomina como una hot function y hace una optimización que consiste en convertirla a machine code para no tener que interpretarla de nuevo y agilizar su ejecución.

Cada navegador tiene su implementación de JavaScript Engine:

SpiderMonkey - Firefox
Chackra - Edge
JavaScriptCore - Safari
V8 - Chrome

Una vez tenemos el AST ahora hay que convertirlo a Bytecode.

Bytecode es como el código assembler pero en lugar de operar en el procesador opera en la máquina virtual V8 del navegador.

Machine code es el más bajo nivel, es código binario que va directo al procesador.

El profiler se sitúa en medio del bytecode y el optimizador

Cada máquina virtual tiene sus particularidades, por ejemplo V8 tiene algo llamado Hot Functions.

Muchas gracias por la explicación instructor Richard, quedaron claras las diferencias entre Bycode y Machine Code, junto con la optimización por la cual pasa el código.

A seguir aprendiendo…

Enserio no me imagine como el navegador ayuda a optimizar estos procesos y como podemos trabajar en paralelo con javaScript, aunque pues JavaScript es sincrono , pero junto con el motor V8 puede ejecutar el código Asincronamente, es genial quien invento este motor para renderizar y optimizar los sitios o app web.

el código va a ponerse caliente, jajajajajajaja, en qué estaba pensando este man!

Cada vez me me queda mas claro que Javascript es mi lenguaje favorito

Richard es un gran profesor 😁

Es super genial aprender cada vez más profundo y de una forma muy profesional las partes internas del lenguaje

En este articulo podemos aprender acerca del interpreter, el compiler y la relación que tienen ambos cuando se habla del compiler Just In Time (JIT). Lo anterior es la mejor forma de comprender como funciona esta parte de ejecución del código JS.

🤯🤯🤯 Que genial, seguire las recomendaciones de los compañeros, y lo mas probable es que vea este curso una segunda vez,

Super interesante, me encanto. gracias!!

osea que cada navegador tiene su propia forma de optimizar el código.

Recomiendo acompañar esta clase con el Curso de JavaScript Engine (V8) y el Navegador con Diego DeGranda
https://platzi.com/clases/javascript-navegador/

Esta clase es otro level !!!😁, como dice nachito😊 “Next level, eleve el level” 💪

Aquí un post para configurar ESLint en nuestro entorno https://lenguajejs.com/javascript/caracteristicas/eslint/

Me gusto mucho esta clase, me parece muy importante entender el porque de las cosas

Cómo funciona el JavaScript Engine

El proceso del bycode es así:

1. Cuando el bytecode se está ejecutando y hay un observador (un programa que revisa el bytecode) y va a estar tomando notas.
2. Cuando este tenga suficientes notas va a optimizar tu código

• Bytecode:
  • Código parecido a assembly.
  • Portátil.
  • Ejecutado por una virtual machine.
• Machine Code:
  • Binario.
  • Instrucciones específicas a una arquitectura o procesador.

PRINCIPALES MOTORES JS Y SUS DIFERENCIAS
El motor V8 javascript es el que usan los navegadores basados en chromium como chrome, el nuevo edge, brave etc, está escrito en C++ y compila todo el JS a código máquina directamente.
El motor SpiderMonkey está escrito en C y C++ es el que usa FireFox sin embargo, no es tan rápido como el motor V8 porque compila a un byte-code intermedio y no a código máquina.
El motor Rhino compila JS a clases de Java

Muy buena clase, muchas veces solo nos queremos dedicar a escribir código sin realmente entender que está pasando por debajo. Es muy interesante la forma en la que funciona JavaScript.

Artículo y animaciones click aquí

ByteCode: parecido a Assembly, es portátil y se ejecuta en una VM.
MachineCode: Es código binario y lleva instrucciones precisas a Procesador.
·
Profiler: está en el medio de Bytecode y e Optimizador. Decide si pasa el código para ser optimizado.

_
· V8: El que estudiamos en ésta clase
· Spider Monkey: Dos capas de Optmización
· Chakra: Dos capas de Optmización, Recibe información de Profiling de varios lugares
· JavaScriptCore: Tres capas de Optmización.

Excelente expliacion