Snabbreferens

Web Workers Fusklapp

En snabbreferensguide för HTML5 Web Workers: instansiering av workers, postMessage-kommunikation, meddelandehändelser och strukturerad kloningsalgoritm.

· Publicerad

Web Workers erbjuder ett enkelt sätt att köra skript i bakgrundstrådar utan att blockera användargränssnittet.

Bakgrundstrådar

Klientens huvudtråd

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

worker.onmessage = function (event) {
  console.log('Mottaget från worker:', event.data);
};

worker.postMessage('hej från huvudtråden!');

Meddelanden kan innehålla alla datatyper som stöds av den strukturerade kloningsalgoritmen (objekt, arrayer, strängar, siffror, blobs, typade arrayer).

Workertråd

// Inuti worker.js
self.onmessage = function (event) {
  console.log('Mottaget i worker:', event.data);
  self.postMessage({ msg: 'svar från worker' });
};

Struktur för MessageEvent

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

Dessa fält beskriver de egenskaper som finns tillgängliga på MessageEvent-objektet i onmessage.

Relaterade ämnen