Parsers y el Abstract Syntax Tree

Apuntes

apuntes de la clase:

Parsers y el Abstract Syntax Tree

‌

Para que el código llegue al navegador tiene que pasar muchas cosas, agarra el código, lo analiza, lo descontruye, lo construye nuevamente, lo ejecuta y lo optimiza. Vamos a hablar de todo esto.

‌

La web

‌

Ha cambiado mucho, cuando empezó a leer JavaScript lo hacía con Netscape que hacía cosas muy simples, se leía línea por línea, un paso a la vez. Hoy es igual, pero ahora de una forma diferente, ahora Google lo ha cambiado, ellos necesitaban a un navegador que ejecutara todo eficientemente. Por eso reinventó el funcionamiento del motor de JavaScipt. En resumen esto es lo que hace:

‌

Este es el proceso que realiza JavaScript para lograr ejecutar su código de la mejor forma posible. Ahora veamos un gráfico donde se explica mejor.

‌

• Bytecode: es un código de más bajo nivel que permite que se ejecute mucho más rápido.

• Profiling data: encuentra todos los puntos optimizables del código para luego dar paso al optimizer compiler

• Optimized code

‌

Aveces este proceso falla y se quita la optimización.

‌

Parser

‌

Este agarra tu código fuente y lo lee, pero tiene que descomponerlo primero, a estos pedazos se les llama tokens, identifica que significa cada palabra o símbolo. Una vez teniendo esta información se pasa al Abstract Syntax Tree.

‌

Cuando sucede un error en esta lectura es donde sucede el syntaxError. No se puede leer tu código y no tiene sentido, los lenguajes de programación son muy formales, no se puede violar las reglas. Este proceso tiene que hacerse muy bien. Veamos que dice Google sobre este tema.

‌

La mayoría del código no se ejecuta, por esto tenemos que empaquetar nuestro código de forma eficiente, a esto se le llama bunding y code splitting, separaremos el código y lo cargaremos cuando sea necesario solamente. Esto se ve mucho en la SPA.

‌

Existen forma de hacer, concretamente dos, veamos cómo lo hace el V8.

‌

Cuando se hace el Eager Parsing es donde se ve los errores y crea el AST, el árbol se lectura de nuestro programa, también se construye los scopes para leer las variables globales o privadas.

‌

Cuando hacemos Lazy Parsing retrasamos alguna parte del código, logrando un x2 de rápido en la lectura, no se crea el AST y los scopes se construyen parcialmente.

‌

Tokens

‌

Te compartiré un link donde puedes experimentar con los tokens para ver cómo funciona.

‌

• Tokens | Demo

‌

Allí veremos como nos arroja los tokens de una declaración.

> var answer = 6 * 7;
< [
	    {
	        "type": "Keyword",
	        "value": "var"
	    },
	    {
	        "type": "Identifier",
	        "value": "answer"
	    },
	    {
	        "type": "Punctuator",
	        "value": "="
	    },
	    {
	        "type": "Numeric",
	        "value": "6"
	    },
	    {
	        "type": "Punctuator",
	        "value": "*"
	    },
	    {
	        "type": "Numeric",
	        "value": "7"
	    },
	    {
	        "type": "Punctuator",
	        "value": ";"
	    }
	]

‌

Esto nos da el tipo y el valor que tiene cada palabra, símbolo o número. Tendremos cada uno de los caracteres clasificados para poder manipular y leer cada uno de ellos.

‌

AST

‌

Esta es una estructura en forma de árbol, Abstract Syntax Tree. Este empieza desde una raíz y se desploma en partes.

‌

Se puede usar en muchos lugares, para corregir el código, para compilar, entre otras funciones. Podemos experimentar en el siguiente enlace.

‌

• AST | Example

‌

Allí veremos como se va ramificando nuestro programa y va haciéndolo en forma de patrón anidado profundo, aparece valores que nuestro programa terminará ejecutando.

En verdad este curso me voló la cabeza !

Me van a faltar estrellas para puntuarlo

Ey chicos me tome el tiempo para traerles las mejores notas del curso, denle una checada porfavor a mis notas, y si son de su agrado dejenme un like en github. Saludos 😄
Notas o https://github.com/JasanHdz/javascript-professional/tree/master/notes

Alguien me puede explicar como es que nosotros hacemos para influir en Eager Parsing y Lazy Parsing por favor.

Nada como entender las cosas desde su raíz, te permite tomar decisiones conscientes al momento de desarrollar (en este caso) y no sentir que est’as haciendo magia.

