I programmatori JavaScript sono abituati a fingere il parallelismo, ma c'è un modo per ottenere il vero parallelismo che dovresti usare in questo momento.

JavaScript può avere problemi con attività ad alta intensità di prestazioni perché è un linguaggio a thread singolo. Utilizzando il parallelismo, puoi ottenere l'esecuzione multithread in JavaScript e migliorare le prestazioni e la reattività delle tue app Web moderne.

Parallelismo nella programmazione JavaScript

Il parallelismo è fondamentale nell'informatica moderna per migliorare le prestazioni e la scalabilità. Lo fa utilizzando efficacemente le risorse disponibili.

Una tecnica comune utilizzata per ottenere il parallelismo nella programmazione è il multithreading. Il thread JavaScript, tuttavia, è un sistema a thread singolo e può gestire solo un'attività alla volta. Ciò significa che non ha familiarità con le esecuzioni parallele dei programmi.

JavaScript falsifica la programmazione parallela

Un malinteso comune sul parallelismo è che puoi ottenerlo usando

instagram viewer
tecniche di programmazione asincrona come async/await, callback e promesse:

// Async/await funzione che simula una richiesta di rete
asincronofunzionefetchData() {
cost risposta = aspetta andare a prendere();
cost dati = aspetta risposta.json();
ritorno dati;
}
// Funzione di callback che registra i dati recuperati nella console
funzionelogData(dati) {
consolare.log (dati);
}


// Metodo Promise.all() che esegue più promesse in parallelo
Promettere.Tutto([
 recuperaDati(),
 recuperaDati(),
]).Poi((risultati) => {
consolare.log (risultati);
});
// Chiama la funzione fetchData e passa la funzione logData come callback
fetchData().then (logData);

Queste tecniche in realtà non eseguono il codice in parallelo. JavaScript utilizza il ciclo di eventi per imitare la programmazione parallela all'interno del suo design a thread singolo.

Il ciclo di eventi è una parte fondamentale dell'ambiente di runtime JavaScript. Consente di eseguire operazioni asincrone, come le richieste di rete, in background senza bloccare il singolo thread principale.

Il ciclo di eventi verifica costantemente la presenza di nuovi eventi o attività in una coda e li esegue uno per uno in sequenza. Questa tecnica consente a JavaScript di ottenere concorrenza e parallelismo teorico.

Concorrenza vs. Parallelismo

La concorrenza e il parallelismo sono spesso fraintesi e scambiati nel mondo JavaScript.

La concorrenza in JavaScript si riferisce alla capacità di eseguire più attività sovrapponendo l'esecuzione delle attività. Dove un'attività può iniziare prima del completamento di un'altra, ma le attività non possono né iniziare né terminare contemporaneamente. Ciò consente a JavaScript di gestire in modo efficiente le operazioni, come il recupero di dati da un'API REST o leggere file, senza bloccare il thread di esecuzione principale.

Il parallelismo, d'altra parte, si riferisce alla capacità di eseguire più attività contemporaneamente su più thread. Questi thread in background possono eseguire attività in modo indipendente e simultaneo. Ciò apre opportunità per ottenere un vero parallelismo nelle applicazioni JavaScript.

Le applicazioni di JavaScript possono raggiungere il vero parallelismo attraverso l'utilizzo di Web Workers.

I Web Worker introducono il parallelismo in JavaScript

I Web Worker sono una funzionalità dei moderni browser Web che consentono l'esecuzione del codice JavaScript in thread in background, separati dal thread di esecuzione principale. A differenza del thread principale, che gestisce le interazioni dell'utente e gli aggiornamenti dell'interfaccia utente. Il Web Worker sarebbe dedicato all'esecuzione di attività ad alta intensità di calcolo.

Di seguito è riportata una rappresentazione grafica del funzionamento di un Web Worker in JavaScript.

Il thread principale e il Web Worker possono comunicare utilizzando lo scambio di messaggi. Usando il postMessage metodo per inviare messaggi e il onmessage gestore di eventi per ricevere messaggi, puoi passare istruzioni o dati avanti e indietro.

Creare un Web Worker

Per creare un Web Worker, devi creare un file JavaScript separato.

Ecco un esempio:

// principale.js
// Crea un nuovo Web Worker
cost lavoratore = nuovo Lavoratore('lavoratore.js');


