Cum funcționează motorul JavaScript

Astăzi veți înțelege o dată și pentru tot ce funcționează motorul JavaScript, astfel încât să știți ce se întâmplă cu fiecare linie de cod pe care o scrieți pe proiectul dvs.

<

Să începem! 👩💻

Motors

Motoarele sunt acele programe care sunt responsabile pentru conversia codului de nivel înalt (JavaScript, Python, C) la codul de nivel scăzut (codul mașinii, bytecode). Fiecare browser are motorul propriu pentru a compila și interpreta JavaScript:

• v8 motor (Google Chrome), care este, de asemenea, un motor NODE.JS (în acest lucru ne bazăm pentru explicație).
• Monkey Spider (Mozilla Firefox).
• chakra (Microsoft Edge).
• JavaScriptCore (Apple Safari).

Sosirea V8 și importanța sa

La data de 2 septembrie 2008 a fost lansată prima versiune a motorului V8, fără a cunoaște tot ceea ce urma să fie o mare schimbare a interpretării lui JavaScript în browser, acest lucru ar înceta să fie la fel de lent așa cum a fost.

Cum au făcut-o?
Printre toate motivele, principalele se află în conceptele compilatorului și interpretului.

compilatorul Este programul responsabil de conversia codului scris într-un limbaj de programare la un alt limbaj de programare la nivel scăzut. De exemplu, compilatorul V8 este responsabil pentru transformarea JavaScript la bytecode și apoi la codul mașinii.

Pe de altă parte, interpretul este responsabil pentru verificarea codului de linie după linie și executați-o direct pe mașina destin. Trebuie remarcat faptul că interpreții efectuează, de asemenea, unele lucrări de traducere, precum și compilatoarele.

Înțelegerea modului V8 lucrează



Imagine preluată din cursul profesional JavaScript din Platzi.

Când sosește Un script de browser Motorul V8 pornește un proces care constă din:

1. primiți codul JavaScript ca un flux de octet UTF-16 și treceți-l la un decodor de flux octet (care face parte din motor) .
2. trsear (transformă) codul și descompune-o în jetoane (jetoanele sunt elemente JS, cum ar fi: Lăsați, noi, simboluri ale operațiunilor, funcțiilor, promisiunilor).
3. datorită Parsele anterioare, o structură de arbori este generată sub forma unui copac sau a unui arbore de sintaxă abstract (AST). V8 are două tipuri de pauze pe care le veți vedea mai jos.
4. Interpretul rulează AST și generează codul octet.
5. După ce ați redactat toate codurile, datele de profil evaluează mai multe codcode Times Mai mult și, în acest fel, descoperiți că vă puteți trimite la compilatorul de optimizare, care este responsabil pentru optimizarea codului de byteCode la codul mașinii și, astfel, a înlocuit codul de bază pentru a rula mai rapid codul JavaScript și pentru a utiliza mai puține resurse.

Compilatorul de optimizare găsește punctele în care codul poate fi optimizat. Optimizează în mod normal codul repetat de mai multe ori. În cazul în care operația se schimbă din anumite motive, codul revine la versiunea anterioară (des-optimizată). Acest lucru se face pentru a consuma mai puține resurse și, prin urmare, rulați codul mai rapid.

De exemplu, acest cod poate fi optimizat:

Introduceți modul Fullscreen Exit Mod Fullscreen

Când acest cod rulează de aproximativ 50 de ori, va fi gata să fie optimizat deoarece datele de profil pe care le cunoaște că nu va Schimbare.

Dacă codul este modificat din orice motiv:

function add(a, b) { return a + b;}for(let i = 0; i < 1000; i++) { add(i, i)}add(1, "uno")

Introduceți ieșirea din modul Fullscreen Modul complet

va reveni la versiunea dvs. anterioară.

tipuri de pauze

1. ătător parsing:
   • Găsiți erori de sintaxă.
   • creează AST.
   • construi domenii.
2. leneș parsing:
   • dublu rapid decât cei dornici.
   • nu creează AST.
   • construiește scopuri parțial.

Procesul de parsare face parte din 15% – 20% din procesul de execuție, astfel încât trebuie să fiți în considerare .

Diferențele dintre motoare

Motoarele celorlalte browsere au aproape același proces de execuție a motorului V8 așa cum au fost creați din acest lucru. Ei au doar câteva diferențe mici. De exemplu, în straturile de optimizare:

v8 motor (crom): 1 strat unic de optimizare.
• Spider maimuță (Firefox): are 2 straturi de optimizare.
• Chakra (Edge): Are 2 straturi de optimizare.
• JavaScriptCore (Safari): Are 3 straturi de optimizare.

cei din 2 -3 straturi rulează puțin mai lent, dar optimizați mai repede.

încheiat

Asta e! Acesta este modul în care funcționează motorul V8 JavaScript dezvoltat pentru browserul Chrome.

Nu uitați să practicați și să vă vedeți în următorul post 🚀

acoperirea imaginii de la Midu.dev. Pentru mai multe credite, vă rugăm să ne contactați.