Come funziona il motore JavaScript

Oggi capirai una volta e per tutto il modo in cui il motore JavaScript funziona in modo da sapere cosa succede con ogni riga di codice che scrivi sul tuo progetto.

Iniziamo! 👩💻

Motori

Motori sono quei programmi responsabili della conversione del codice ad alto livello (JavaScript, Python, C) al codice di basso livello (codice macchina, bytecode). Ogni browser ha il proprio motore per compilare e interpretare JavaScript:

• V8 motore (Google Chrome), che è anche un motore Node.js (in questo, baseremo per la spiegazione).
• scimmia ragno (Mozilla firefox).
• chakra (Microsoft Edge).
• javascriptcore (Apple Safari).

il Arrivo di V8 e la sua importanza

Il 2 settembre 2008 è stata lanciata la prima versione del motore V8, senza conoscere tutto ciò che sarebbe stato il grande cambiamento nell’interpretazione di Javascript nel browser, questo io smetterei di essere il più lento come lo era.

Come lo hanno fatto?
Tra tutti i motivi, quello principale è nel compilatore e nei concetti interpreti.

Il compilatore È il programma responsabile della conversione del codice scritto in un linguaggio di programmazione in un altro linguaggio di programmazione di basso livello. Ad esempio, il compilatore V8 è responsabile della trasformazione di JavaScript al bytecode e quindi al codice macchina.

D’altra parte, l’interprete è responsabile del controllo del codice di linea per linea ed eseguirlo direttamente sulla macchina di destino. Va notato che gli interpreti eseguono anche alcuni lavori di traduzione e compilatori.

Comprensione Come funziona V8

Immagine presa dal corso professionale JavaScript in Platzi.

Quando arriva Uno script del browser Il motore V8 avvia un processo che consiste di:

1. riceve il codice JavaScript come flusso di byte UTF-16 e passalo a un decodificatore di flusso di byte (che fa parte del motore) .
2. parsear (trasforma) il codice e si decompo in token (i token sono elementi JS come: Let, nuovi, simboli di operazioni, funzioni, promesse).
3. Grazie a L’analisi precedente, una struttura ad albero viene generata sotto forma di un albero, o, albero di sintassi astratto (AST). V8 ha due tipi di pause che vedrete sotto.
4. L’interprete esegue l’AST e sta generando il bytecode.
5. Dopo aver riprodotto tutto il codice, i dati di profilazione stanno valutando i bytecode diversi Times More e in questo modo Scopri che è possibile inviarti all’ottimizzazione del compilatore, che è responsabile dell’ottimizzazione del codice bytecode al codice macchina e quindi sostituito il codice di base per eseguire il codice JavaScript più velocemente e utilizzare meno risorse.

L’ottimizzazione del compilatore trova i punti in cui il codice può essere ottimizzato. Normalmente ottimizza il codice che viene ripetuto più volte. Nel caso in cui l’operazione cambia per qualche motivo, il codice ritorna alla versione precedente (il des-ottimizzato). Questo viene fatto per consumare meno risorse e quindi eseguire il codice più rapido.

Ad esempio, questo codice può essere ottimizzato:

Immettere la modalità a schermo intero Esci dalla modalità fullscreen

Quando quel codice funziona circa 50 volte, sarà pronto per essere ottimizzato perché i dati di profilazione che sa che non lo farà cambia.

Se il codice è cambiato per qualsiasi motivo:

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

Immettere l’uscita della modalità a schermo intero Modalità fullscreen

tornerà alla versione precedente.

Tipi di pause

1. ansioso analizzatore:
   • Trova errori di sintassi.
   • Crea l’AST.
   • Builds Scopes.
2. pigre analizzante:
   • raddoppia rapidamente rispetto all’immenso.
   • non crea l’AST.
   • Builds Scopes parzialmente.

Il processo di analisi è parte del 15% – 20% del processo di esecuzione in modo da poter essere presi in considerazione .

differenze tra motori

I motori degli altri browser hanno quasi lo stesso processo di esecuzione del motore V8 come sono stati creati da questo. Hanno solo alcune piccole differenze. Come ad esempio negli strati di ottimizzazione:

• v8 motore (cromato): 1 strato di ottimizzazione singola.
• scimmia ragno (firefox): ha 2 strati di ottimizzazione.
• chakra (bordo): ha 2 strati di ottimizzazione.
• javascriptcore (safari): ha 3 strati di ottimizzazione.

Quelli di 2 -3 strati corrono un po ‘più lento ma ottimizzano più velocemente.

concludere

Eccolo! Questo è il modo in cui il motore JavaScript V8 funziona sviluppato per il browser Chrome.

Non dimenticare di praticare e vederti nel prossimo post 🚀

copertina immagine di cortesia di Midu.Dev. Per più crediti, per favore contattami.