Come funziona il Loop degli eventi in JavaScript?

Mentre potrebbe richiedere una comprensione approfondita di linguaggi come C ++ e C per scrivere codice di produzione su larga scala, JavaScript può spesso essere scritto con una semplice comprensione di ciò che si può fare con il linguaggio.


Concetti, come passare callback a funzioni o scrivere codice asincrono, spesso non sono così difficili da implementare, il che rende la maggior parte degli sviluppatori JavaScript meno interessata a ciò che accade sotto il cofano. Non gli interessa solo comprendere le complessità che sono profondamente astratte da loro dal linguaggio.

Come sviluppatore JavaScript, diventa sempre più importante capire cosa succede realmente sotto il cofano e come funziona la maggior parte di queste complessità astratte da noi. Ci aiuta a prendere decisioni più informate, che a loro volta possono migliorare drasticamente le prestazioni del nostro codice.

Questo articolo si concentra su uno dei concetti o termini molto importanti ma raramente compresi in JavaScript. Il LOOP EVENTO!. 

La scrittura di codice asincrono non può essere evitata in JavaScript, ma perché un codice eseguito in modo asincrono significa davvero? vale a dire. The Event Loop

Prima di poter capire come funziona il ciclo degli eventi, dobbiamo prima capire cos’è JavaScript stesso e come funziona!

Che cos’è JavaScript?

Prima di procedere, vorrei che facessimo un passo indietro verso le basi. Che cos’è veramente JavaScript? Potremmo definire JavaScript come;

JavaScript è un linguaggio simultaneo di alto livello, interpretato, non threading non bloccante, asincrono.

Aspetta, cos’è questo? Una definizione bookish? ��

Analizziamolo!

Le parole chiave qui per quanto riguarda questo articolo sono single-threaded, non bloccante, concorrente, e asincrono.

Filo singolo

Un thread di esecuzione è la sequenza più piccola di istruzioni programmate che può essere gestita in modo indipendente da uno scheduler. Un linguaggio di programmazione è a thread singolo significa che può eseguire solo un’attività o un’operazione alla volta. Ciò significa che eseguirà un intero processo dall’inizio alla fine senza che il thread venga interrotto o arrestato.

A differenza dei linguaggi multi-thread in cui più processi possono essere eseguiti contemporaneamente su più thread senza bloccarsi a vicenda.

In che modo JavaScript può essere a thread singolo e non bloccante allo stesso tempo?

Ma cosa significa bloccare?

Non bloccante

Non esiste una definizione di blocco; significa semplicemente cose che corrono lentamente sul thread. Quindi non bloccare significa cose che non sono lente sul thread.

Ma aspetta, ho detto che JavaScript viene eseguito su un singolo thread? E ho anche detto che non bloccava, il che significa che l’attività viene eseguita rapidamente sullo stack di chiamate? Ma come??? Che ne dici di quando eseguiamo i timer? Loops?

Rilassare! Lo scopriremmo tra poco ��.

concorrente

Concorrenza significa che il codice viene eseguito contemporaneamente da più di un thread.

Va bene, le cose stanno diventando davvero strano ora, come si può JavaScript a thread singolo e allo stesso tempo essere simultanei? cioè, eseguendo il suo codice con più di un thread?

asincrono

La programmazione asincrona significa che il codice viene eseguito in un loop di eventi. Quando si verifica un’operazione di blocco, l’evento viene avviato. Il codice di blocco continua a funzionare senza bloccare il thread di esecuzione principale. Quando il codice di blocco termina l’esecuzione, viene messo in coda il risultato delle operazioni di blocco e li riporta allo stack.

Ma JavaScript ha un solo thread? Ciò che quindi esegue questo codice di blocco mentre consente l’esecuzione di altri codici nel thread?

Prima di procedere, ricapitoliamo quanto sopra.

  • JavaScript è a thread singolo
  • JavaScript non blocca, ovvero i processi lenti non ne bloccano l’esecuzione
  • JavaScript è simultaneo, ovvero esegue il suo codice in più thread contemporaneamente
  • JavaScript è asincrono, ovvero esegue codice di blocco da qualche altra parte.

Ma quanto sopra non si somma esattamente, come può un linguaggio a thread singolo essere non bloccante, simultaneo e asincrono?

Andiamo un po ‘più in profondità, passiamo ai motori di runtime JavaScript, V8, forse ha alcuni thread nascosti di cui non siamo a conoscenza.

Motore V8

Il motore V8 è un motore runtime di assemblaggio Web open source ad alte prestazioni per JavaScript scritto in C ++ da Google. La maggior parte dei browser esegue JavaScript utilizzando il motore V8 e anche il popolare ambiente runtime js del nodo lo utilizza.

In inglese semplice, V8 è un programma C ++ che riceve codice JavaScript, lo compila e lo esegue.

Il V8 fa due cose importanti;

  • Allocazione della memoria dell’heap
  • Chiama il contesto di esecuzione dello stack

Purtroppo, il nostro sospetto era sbagliato. Il V8 ha un solo stack di chiamate, pensa allo stack di chiamate come thread.

Un thread === uno stack di chiamate === un’esecuzione alla volta.

Immagine – Hacker Noon

Poiché V8 ha un solo stack di chiamate, come può quindi eseguire JavaScript contemporaneamente e in modo asincrono senza bloccare il thread di esecuzione principale?

