JavaScript è un linguaggio di programmazione molto popolare e sta diventando sempre più potente con il passare del tempo. Poiché la sua popolarità è in aumento, varie aziende stanno sfruttando il suo supporto a molti livelli nel loro stack tecnologico, che si tratti di app front-end, back-end, full-stack o embedded. In questa prima parte della serie “All’interno del motore JavaScript“, analizzeremo come funziona JavaScript sotto il cofano. Quindi, nella seconda parte, impareremo a conoscere il motore JavaScript.
Quasi tutti hanno sentito parlare del motore V8 e ogni sviluppatore web dovrebbe sapere che JavaScript è un a filo singolo linguaggio utilizzato per sviluppare e aggiungere funzionalità ai siti Web. In questo tutorial sullo sviluppo web, esploreremo i concetti di JavaScript e come funziona effettivamente. Conoscendo questi concetti fondamentali, sarai in grado di scrivere codice JavaScript pulito, migliore e non bloccante.
Se sei un programmatore JavaScript principiante, questo articolo ti aiuterà a capire cosa rende JavaScript così diverso rispetto ad altri linguaggi. E, se sei un programmatore JavaScript esperto, ti aiuterà a dare alcune informazioni su come funziona effettivamente il runtime JavaScript che usi ogni giorno nella tua vita.
Discuteremo i seguenti componenti JavaScript:
- Motore JavaScript V8
- Ambiente di runtime JavaScript
- Stack di chiamate JavaScript
- Meccanismo di concorrenza e loop di eventi
Iniziamo con il motore JavaScript V8.
Leggere: Strumenti e librerie HTML, CSS e JavaScript
Cos’è il motore JavaScript V8?
Come forse già saprai, JavaScript è un linguaggio di programmazione interpretato. Un linguaggio interpretato significa che il codice non viene compilato in codice binario prima di essere eseguito. Quindi ora sorge la domanda: come fanno i computer a eseguire quegli script di testo? Per JavaScript, l’esecuzione del codice viene fornita dal motore JavaScript. Puoi pensare al motore JavaScript come a uno strumento che esegue il codice JavaScript in modo che non sia necessario interpretarlo per essere compreso dal computer che esegue il codice. Uno dei vantaggi di questo metodo è che rende la piattaforma JavaScript indipendente, il che significa che può essere eseguita su qualsiasi sistema operativo o piattaforma.
Il motore JavaScript è integrato in tutti i moderni browser Internet. Quindi, come funziona il motore JavaScript? Quando un file JavaScript viene caricato nel browser, il motore JavaScript esegue ogni riga di codice una per una. Analizza ogni riga di codice dall’alto verso il basso, la converte in codice binario e quindi la esegue sul browser.
Ogni browser ha il proprio motore JavaScript, ma uno dei motori JavaScript più conosciuti è il motore Chrome V8. L’elenco seguente mostra alcuni browser e il rispettivo motore JavaScript:
- Google Chrome: V8
- Safari: JavaScript Core
- Mozilla Firefox: Scimmia ragno
- Microsoft Edge: Chakra
Il motore JavaScript è costituito da due componenti:
Un motore JavaScript contiene memoria accumulata e un pila di chiamate. Uno stack di chiamate è dove viene eseguito il nostro codice. La memoria heap è un pool di memoria non strutturato contenente gli oggetti di cui abbiamo bisogno nel nostro programma.
Leggere: Introduzione a TypeScript e alle sue caratteristiche
Che cos’è l’ambiente di runtime JavaScript?
Nella sezione precedente, abbiamo discusso del motore JavaScript, ma il motore JavaScript non viene eseguito in isolamento. Viene eseguito all’interno del motore JavaScript Runtime (JRE), insieme ad altri componenti.
È il JRE che rende JavaScript asincrono e consente agli sviluppatori Web di effettuare richieste HTTP in modo asincrono. JRE è costituito da diversi componenti:
-
- Motore JavaScript
- API Web
- Coda di richiamata
- Ciclo di eventi
- Tabella degli eventi
Che cos’è lo stack di chiamate in JavaScript?
JavaScript è un linguaggio di programmazione a thread singolo, il che significa che ha un unico stack di chiamate; pertanto, può fare solo una cosa alla volta. Il Call Stack è un programma che registra dove siamo nel programma (ad esempio, se entriamo in una funzione, quella funzione verrà inserita in cima allo stack e se torniamo da una funzione, quella funzione verrà eliminata dalla cima dello Stack).
Diamo un’occhiata a un esempio di uno stack di chiamate JavaScript:
function addition(x, y) {
return x + y;
}
function findSum(x, y) {
var result = addition(x, y);
console.log(result);
}
findSum(7,5);
Quando esegui il programma sopra, il motore JavaScript inizia a eseguire il codice. Inizialmente, lo Stack di chiamate sarà vuoto e, in seguito, i passaggi coinvolti nel processo saranno illustrati nel diagramma seguente:
Ogni valore che vedi nello stack di chiamate è indicato come un ‘Cornice impilata‘.
JavaScript esegue il codice su un singolo thread. L’esecuzione di codice su un singolo thread può essere abbastanza semplice perché non devi affrontare alcuni degli scenari complessi che dovresti affrontare in un ambiente multi-thread, come deadlock, thread safety, pool di thread, ecc. Mind l’esecuzione a thread singolo presenta vantaggi oltre che limitazioni. Discuteremo brevemente alcune di queste limitazioni nella prossima sezione.
Leggere: Dieci modi per utilizzare AngularJS
Modello di concorrenza JavaScript e ciclo di eventi
Il problema con un’applicazione single-thread è che, se ci sono troppe funzioni da eseguire nello stack di chiamate, il browser si blocca e il browser non può fare nulla. Non può eseguire altro codice o rendere nulla nel frattempo. Potrebbe essere un problema serio dal punto di vista dell’utente finale. Nessuno vuole che i propri utenti siano bloccati quando un’elaborazione in background è in corso su una pagina Web.
Questo non è l’unico problema con un ambiente a thread singolo, ma c’è un problema più critico che si verifica quando il browser non risponde. Una volta che il tuo browser inizia a elaborare così tante attività nello Stack di chiamate, non risponde per un po’. In tal caso, il browser di solito chiede all’utente se desidera chiudere la pagina web. Anche questa non è una condizione ideale per l’esperienza dell’utente, vero?
Quindi, come potremmo eseguire più attività in background senza bloccare l’interfaccia utente, rendendo anche il browser non rispondente?
Bene, la soluzione a questo problema è nota come Richiamata asincrona. La programmazione asincrona è un argomento così vasto che non posso spiegarlo in modo approfondito in questo articolo. Tuttavia, se vuoi saperne di più su come funziona la richiamata asincrona in JavaScript, puoi consultare questo articolo: Programmazione asincrona in JavaScript
Conclusione alla panoramica del motore JavaScript
Questa è stata la prima parte della serie All’interno del motore JavaScript, che copre gli aspetti del funzionamento di JavaScript dietro le quinte. Nella seconda parte della serie, approfondiremo il motore JavaScript stesso.
Per saperne di più Tutorial di programmazione JavaScript e sviluppo web.