Snelle referentie

Web Workers Spiekbrief

Een beknopte referentiehandleiding voor HTML5 Web Workers: worker-instantiëring, postMessage-communicatie, message-events en het gestructureerde kloonalgoritme.

· Gepubliceerd

Web Workers bieden een eenvoudige manier om scripts op de achtergrond uit te voeren zonder de gebruikersinterface te blokkeren.

Threading op de achtergrond

Hoofd-client-thread

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

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

worker.postMessage('hallo vanaf de hoofdthread!');

Berichten kunnen elk gegevenstype bevatten dat wordt ondersteund door het gestructureerde kloonalgoritme (objecten, arrays, strings, getallen, blobs, getypeerde arrays).

Worker-thread

// In worker.js
self.onmessage = function (event) {
  console.log('Ontvangen in worker:', event.data);
  self.postMessage({ msg: 'reactie van worker' });
};

MessageEvent-structuur

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

Deze velden beschrijven de beschikbare eigenschappen op het MessageEvent-object in onmessage.

Verwante onderwerpen