A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

C贸mo funciona el JavaScript Engine

14/42
Recursos

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.

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

Aportes 79

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渃aliente鈥 sino que estoy 鈥渓isto 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!!

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鈥攅l caso es que es genial conocer como funciona la optimizacion y en general todo motor de js en cada navegador.

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
<h4>Bytecode vs Machine Code</h4>
  • 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