Una panoramica dei web worker

Gran parte dei contenuti di questo corso finora si è concentrata su concetti quali considerazioni generali sulle prestazioni del codice HTML, suggerimenti sulle risorse, ottimizzazione di vari per migliorare il tempo di caricamento iniziale della pagina e la reattività per l'utente nonché il caricamento lento di risorse specifiche.

Tuttavia, un aspetto delle prestazioni relativo a JavaScript non è stato trattati in precedenza in questo corso, ed è questo il ruolo dei lavoratori web nel migliorare la reattività dell'input, che verrà trattata in questo modulo e nel prossimo modulo.

JavaScript viene spesso descritto come linguaggio a thread unico. In pratica, questo si riferisce al thread principale, ovvero l'unico thread in cui il browser la maggior parte del lavoro che vedi nel browser. Questo lavoro include le attività ad esempio lo scripting, alcuni tipi di rendering, l'analisi HTML e CSS e altri tipi di lavori rivolti all'utente che promuovono l'esperienza utente. In realtà, i browser utilizzano altri thread per svolgere operazioni che tu, lo sviluppatore, non in genere hanno accesso diretto, ad esempio ai thread GPU.

Per quanto riguarda JavaScript, in genere si limita a lavorare nel thread principale, ma solo per impostazione predefinita. È possibile registrarsi e utilizzare thread aggiuntivi in JavaScript. La funzionalità che consente il multi-threading JavaScript è noto come API Web Workers.

I web worker sono utili quando devi svolgere attività dispendiose dal punto di vista dell'elaborazione e non possono essere eseguite sul thread principale senza causare attività lunghe che rendono la pagina non risponde. Queste attività possono sicuramente influire sull'interazione con Next Paint (INP), in modo che possa essere utile sapere quando hai a disposizione un lavoro che può essere a partire dal thread principale. In questo modo puoi creare più spazio per ad altre attività nel thread principale, in modo che le interazioni degli utenti siano più veloci.

Questo modulo e la demo successiva che mostra un caso d'uso concreto riguardano il Web worker. La demo stessa mostra come utilizzare un web worker per svolgere il lavoro della lettura dei metadati delle immagini da un file JPEG dal thread principale e del modo in cui possono riportare i metadati nel thread principale, in modo che l'utente possa vederli.

Come viene avviato un web worker

Un worker web viene registrato creando un'istanza per la classe Worker. Se lo fai Devi quindi specificare dove si trova il codice worker web, che viene caricato dal browser e poi crea un nuovo thread. Il thread risultante viene spesso chiamato un thread di worker.

const myWebWorker = new Worker('/js/my-web-worker.js');

Nel file JavaScript del worker, in questo caso my-web-worker.js, puoi quindi scrivere codice che viene poi eseguito in un thread worker separato.

Limitazioni dei lavoratori web

A differenza di JavaScript che viene eseguito sul thread principale, i web worker non hanno accesso diretto al contesto window. e hanno accesso limitato alle API che fornisce. A rete i worker sono soggetti ai seguenti vincoli:

• I web worker non possono accedere direttamente al DOM.
• I web worker possono comunicare con il contesto window tramite messaggi pipeline, il che significa che un web worker può accedere indirettamente al DOM in un modo.
• L'ambito del worker web è self, anziché window.
• L'ambito del worker web ha accesso alle primitive JavaScript e nonché API come fetch e un numero abbastanza elevato altre API.

In che modo i web worker comunicano con il window

È possibile che un worker web comunichi con l'elemento window del thread principale contesto attraverso una pipeline di messaggistica. Questa pipeline ti consente di trasferire i dati dal thread principale e dal worker web. Per inviare dati da un worker web alla thread principale, imposti un evento message sul contesto del worker web (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Quindi in uno script nel contesto window del thread principale, puoi ricevere messaggio dal thread di lavoro web utilizzando un altro evento message:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

La pipeline di messaggistica del web worker è una sorta di escape hatch dal web contesto dei worker. Utilizzandola, puoi inviare dati al window dal worker web che è possibile utilizzare per aggiornare il DOM oppure eseguire altre operazioni da eseguire nel thread principale.

Verifica le tue conoscenze

A seguire: un caso d'uso concreto dei lavoratori web

Nel modulo successivo, viene illustrato nel dettaglio un caso d'uso concreto dei lavoratori web dimostrato. In questo modulo, un worker web viene utilizzato per recuperare un file JPEG da un dato l'URL e leggere i relativi metadati EXIF in un worker web. I dati vengono quindi inviati al thread principale da mostrare all'utente.