Cheat Sheet Web Workers in JavaScript

I Web Workers forniscono un metodo semplice per eseguire script in thread in background senza bloccare l interfaccia utente.

Thread in background

Thread principale del client

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('Ricevuto dal worker:', event.data);
};

worker.postMessage('ciao dal thread principale!');

I messaggi possono contenere qualsiasi tipo di dati supportato dall algoritmo di clonazione strutturata (oggetti, array, stringhe, numeri, blob, typed array).

Thread del Worker

// All interno di worker.js
self.onmessage = function (event) {
  console.log('Ricevuto nel worker:', event.data);
  self.postMessage({ msg: 'risposta dal worker' });
};

Struttura di MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Payload trasferito
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Questi campi descrivono le proprietà disponibili sull oggetto MessageEvent in onmessage.