A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Parsers y el Abstract Syntax Tree

12/42
Recursos

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.

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.

Aportes 87

Preguntas 10

Ordenar por:

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

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.

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.

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鈥檃s 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.
<h1>Modos de parsing</h1>

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

<h4>驴Qu茅 hace un JS Engine?</h4>
  • 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
<h4>驴Qu茅 hace un parse?</h4>

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.
<h4>Parse de V8</h4>

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

鈥淧arsing鈥 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 鈥渢okenizaci贸n鈥 (dividir en fragmentos) y en la construcci贸n del 谩rbol. Los 鈥渢okens鈥 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 鈥減arser鈥 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> 鈥攑articularmente 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 鈥渞enderizado鈥 (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

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

驴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