Cuando se habla de** lenguajes de alto nivel**, esto quiere decir que son mas fáciles de interpretar por un humano y cuando se dice que son lenguajes de bajo nivel, quiere decir que son mas fáciles de interpretar por las maquinas

Wow… ¿En serio nos estamos metiendo detrás del lenguaje? Amo este curso xD

Los bundlers y el code-splitting se usa mucho en VueJS para mejorar la carga de las páginas y cargar solo los scripts que necesitamos, es genial porque podemos ver como en la pestaña Network se van cargando los pedazos de código a medida que los requerimos mediante interacciones en la app.

Si sabía que el código JavaScript se interpretaba hasta ser código máquina, pero no sabía exactamente cómo lo hacía, y por o que veo pasa por 4 etapas fundamentales: Código fuente -> Abstract Syntax Tree -> Código binario -> Código máquina (Optmizado), y es en el proceso del cóidigo fuente hacía el AST donde se hace la revisión de la sintaxis ^^

Parsers y Abstract Syntax Tree

JS Engine:

1. Recibe código fuente
2. Parsea el código y produce un Abstrat Syntax Tree (AST)
3. Se compila a bytecode y se ejecuta
4. Se optimiza a machine code y se reemplaza el código base

Parser

Recibe el código fuente y lo analiza. Mira las palabras reservadas y genera tokens con los que arma el AST.
Para ver los tokens: https://esprima.org/
Si se encuentra con una parte del código que no forma parte de la sintaxis del lenguaje se lanza un SyntaxError.

Google dice que:

1. parsing es el 15-20% del proceso de ejecución.
2. La mayoría del javascript en una página nunca se ejecuta.
3. Esto hace que bundling y code splitting sea muy importante.

Eager parsing:

• Encuentra syntax errors.
• Crea el AST.
• Construye scopes.

Lazy parsing:

• Doble de rápido.
• No crea el AST.
• Construye scopes parcialmente.

Abstract Syntax Tree ( AST )

Es un grafo que representa un programa.
Ejemplo: https://astexplorer.net/

Se usa en:

• JS Engine
• Bundlers: Webpack, Parcel.
• Transpilers: Babel.
• Linters: ESlint, Prettier.
• Type checkers: TypeScript, Flow
• Syntax highlighters.

Ahora entiendo por que la ignorancia es la felicidad de muchos. Nunca imaginé que aprender JS provocaría el que pisara estos terrenos. Nunca llevé lenguajes formales y autómatas en la universidad. Soy licenciado en informática y sé programar.

Debemos de pensar en un parser como el traductor de codigo que pasa el codigo que nosotros escribimos a codigo que nuestra computadora pueda entender.

Fuente: Javascript Syntax Parser

Les comparto una tarea que hice en la universidad en la que profundizo acerca de lo que realiza un interprete y un compilador para ejecutar nuestro código.

diferencias entre intérprete y compilador y las fases de la compilación

Increíble clase, es la primera vez que veo ejemplificados todos estos conceptos y no solo fueron mencionados.

Magistral esta clase, me ha dado duro este curso , pero cada vez se aprende mas.

Tokenizing/Lexing: fragmentar una cadena de caracteres en trozos significativos (al lenguaje) llamados tokens(fichas). Por ejemplo, considere el programa: var a = 2;. Este programa probablemente se dividiría en los siguientes tokens: var, a, =, 2 y ;. El espacio en blanco puede o no persistir como un símbolo, dependiendo de si es significativo o no.
Nota: La diferencia entre el tokenizing y el lexing es sutil y académica, pero se centra en si estos token se identifican o no de una manera sin estado o con estado. En pocas palabras, si el token invocara reglas de análisis de estado para determinar si a debe ser considerado un token distinto o sólo una parte de otro token, eso sería lexing.

Análisis sintáctico: coge un flujo (matriz) de tokens y lo convierte en un árbol de elementos anidados, que representan colectivamente la estructura gramatical del programa. Este árbol se llama «AST» (Abstract Syntax Tree o Arbol abstracto sintáctico ).
El árbol para var a = 2; puede comenzar con un nodo de nivel superior llamado VariableDeclaration, con un nodo hijo llamado Identifier (cuyo valor es a) y otro hijo llamado AssignementExpresión que tiene un hijo llamado NumericLiteral(cuyo valor es 2).

