Avui vas a entendre d’una vegada per totes com funciona el JavaScript cerca perquè sàpigues que passa amb cada línia de codi que escrius en el teu projecte.
Comencem! 👩💻
Motors
Els motors són aquestes programes que s’encarreguen de convertir codi d’alt nivell (JavaScript, Python, C) a codi de baix nivell (Machine Code, Bytecode) . Cada navegador té el seu propi motor per compilar i interpretar estigui habilitat:
- V8 de cerca (Google Chrome), el qual també és motor de NODE.JS (En aquest ens basarem per a l’explicació).
- Spider Monkey (Mozilla Firefox).
- Chakra (Microsoft Edge).
- JavaScriptCore (Apple Safari).
La arribada de V8 i la seva importància
el dia 2 de setembre de 2008 es va llançar la primera versió de l’motor V8, sense saber de el tot que anaven a ser el gran canvi en la interpretació de JavaScript al navegador, aquest deixaria de ser tan lent com ho era.
com ho van fer? a Entre totes les raons, la principal està en els conceptes compilador i intèrpret.
el compilador és el programa encarregat de convertir codi escrit en un llenguatge de programació a un altre llenguatge de programació de baix nivell. Per exemple, el compilador de l’V8 és l’encarregat de transformar JavaScript a Bytecode i després a Machine Code.
D’altra banda, l’intèrpret és l’encarregat de revisar el codi línia per línia i executar directament a la màquina de destinació. Cal ressaltar que els intèrprets també realitzen algun treball de traducció a l’igual que els compiladors.
Entenent com funciona V8
Imatge presa de el Curs Professional de JavaScript en Platzi.
Quan arriba un script a el navegador el motor V8 inicia un procés el qual consta de:
- Rebre el codi JavaScript com un flux de bytes UTF-16 i passar-lo a un descodificador de flux de bytes (el qual fa part de l’motor).
- parsejar (transformar) el codi i descomposar-lo en tokens (els tokens són elements de jS com: let, new, símbols d’operacions, functions, promises).
- Gràcies a l’anterior parseo es genera una estructura de dades en forma d’arbre, o bé, Abstract Syntax Tree (AST). V8 compta amb dos tipus de parseo que veuràs a continuació.
- L’intèrpret recorre l’AST i va generant el bytecode.
- Després d’interpretar tot el codi, el profiling data va avaluant el bytecode diverses vegades més i d’aquesta manera descobreix que pot enviar-li a l’Optimizing compiler, el qual s’encarrega d’optimitzar el codi bytecode a machine code i així es substitueix el codi base per executar el codi JavaScript més ràpid i usar menys recursos.
el Optimizing compiler troba els punts on el codi es pot optimitzar. Normalment optimitza el codi que es repeteix diverses vegades. En el cas que l’operació canviï per alguna raó, el codi torna a la versió anterior (la des-optimitzada). Això es fa per consumir menys recursos i per tant executar el codi més ràpid.
Per exemple, aquest codi pot ser optimitzat: a
function add(a, b) { return a + b;}for(let i = 0; i < 1000; i++) { add(i, i)}Quan aquest codi s’executi unes 50 vegades, estarà a punt per a ser optimitzat perquè el profiling data sap que no canviarà.
Si es canvia el codi per alguna raó: a
function add(a, b) { return a + b;}for(let i = 0; i < 1000; i++) { add(i, i)}add(1, "uno")Tornarà a la seva versió anterior.
Tipus de parseo
- Eager Parsing:
- Troba errors de sintaxi.
- Crea el AST.
- Construeix scopes.
- Lazy Parsing:
- Doble de ràpid que el eager.
- No crea l’AST.
- Construeix scopes parcialment.
el procés de parsing fa part de l’15% – 20% de l’procés d’execució així que cal tenir-ho molt en compte .
Diferències entre motors
Els motors dels altres navegadors tenen gairebé el mateix procés d’execució de l’V8 de cerca ja que van ser creats a partir d’aquest. Compten només amb algunes petites diferències. Com per exemple en les capes d’optimització:
- V8 de cerca (Chrome): 1 Sola capa d’optimització.
- Spider Monkey (Firefox): Té 2 capes d’optimització.
- Chakra (Edge): Té 2 capes d’optimització.
- JavaScriptCore (Safari): Té 3 capes d’optimització.
Els de 2 -3 capes s’executen una mica més lent però s’optimitzen més ràpid.
En conclusió
Això és tot! Així funciona el motor V8 de JavaScript desenvolupat per al navegador Chrome.
No oblidis practicar i ens veiem en el pròxim post 🚀
Cover image courtesy of midu.dev. For more credits, please contact em.