Wondershare EdrawMind
Mindmap-Galerie Lavoratore Web
- 16
Lavoratore Web
Comprendere e utilizzare i Web Worker sono un insieme di API fornite e standardizzate da HTML5. Crea un ambiente di esecuzione multi-thread per JavaScript.
Bearbeitet um 2024-03-08 16:53:42
- Für Sie empfohlen
- Gliederung
Lavoratore Web
La nascita del Web Worker
Come tutti sappiamo, js è stato originariamente progettato per essere eseguito nel browser
Per evitare che più thread utilizzino il DOM contemporaneamente e causino conflitti di rendering, l'esecutore js è progettato per essere a thread singolo.
Con lo sviluppo della tecnologia front-end, quando si incontrano scenari che richiedono molti calcoli, i thread js vengono spesso bloccati per lungo tempo e causano persino il blocco della pagina, influenzando l'esperienza dell'utente.
Ulteriori informazioni sui Web Worker
Cos'è un Web Worker?
I Web Worker fanno parte dello standard HTML5
Definisce un set di API che ci consentono di aprire un nuovo thread Worker al di fuori del thread js principale ed eseguire uno script js al suo interno
Offre agli sviluppatori la possibilità di utilizzare js per gestire multi-thread
L'interfaccia utente dell'applicazione Web rimane reattiva anche se lo script viene eseguito per un lungo periodo
Vantaggi dei Web Worker
Migliora le prestazioni della pagina: esegui alcune operazioni che richiedono molto tempo o calcoli nel thread in background, come l'elaborazione dei dati, l'elaborazione delle immagini, ecc., senza occupare il thread principale, evitando così ritardi o blocchi della pagina e migliorando le prestazioni e la reattività della pagina .
Elabora dati su larga scala: i dati su larga scala possono essere elaborati perché vengono eseguiti in thread separati e non influiscono sull'esecuzione del thread principale. I dati su larga scala possono essere elaborati in modo più efficiente, migliorando l'efficienza e la scalabilità del codice.
Rendi il codice più modulare: il codice può essere diviso in più moduli ed eseguito in thread diversi, rendendolo così più modulare, manutenibile e leggibile.
Supporta il multi-threading: supporta il multi-threading, così puoi sfruttare i processori multi-core per migliorare l'efficienza di esecuzione del tuo codice.
Scenari di utilizzo dei Web Worker
Elaborazione delle immagini: come rotazione, ritaglio, ridimensionamento, filtri, ecc. Ciò migliora le prestazioni e la reattività dell'elaborazione delle immagini.
Elaborazione dei dati: come filtraggio, ordinamento, riepilogo e trasformazione di set di dati, ecc. Ciò migliora l’efficienza e la precisione dell’elaborazione dei dati.
Compiti computazionalmente intensivi: come simulazione, ottimizzazione, previsione, statistica, ecc. Ciò migliora la velocità e la precisione delle attività di elaborazione.
Comunicazione in tempo reale: come chat room, giochi, videoconferenze, ecc. Ciò migliora la stabilità e le prestazioni delle comunicazioni in tempo reale.
Caching offline: le risorse di uso comune possono essere pre-scaricate nella cache locale del client e le risorse nella cache possono essere utilizzate quando non è possibile accedere a Internet. Ciò può migliorare l'usabilità e la reattività della tua applicazione, soprattutto sui dispositivi mobili.
Elaborazione multi-thread: come elaborazione parallela, distribuzione delle attività, bilanciamento del carico, ecc. Ciò migliora la concorrenza e la scalabilità del sistema.
Utilizzo del lavoratore Web
Crea un lavoratore: chiama semplicemente il costruttore Worker() tramite new, che riceve due parametri: const lavoratore = new Worker(percorso, opzioni);
js trasferimento dati del thread principale e del thread di lavoro: il thread principale e il thread di lavoro inviano entrambi messaggi tramite il metodo postMessage e ascoltano l'evento messaggio per ricevere messaggi
Il trasferimento dei dati tra il thread principale e il thread di lavoro avviene in base al valore anziché all'indirizzo. Pertanto, anche se un Oggetto viene passato e restituito direttamente, il valore ricevuto non è il valore originale.
Ascolto dei messaggi di errore: il web lavoratore fornisce due eventi per ascoltare gli errori
errore: attivato quando si verifica un errore all'interno del lavoratore
messageerror: attivato quando l'evento messaggio riceve parametri che non possono essere deserializzati
Chiudi il thread di lavoro: l'arresto del thread di lavoro può essere effettuato sia sul thread principale che sul thread di lavoro, ma l'impatto sul thread di lavoro è leggermente diverso.
Similitudine: se il lavoratore viene arrestato nel thread principale o all'interno del thread di lavoro, le attività nell'Event Loop corrente del thread di lavoro continueranno ad essere eseguite.
La differenza: quando il lavoratore viene chiuso manualmente nel thread principale, la connessione tra il thread principale e il thread di lavoro verrà interrotta immediatamente anche se ci sono ancora attività da eseguire nell'attuale Event Loop del thread di lavoro, il postMessage () continuerà a essere chiamato, ma il thread principale non verrà più ricevuto. La chiusura del lavoratore all'interno del thread di lavoro non lo disconnetterà direttamente dal thread principale, ma attenderà fino al completamento di tutte le attività dell'Event Loop corrente del thread di lavoro prima di chiuderlo. In altre parole, se continui a chiamare il metodo postMessage() nell'Event Loop corrente, il thread principale può ancora ricevere messaggi ascoltando l'evento messaggio.
Il thread di lavoro fa riferimento ad altri file js
Il lavoratore Web fornisce il metodo importScripts() nel thread di lavoro per caricare i file js di cui abbiamo bisogno. Inoltre, i file js caricati tramite questo metodo non sono soggetti alla stessa politica di origine.
Modalità ESModule: quando il file js è in modalità ESModule, importScripts() non riuscirà a importare il file. In questo caso, è necessario utilizzare const worker = new Worker('/worker.js', {type: 'module'}. ) per specificare il tipo di file, quindi è possibile Introdurre utilizzando il metodo di importazione
Quali tipi di dati possono essere passati tra il thread principale e i thread di lavoro
Gli oggetti Error e Function e i nodi Dom non possono essere passati
Lavoratore condiviso
È un tipo speciale di lavoratore a cui è possibile accedere da più contesti di navigazione, come più finestre, iframe e lavoratori, ma questi contesti di navigazione devono avere la stessa origine
Implementato in un'interfaccia diversa dai lavoratori ordinari, con un ambito globale diverso: SharedWorkerGlobalScope, ma ereditato da WorkerGlobalScope
La differenza con i lavoratori: il thread principale e il thread SharedWorker stabiliscono un collegamento tramite MessagePort e i metodi di comunicazione dei dati sono tutti montati su SharedWorker.port Se addEventListener viene utilizzato per ricevere eventi di messaggio, dopo che il thread principale inizializza SharedWorker(), esso. deve essere chiamato il metodo SharedWorker.port.start() per aprire manualmente la porta, ma se viene utilizzato il metodo onmessage, la porta viene aperta per impostazione predefinita e non è necessario chiamare manualmente il metodo SharedWorker.port.start().
Nota: l'utilizzo della console per stampare le informazioni nel thread sharedWorker non verrà visualizzato nella console del thread principale.
Per eseguire il debug di sharedWorker, devi inserire chrome://inspect/ nel browser Chrome. Qui puoi vedere tutti gli sharedWorker in esecuzione e quindi aprire un pannello degli strumenti di sviluppo indipendente.
Compatibilità
I Web Worker sono già supportati dalla maggior parte dei browser e praticamente non è necessario considerare i problemi di compatibilità quando li si utilizza.
La compatibilità di sharedWorker in Safari e sui terminali mobili non è molto buona, quindi è necessario prestare attenzione quando lo si utilizza.