Generación de código: el proceso de tomar un AST y convertirlo en código ejecutable, esta parte varía enormemente dependiendo del idioma, la plataforma a la que se dirija, etc.
Por lo tanto, en lugar de entrar en detalles, simplemente nos limitaremos a decir que hay una manera de tomar nuestro AST descrito anteriormente para var a = 2; y convertirlo en un conjunto de instrucciones de máquina para crear una variable llamada realmente a(incluyendo la reserva de memoria, etc.), y luego almacenar un valor en un a.

Nota: Los detalles de cómo el motor maneja los recursos del sistema son más profundos de lo que vamos a indagar, así que daremos por sentado que el motor es capaz de crear y almacenar variables según sea necesario.

Dejo un post hecho por @lydiahallie que también explica muy bien y detalladamente cómo funciona el Motor de JavaScript.

🚀⚙️ JavaScript Visualized: the JavaScript Engine

vine del curso de v8 y me después de terminar ese curso empezare con este, me gusto tu explicación

Parsers y el Abstract Syntax Tree

Javascript llego con Netscape. Pero a finales de la década del 2000, Google necesitaba poder mejorar Google Maps, así que decidieron mejorar el motor de JS.

¿Qué hace el motor de JS V8?

• Recibe el código fuente
• Parsea el código y produce un Abstract Syntax Tree
• Se compila a bytecode y se ejecuta
• Se optimiza a machine code y se reemplaza el código base

⚠ Un SyntaxError es lanzado cuando el motor de JS se encuentra con partes de código que no forman parte de la sintaxis del lenguaje al momento de analizar el código.

Abstract Syntax Tree (AST):

Es un grafo (estructura de datos) que representa un programa. Se usa en:

• Javascript Engine
• Bundlers: Webpack, Rollup, Parcel
• Transpilers: Babel
• Linters
• Type Checkers: TypeScript, Flow
• Syntax Highlighters

