Aide-mémoire Web Workers en JavaScript

Les Web Workers offrent un moyen simple d exécution de scripts dans des threads en arrière-plan sans bloquer l interface utilisateur.

Threads en arrière-plan

Thread client principal

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

worker.onmessage = function (event) {
  console.log('Reçu du worker :', event.data);
};

worker.postMessage('bonjour depuis le thread principal !');

Les messages peuvent être de n importe quel type pris en charge par l algorithme de clonage structuré (objets, tableaux, chaînes, nombres, blobs, tableaux typés).

Thread du Worker

// Dans worker.js
self.onmessage = function (event) {
  console.log('Reçu dans le worker :', event.data);
  self.postMessage({ msg: 'réponse du worker' });
};

Structure de MessageEvent

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // Données transférées (payload)
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

Ces champs décrivent les propriétés disponibles sur l objet MessageEvent dans onmessage.