// Invia un messaggio al Web Worker
lavoratore.postMessage('Ciao dal thread principale!');


// Ascolta i messaggi dal Web Worker
worker.onmessage = funzione(evento) {
consolare.tronco d'albero('Ricevuto messaggio da Web Worker:', evento.dati);
};

L'esempio precedente crea un nuovo Web Worker passando il percorso allo script worker (lavoratore.js) come argomento al Lavoratore costruttore. È possibile inviare un messaggio al Web Worker utilizzando il postMessage metodo e ascoltare i messaggi dal Web Worker utilizzando il onmessage gestore di eventi.

Dovresti quindi creare lo script di lavoro (lavoratore.js) file:

// lavoratore.js
// Ascolta i messaggi dal thread principale
self.sulmessaggio = funzione(evento) {
consolare.tronco d'albero('Messaggio ricevuto dal thread principale:', evento.dati);
// Invia un messaggio al thread principale
 self.postMessage("Ciao da worker.js!");
};

Lo script Web Worker ascolta i messaggi dal thread principale utilizzando il file onmessage gestore di eventi. Dopo aver ricevuto un messaggio, esci dal messaggio all'interno dati.evento e invia un nuovo messaggio al thread principale con il file postMessage metodo.

Sfruttare il parallelismo con i Web Worker

Il caso d'uso principale per i Web Worker è l'esecuzione parallela di attività JavaScript ad alta intensità di calcolo. Scaricando queste attività sui Web Worker, puoi ottenere significativi miglioramenti delle prestazioni.

Ecco un esempio di utilizzo di un web worker per eseguire un calcolo pesante:

// principale.js
cost lavoratore = nuovo Lavoratore('lavoratore.js');


// Invia i dati al Web Worker per il calcolo
lavoratore.postMessage([1, 2, 3, 4, 5]);


// Ascolta il risultato dal Web Worker
worker.onmessage = funzione(evento) {
cost risultato = evento.dati;
consolare.tronco d'albero('Risultato del calcolo:', risultato);
};

lavoratore.js:

// Ascolta i dati dal thread principale
self.sulmessaggio = funzione (evento) {
cost numeri = evento.dati;
cost risultato = performHeavyCalculation (numeri);


// Invia il risultato al thread principale
 self.postMessage (risultato);
};
funzioneperformHeavyCalculation(dati) {
// Esegue un calcolo complesso sull'array di numeri
ritorno dati
 .carta geografica((numero) =>Matematica.pow (numero, 3)) // Cubo ogni numero
 .filtro((numero) => numero % 20) // Filtra i numeri pari
 .ridurre((somma, numero) => somma + numero, 0); // Somma tutti i numeri
}

In questo esempio, passi un array di numeri dal thread principale al Web Worker. Il Web Worker esegue il calcolo utilizzando l'array di dati fornito e invia il risultato al thread principale. IL eseguireHeavyCalculation() La funzione associa ogni numero al suo cubo, filtra i numeri pari e infine li somma.

Limitazioni e considerazioni

Sebbene i Web Worker forniscano un meccanismo per ottenere il parallelismo in JavaScript, è importante considerare alcune limitazioni e considerazioni:

  • Nessuna memoria condivisa: i Web Worker operano in thread separati e non condividono la memoria con il thread principale. Pertanto, non possono accedere direttamente a variabili o oggetti dal thread principale senza passare messaggi.
  • Serializzazione e deserializzazione: quando si passano i dati tra il thread principale e i Web Worker, è necessario serializzare e deserializzare i dati poiché lo scambio di messaggi è una comunicazione basata su testo. Questo processo comporta un costo delle prestazioni e può influire sulle prestazioni complessive dell'app.
  • Supporto browser: Sebbene i Web Worker siano ben supportati nella maggior parte dei browser Web moderni, alcuni browser meno recenti o ambienti limitati potrebbero avere un supporto parziale o assente per i Web Worker.

Ottieni il vero parallelismo in JavaScript

Il parallelismo in JavaScript è un concetto entusiasmante che consente la vera esecuzione simultanea di attività, anche in un linguaggio principalmente a thread singolo. Con l'introduzione dei Web Worker, puoi sfruttare la potenza del parallelismo e ottenere significativi miglioramenti delle prestazioni nelle tue applicazioni JavaScript.