![eso es un grafo 😄
](

Que parser strategy utiliza javacript, top-down,bottom-up???

Apuntes

Muy bueno el curso enserio hasta ahorita.

Muy interesante, casi nadie toca el tema del AST

Muy buena esta clase, nunca había visto que alguien explicara estos conceptos de una manera tan clara…

todo una serie de pasos este V8.

Este curso está super, completo. Me la he tenido que llevar lento y detenido para comprender todo.

Hasta acá esta curso ha sido muy tedioso, difícil de seguir pero creo q esto me ha forzado a aprender a mas profundidad, al principio estuve aburrido pq el profe iba rápido y casi no le entendía, pero con el tiempo se le agarra el ritmo

parse con esprima

• Recibe un código fuente
• Parsea el código y produce un Abstract Syntax Tree (AST)
• Se compila a bytecode y se ejecuta
• Se optimiza a machine code y se reemplaza el código base

Un parse toma el código fuente luego lo lee y lo descompone en tokens, estos identifican las palabras clave, operadores y variables, si encuentra algo que no tiene sentido ocurrirá un Syntax Error.

Un Syntax Error es lanzado cuando el motor de JavaScript se encuentra con partes de código que no forman parte de la sintaxis del lenguaje al momento de analizar el código.

Google dice:

• Parsin es 15-20% del proceso de ejecución
• La mayoría de JavaScript en una página nunca se ejecuta
• Esto hace que bundling y code splitting se muy importante. Solo cargar ciertos archivos cuando sea necesario.

Eager Parsing:

• Encuentra errores de sintaxis
• Crea el AST
• Contruye scopes

Lazy Parsing:

• Doble de rápido que el eager parsing
• No crea el AST
• Construye los scopes parcialmente.

A todo esto le hace falta ejercicios prácticos. Pero esta muy interesante.

En bytecode empieza a ejecutarse nuestro programa.

Google dice:

• Parsing es 15-20% del proceso de ejecución
• La mayoría del JavaScript en una página nunca se ejecuta.
• Esto hace que bundlling y code slitting sea muy importante

Un SyntaxError es lanzado cuando el motor JavaScript encuentra partes que no forman parte de la sintaxis del lenguaje y esto lo logra gracias a que se tiene un AST generado por el parser.

El parser es del 15% al 20% del proceso de ejecución por lo que hay que usar parser del código justo en el momento que lo necesitamos y no antes de saber si se va a usar o no.

Increíble!

Maravilloso!!!

Puedes ver como se crea el Abstract Syntax Tree en vivo! en esta página:
https://astexplorer.net/

-Codigo en JS

-El codigo en el Abstract Syntax Tree

“Parsing” significa analizar y convertir un programa en un formato interno que un entorno de ejecución pueda realmente ejecutar, por ejemplo el motor JavaScript dentro de los navegadores.

El navegador analiza el HTML en un árbol DOM. El análisis de HTML implica la “tokenización” (dividir en fragmentos) y en la construcción del árbol. Los “tokens” HTML incluyen etiquetas de inicio y final, así como nombres de atributos y valores. Si el documento está bien formado, el análisis sintáctico es más sencillo y rápido. El “parser” analiza la entrada simbólica en el documento, construyendo el árbol del documento.

Cuando el analizador de HTML encuentra recursos que no bloquean, como una imagen, el navegador solicitará esos recursos y continuará analizando. El análisis puede continuar cuando se encuentra un archivo CSS, pero las etiquetas <script> —particularmente aquellas sin un atributo async o defer— bloquean el renderizado, y pausa el análisis de HTML.

Cuando el navegador encuentra estilos CSS, analiza el texto en el Modelo de Objetos CSS (o CSSOM), una estructura de datos que luego utiliza para diseñar la distribución y el pintado. El navegador crea entonces un árbol de “renderizado” (dibujado) a partir de ambas estructuras para poder pintar el contenido en la pantalla. También se descarga el JavaScript, se analiza y luego se ejecuta.

El análisis de JavaScript se hace durante compile time o cuando se invoca el parser, como durante una llamada a un método

Me encontré con este magnifico post que pone en contexto sobre el Bundling y code splitting
https://www.simplethread.com/javascript-modules-and-code-bundling-explained/#:~:text=The compiler combines modules into,the downsides of the past.

al usar el operador de suma tambien puede ser un string, jajaja quien recuerda haber hecho una calculadora y al sumar 1 + “1” les daba 11 ajajajja

Esta clase es fantastica, Un excelente resumen a profundidad de una parte del curso de V8, Genial

Alguna pagina donde pueda practicar con ejercicios de js sencillos?

Excelente clase genial saber como se va armando todo el lenguaje

es bueno conocer a profundidad como funciona por dentro JS

tengo miedo :c

Genial, muy interesante.

Muy educativo

Empaquetar todo, por que no todo el codigo se ejecuta

Como funciona JavaScript
JS Engine => motores de JavaScript
Recibe el codigo, lo analiza , lo pasa a Abstract Syntax Tree(AST), un interpretador lo pasa a bytecode , que es lo que se ejecuta
y ahora pasara a machine code , que es el mismo codifgo pero mas optimizado.

Que es el parser?
Coge el codigo fuente y lo lee, antes de leer lo descompone en tokens , si al leerlo se detecta un error ,
que un error es cuando el motor de JavaScript, encuentra partes de codigo que no forman parte de la sintaxis, salta el SyntaxError.

Me estallo la cabeza con esta clase!

El modulo de este curso de como funciona JS es muy importante porque existen empresas muy especificas que te preguntan si sabes como el browser interpreta el JS, excelente curso

Perfecto con la explicación del comienzo de javascript, estas cosas se necesitan tarde o temprano

Parser de V8. Eager parsing y Lazy parsing.

Totalmente maravilloso, nunca había visto una explicación de esto

Como funciona el JS Engine

El motor de Js realiza lo siguiente:

• Recibe codigo fuente
• Parsea Código y produce un Abstract Syntax Tree (AST)
• Se compila a bytecode y se ejecuta
• Se optimiza a machine code y se reemplaza el código base

Sé que se puede aprender sin pasar por la universidad, pero gracias a esta clase acabo de entender lo que no le entendí durante un semestre entero a mi profesor de compiladores

No lo habia pensado pero si tiene razon, la mayoria del codigo solo esta esperando a ser ejecutado y en cambio si tiene que ser compilado, ineficiente

Parsers y abstract syntax tree

Lo que hace el JS Engine es:

• Recibir el código fuente
• Parsea el código y produce un AST (Abstract Syntax Tree)
• Se compila a bytecode y se ejecuta
• Se optimiza a machine code y se remplaza a código base

En pocas palabras lo analiza, deconstruye, va a construir, lo ejecuta y luego lo optimiza.

Lo primero que hace es descargar el script, se va a descargar en un flujo de bytes de UTF-16, y se va a pasar a un decodificador de bytes.

El decodificador de bytes va a crear tokens. Por ejemplo, 0066 lo decodifica a f, 0075 a u, 006e a n, 0063 a c, 0074 a t, 0069 a i, 006f a o, 006e a n. Vemos que el parser nos da function y es una keyword de JS, cuando el parser trabaja, nos separa si es un keyword, identifier (nombre de variable), punctuator, string, number.

El motor de JS usa dos parser, el pre-parser y el parser. Para reducir el tiempo de carga, el navegador evita parsear el código que no es necesario en ese momento. El pre-parser maneja todo el código que se va a usar después y el parser maneja el código que se va a usar inmediatamente.

Cuando el parser esta analizando el programa y encuentra algo que no tiene sentido es cuando sale el error de syntax error. Un syntax error es lanzando cuando el motor de JS se encuentra con partes de código que no forman parte de la sintaxis del lenguaje al momento de analizar el código.

El proceso de parsing es importante que se haga bien porque el parsing es el 15-20% del proceso de ejecución, entre más grande el proyecto, más tarda el parsing. Algo malo es que la mayoría del JS no se termina ejecutando, esto hace que se haga bundlig y code splitting, esto quiere decir que empaquetamos nuestro código en archivos separados que cargan solo cuando es necesario.

El parser va a crear unos nodos basado en los tokens, cons estos nodos se va a crear el Abstract Syntax Tree.

El Abstract Syntax Tree es una estructura de datos que representan a nuestro programa.

Resumen de la clase:
Cuando un JS llega al navegador empieza un proceso ejecutado por el motor JS: agarra el código, lo deconstruye, lo construye nuevamente, lo ejecuta y lo optimiza.
.
La web
Cuando JS llega con Netscape se realizaban tareas muy simples.
Luego Google con sus productos complejos como Google maps necesitaba un navegador que ejecutara todo eficientemente. Por eso reinventó el funcionamiento del motor de JavaScipt.
.
¿Qué hace un JS engine?
El JS Engine recibe el código fuente y lo procesa de la siguiente manera:
• El parser descompone y crea tokens que integran el AST.
• Se compila a bytecode y se ejecuta.
• Lo que se pueda se optimiza a machine code y se reemplaza el código base.
Glorario:
• Bytecode: es un código de más bajo nivel que permite que se ejecute mucho más rápido.
• Profiling data: encuentra todos los puntos optimizables del código para luego dar paso al optimizer compiler
• Optimized code
.
Parser
El código JS no puede ser leído por el navegador. Por ello debe descomponerlo en pedazos llamados tokens. Con esta información se crea el ATS.

Un SyntaxError es lanzado cuando el motor JavaScript encuentra partes que no forman parte de la sintaxis del lenguaje
Existen 2 formas de hacer parser, veamos cómo lo hace el V8.

• Cuando se hace el Eager Parsing es donde se ve los errores y crea el AST, el árbol se lectura de nuestro programa, también se construye los scopes para leer las variables globales o privadas.
• Cuando hacemos Lazy Parsing retrasamos alguna parte del código, logrando un x2 de rápido en la lectura, no se crea el AST y los scopes se construyen parcialmente.
  .
  AST (Abstract Syntax Tree)
  Esta es una estructura en forma de árbol, Abstract Syntax Tree. Este empieza desde una raíz y se descompone en partes siguiendo los tokens producidos en parser.

😱 Esto es otro nivel, esto literal es lo más avanzado que he visto de JS hasta el momento!!

¿Que hace un Js Engine?

• Recibe código fuente
• Parsea el código y produce un Abstrac Syntax Tree (AST)
• Se compila a bytecode y se ejecuta.
• Se optimita a machine code y se reemplaza el código base

¿Qué hace un Js Engine específicamente?

Este es el proceso que realiza JavaScript para lograr ejecutar su código de la mejor forma posible. Ahora veamos un gráfico donde se explica mejor.

• Recibe código fuente
• Parsea el código.
• produce un Abstrac Syntax Tree (AST)
• Se interpreta el código a partir del (AST)
• Se compila a bytecode y se ejecuta.
• Mientras se transforma en bytecode se encuentra todos los puntos optimizables(Profiling data)
• Luego de optimizado el código va producir el machine code, y esto lo hace el compilador de optimizaciones (Optimizing compilar) y se reemplaza el código base

‌- Java

• Bytecode: es un código de más bajo nivel que permite que se ejecute mucho más rápido.

• Profiling data: encuentra todos los puntos optimizables del código para luego dar paso al optimizer compiler

• Optimized code: A veces este proceso falla y se quita la optimización.

‌

Parser

Este agarra tu código fuente y lo lee, pero tiene que descomponerlo primero, a estos pedazos se les llama tokens, identifica que significa cada palabra o símbolo. Una vez teniendo esta información se pasa al Abstract Syntax Tree.

Syntax Error

Un Syntax error es lanzado cuando el motor de Js se encuentra con partes del código que no forman parte de la sintaxis del lenguaje al momento de analizar el código.

¿Cuánto tarda Js en ejecutar el proceso de parsing?

Según estadísticas de google:

• El parsing es el 15-20% del proceso de ejecución.
• La mayoría del JavaScript en una página web no se ejecuta.
• Esto hace que bundling y code splitting sea muy importante.

La mayoría del código no se ejecuta, por esto tenemos que empaquetar nuestro código de forma eficiente, a esto se le llama bunding y code splitting, separaremos el código y lo cargaremos cuando sea necesario solamente. Esto se ve mucho en la SPA.

Formas de hacer parsing

Existen forma de hacer parsing, concretamente dos:

Hay dos modos de hacer parsing y es lo que hace el motorde Google Chrome que se llama B8 o el de note, que es el mismo. Está el Eager y el Lazy.

Eager Parsing

Cuando se hace Eager Parsing vamos a encontrar todos los errores de sintaxis en el código que se está analizando y se va a crear el AST Que es simplemente un árbol. Hace una estructura en forma de árbol que representa tu programa y además va a construirlos scopes. Es decir, ya este momento vamos a saber qué variables se pueden leer, en qué partes del código.

Una consecuencia, Eager Parsing es que lleva mayor tiempo en cargar la página

Lazy Parsing

Lazy Parsing, se está retrasando alguna parte del código que por el momento no hace falta y por ende no hace falta analizarla. Esto tiene la ventaja, que es doble de rápido.
‌
Una consecuencia del Lazy Parsin es que el AST no se construye y los scopes se construyen parcialmente

AST

Esta es una estructura en forma de árbol, Abstract Syntax Tree. Este empieza desde una raíz que es nuestro programa o código js y básicamente nuestro programa se descompone en partes formando una estructura lógica de árbol siguiendo los tokens que produjo el parser.

Esto tiene muchos usos sitios no solo para ejecutar un programa JavaScript también lo usamos para transformar el código de una forma a otra. Por ejemplo, lo que hace Babel. O Prettify.

Este es el link que nos dirige a la página en la que se encuentra el profesor
https://esprima.org/demo/parse.html

Exelente clase.

Muy bueno!

Tokens = palabras reservadas del lenguaje de JS

Buena expliación de JS, como funciona

Excelente información para tner en cuenta.

Me encantó esta clase, excelente explicación.

Entenido.

Ese sonido al iniciar aturde bien gacho, pero te despierta, es como un HEY! Despierta y pon atención!!! jajja

Bueno, ahí vamos.

El JS Engine recibe el código fuente y lo procesa de la siguiente manera:

El parser descompone y crea tokens que integran el AST.
Se compila a bytecode y se ejecuta.
Lo que se pueda se optimiza a machine code y se reemplaza el código base.

le pifia un poco la transcripción jajaj

Una buena referencia para entender el code splitting

¿Qué hace un parser?

Información muy útil para conocer el lenguaje y el motor a fondo

excelente explicación

Excelente clase.

Excelente clase. Se le abre uno mucho la mente!! 🤯

Gran explicación del motor de JS!

Bastante interesante…

Excelente explicacion, lo que entendí por bundling y code splitting es que cuando se pueda, es mejor usar los archivos js separados en modulos, para evitar que codigo que no es necesario se ejecute.

Parser: Descompone en código funte en Tokens para que sean crear el AST. es el 15-20% de ejecución y la mayoría de JS que se envía no se ejecuta.
Por eso el Bundling y Code Splitting es importante.

• Eager Parsing:Se encuentran los errores de sintaxis y se crea el AST. Por otro lado crea los scopes dentro del código.
• Lazy Parsing: Doble de veloz del Eager porque no crea el AST, adicionando que los Scopes son parciales.

AST: Abstract Syntax Tree: ES UN GRAFO. Estructura en forma de árbol que representa un programa. Se tiene una razín que es el programa y se descompone en Tokens creados por el Parser.
Se usa en
JS Engine,
Bundlers, Rollup, Parcel.
Transpilers - Babel
Linters: ESLint, Prettify
Type Checkers - TypeScript

excelente clase.
vamos por mas!

How js works

GIGACHAD SUPREMO