In JavaScript, esistono molteplici approcci per migliorare l'interfaccia utente complessiva del sito. IL “Lavoratore del Web” è uno di questi approcci che consente al thread principale di continuare l'esecuzione senza essere bloccato. Comprende la sua istanza separata del motore JavaScript e quindi non può invocare le funzionalità del thread principale.
Questo articolo discuterà come utilizzare “Lavoratore del Web” per il multithreading in JavaScript.
Cosa sono i Web Worker?
“Lavoratori del web” corrisponde a un'API del browser che consente a JavaScript di eseguire le attività in parallelo/contemporaneamente su un thread separato/dedicato.
Qual è la necessità dei Web Worker?
Poiché JavaScript è a thread singolo, quindi, i complessi codici JavaScript bloccano il thread dell'interfaccia utente, ovvero arrestano la finestra principale che si occupa di tutte le attività di aggiornamento, implementazione di eventi di input dell'utente, ecc. In tale scenario, l'esperienza dell'utente ne risente . Per far fronte a questo problema, il “Lavoratore del Web” entra in vigore e risolve il blocco del thread dell'interfaccia utente.
Come utilizzare i Web Worker per il multithreading con JavaScript?
Fare un “Lavoratore del Web” , utilizzare il costruttore Worker. È tale che accetta come argomento un URL, che corrisponde al percorso del file dello script di lavoro che implementa la funzionalità desiderata. Tuttavia, per includere il codice lavoratore in un file HTML, utilizzare a “macchia” per scrivere il codice lavoratore.
Sintassi (creazione di un Web Worker)
cost X = nuovo Lavoratore ( 'lavoratore.js' ) ;Sintassi (invio di un messaggio al lavoratore)
cost X = nuovo Lavoratore ( 'lavoratore.js' ) ;
Sintassi(Ricezione di un messaggio dal lavoratore)
X. onmessage = funzione ( evento ) {consolle. tronco d'albero ( evento. dati ) ;
} ;
Esempio: utilizzo di 'Web Worker' per calcolare il fattoriale di un numero in JavaScript
L'esempio seguente utilizza il file 'Lavoratore()' costruttore per creare un web work e calcolare il fattoriale di un numero:
< html >
< Testa >
< stile h2 = 'allineamento testo: centro;' > Esempio di lavoratori Web h2 >
Testa >
< corpo >
< sceneggiatura >
cost X = nuovo Lavoratore ( URL. creaURLoggetto ( nuovo Macchia ( [
`
// Script di lavoro
cost fatto = ( N ) => {
Se ( N == 0 || N == 1 ) {
ritorno 1n ;
}
altro {
ritorno BigInt ( N ) * fatto ( BigInt ( N ) - 1n ) ;
}
} ;
se stesso. onmessage = ( evento ) => {
cost Con = fatto ( evento. dati ) ;
se stesso. postMessaggio ( Con. accordare ( ) ) ;
} ; `
] , { tipo : 'testo/javascript' } ) ) ) ;
X. postMessaggio ( 15n ) ;
X. onmessage = ( evento ) => {
cost fuori = evento. dati ;
consolle. tronco d'albero ( 'Factorial di 15 tramite un Web Worker-> ' , fuori ) ;
} ;
corpo >
html >
In questo codice, applicare i seguenti passaggi:
- Innanzitutto, specificare l'intestazione indicata.
- Successivamente, crea un file “Lavoratore del Web” oggetto avente l'URL dell'oggetto Blob che comprende il codice per il lavoratore.
- Il codice dedicato al lavoratore è incluso in una funzione anonima che calcola il fattoriale del numero tramite una funzione ricorsiva.
- Inoltre, il lavoratore ascolta i messaggi inviati tramite il thread principale utilizzando il file “self.onmessage” evento, recupera il fattoriale del numero passato e fornisce il risultato al thread principale tramite l' “postMessaggio()” metodo.
- Nel thread principale, crea un'istanza lavoratore e inviale un messaggio con il numero ' 15n ”. Qui, ' N ' si riferisce al valore 'BigInt'.
- Dopo che il lavoratore ha terminato di calcolare il fattoriale, invia il risultato/risultato al thread principale utilizzando il file “postMessaggio()” metodo.
- Infine, il thread principale recupera/riceve il risultato nel file “sul messaggio” evento e restituisce il fattoriale corrispondente del numero sulla console.
Produzione
Vantaggi dei Web Worker
Elaborazione parallela : In caso di esecuzione dello stesso codice in parallelo.
Nessuna interruzione nell'esecuzione del codice: L'esecuzione del codice viene eseguita indipendentemente dagli aggiornamenti ecc. sulla pagina corrente.
Monitoraggio del movimento: Tutto il rilevamento del movimento avviene nel lavoratore in background.
Multithreading abilitato: Questi abilitano il multithreading in JavaScript.
Prestazioni migliorate: Ottimizza le prestazioni eseguendo attività intensive/impegnative in thread separati.
Esperienza utente efficace: Questi evitano di bloccare il thread principale, garantendo un'esperienza utente reattiva.
Limitazioni dei Web Worker
Tuttavia, ci sono anche alcune limitazioni dei lavoratori web. Questi sono indicati come segue:
- Maggiore utilizzo della memoria.
- Impossibile aggiornare DOM in un thread di lavoro o richiamare l'oggetto finestra.
Conclusione
“Lavoratori del Web” corrisponde a un'API del browser che consente a JavaScript di eseguire le attività contemporaneamente su un thread separato/dedicato. Questi possono essere utilizzati prendendo come argomento un URL, che corrisponde al percorso del file dello script di lavoro. Questo blog ha discusso l'utilizzo di 'Web Workers' per il multithreading in JavaScript.