Este artículo fue originalmente publicado en Dev.to.
Hoy vas a entender de una vez por todas cómo funciona el JavaScript Engine para que sepas que pasa con cada línea de código que escribes en tu proyecto. 👩💻
¡Comencemos!
Motores
Los motores son esas programas que se encargan de convertir código de alto nivel (JavaScript, Python, C) a código de bajo nivel (Machine Code, Bytecode). Cada navegador tiene su propio motor para compilar e interpretar JavaScript:
La llegada de V8 y su importancia
El día 2 de septiembre de 2008 se lanzó la primera versión del motor V8, sin saber del todo que iban a ser el gran cambio en la interpretación de JavaScript en el navegador, este dejaría de ser tan lento como lo era.
¿Cómo lo hicieron?
Entre todas las razones, la principal está en los conceptos compilador e intérprete.
El compilador es el programa encargado de convertir código escrito en un lenguaje de programación a otro lenguaje de programación de bajo nivel. Por ejemplo, el compilador del V8 es el encargado de transformar JavaScript a Bytecode y luego a Machine Code.
Por otra parte, el intérprete es el encargado de revisar el código línea por línea y ejecutarlo directamente en la máquina de destino. Cabe resaltar que los intérpretes también realizan algún trabajo de traducción al igual que los compiladores.
💡 JavaScript es en realidad un lenguaje interpretado por el navegador. Pero técnicamente también está compilado por el motor del navegador. Increíble, lo sé.
Entendiendo como funciona V8
Cuando llega un script al navegador el motor V8 inicia un proceso el cual consta de:
El optimizing compiler encuentra los puntos donde el código se puede optimizar. Normalmente optimiza el código que se repite varias veces. En caso de que la operación cambie por alguna razón, el código vuelve a la versión anterior (la des-optimizada). Esto se hace para consumir menos recursos y por lo tanto ejecutar el código más rápido.
Por ejemplo, este código puede ser optimizado:
functionadd(a, b) {
return a + b;
}
for (let i = 0; i < 1000; i++) {
add(i, i);
}
Cuando ese código se ejecute unas 50 veces, estará listo para ser optimizado porque el profiling data sabe que no cambiará.
Si se cambia el código por alguna razón:
function add(a, b) {
return a + b;
}
for (let i = 0; i < 1000; i++) {add(i, i);
}
add(1, "uno")
Volverá a su versión anterior.
Tipos de parseo
Eager Parsing:
Lazy Parsing:
El proceso de parsing hace parte del 15% — 20% del proceso de ejecución así que hay que tenerlo muy en cuenta.
…
¡Y eso es todo! Así funciona el motor V8 de JavaScript desarrollador por Chrome.
Los motores de los demás navegadores tienen casi el mismo proceso de ejecución del V8 Engine ya que fueron creados a partir de este. Cuentan solo con algunas pequeñas diferencias. Como por ejemplo en las capas de optimización:
Los de 2–3 capas se ejecutan un poco más lento pero se optimizan más rápido.