Proviamo a scoprirlo scrivendo un codice asincrono semplice ma comune e analizziamolo insieme.

JavaScript esegue ogni codice riga per riga, uno dopo l’altro (a thread singolo). Come previsto, la prima riga viene stampata nella console qui, ma perché viene stampata l’ultima riga prima del codice di timeout? Perché il processo di esecuzione non attende il codice di timeout (blocco) prima di procedere per eseguire l’ultima riga??

Sembra che qualche altro thread ci abbia aiutato a eseguire quel timeout poiché siamo abbastanza sicuri che un thread possa eseguire una sola attività in qualsiasi momento.

Diamo un’occhiata al Codice sorgente V8 per un po.

Aspetta cosa??!!! Non ci sono funzioni timer in V8, nessun DOM? Nessun evento? No AJAX?…. Yeeeeessss!!!

Eventi, DOM, timer, ecc. Non fanno parte dell’implementazione principale di JavaScript, JavaScript è rigorosamente conforme alle specifiche degli script Ecma e varie versioni di esso sono spesso indicate in base alle specifiche degli script Ecma (ES X).

Flusso di lavoro di esecuzione

Eventi, timer, richieste Ajax sono tutti forniti sul lato client dai browser e sono spesso indicati come API Web. Sono quelli che consentono al JavaScript a thread singolo di essere non bloccante, simultaneo e asincrono! Ma come?

Esistono tre sezioni principali del flusso di lavoro di esecuzione di qualsiasi programma JavaScript, lo stack di chiamate, l’API Web e la coda delle attività.

The Call Stack

Una pila è una struttura di dati in cui l’ultimo elemento aggiunto è sempre il primo ad essere rimosso dalla pila, si potrebbe pensare ad esso come una pila di una piastra in cui solo la prima piastra che era l’ultima aggiunta può essere rimossa per prima. Uno stack di chiamate non è altro che una struttura di dati dello stack in cui attività o codice vengono eseguiti di conseguenza.

Consideriamo l’esempio seguente;

Fonte: https://youtu.be/8aGhZQkoFbQ

Quando si chiama la funzione printSquare (), viene inserita nello stack di chiamate, la funzione printSquare () chiama la funzione square (). La funzione square () viene inserita nello stack e chiama anche la funzione multiply (). La funzione di moltiplicazione viene inserita nello stack. Poiché la funzione moltiplica ritorna ed è l’ultima cosa che è stata inserita nello stack, viene risolta prima e viene rimossa dallo stack, seguita dalla funzione square () e quindi dalla funzione printSquare ().

L’API Web

Qui è dove viene eseguito il codice che non è gestito dal motore V8 per non “bloccare” il thread di esecuzione principale. Quando lo stack di chiamate incontra una funzione API Web, il processo viene immediatamente passato all’API Web, dove viene eseguito e liberando lo stack di chiamate per eseguire altre operazioni durante la sua esecuzione.

Torniamo al nostro esempio setTimeout sopra;

Quando eseguiamo il codice, la prima riga console.log viene inserita nello stack e otteniamo il nostro output quasi immediatamente, quando arriviamo al timeout, i timer sono gestiti dal browser e non fanno parte dell’implementazione di base di V8, vengono spinti invece all’API Web, liberando lo stack in modo che potesse eseguire altre operazioni.

Mentre il timeout è ancora in esecuzione, lo stack passa alla riga di azione successiva ed esegue l’ultimo console.log, il che spiega perché lo produciamo prima dell’uscita del timer. Una volta completato il timer, succede qualcosa. Il console.log in poi timer appare magicamente di nuovo nello stack di chiamate!

Come?

The Event Loop

Prima di discutere il ciclo degli eventi, esaminiamo innanzitutto la funzione della coda delle attività.

Torna al nostro esempio di timeout, una volta che l’API Web ha terminato di eseguire l’attività, non è sufficiente riportarla automaticamente nello stack di chiamate. Va al Coda attività. 

Una coda è una struttura di dati che funziona secondo il principio First in First out, quindi quando le attività vengono inserite nella coda, escono nello stesso ordine. Attività che sono state eseguite dalle API Web, che vengono trasferite nella coda delle attività, quindi tornano allo stack di chiamate per ottenere il risultato stampato.

Ma aspetta. CHE COSA HECK È IL LOOP EVENTO???

Fonte: https://youtu.be/8aGhZQkoFbQ

Il ciclo di eventi è un processo che attende che lo stack di chiamate sia pulito prima di trasferire i callback dalla coda attività allo stack di chiamate. Una volta che lo stack è libero, il ciclo di eventi si attiva e controlla la coda attività per i callback disponibili. Se ce ne sono, lo spinge nello stack di chiamate, attende che lo stack di chiamate venga nuovamente cancellato e ripete lo stesso processo.

Fonte: https://www.quora.com/How-does-an-event-loop-work/answer/Timothy-Maxwell

Il diagramma sopra mostra il flusso di lavoro di base tra il ciclo degli eventi e la coda delle attività.

Conclusione

Sebbene questa sia un’introduzione molto basilare, il concetto di programmazione asincrona in JavaScript offre abbastanza informazioni per capire chiaramente cosa sta succedendo e come JavaScript può essere eseguito contemporaneamente e in modo asincrono con un solo thread.

JavaScript è sempre on-demand e, se sei curioso di imparare, ti consiglierei di dare un’occhiata Corso Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map