Web Worker API

Web Worker er JavaScript, der kører i baggrunden, og påvirker ikke sides ydeevne.

Hvad er Web Worker?

Når du udfører et script i en HTML-side, er siden uresponsiv, indtil scriptet er færdigt.

Web Worker er JavaScript, der kører i baggrunden, uafhængigt af andre scripts, og påvirker ikke sides ydeevne. Du kan fortsætte med at gøre, hvad du vil: klikke, vælge indhold osv., mens web worker kører i baggrunden.

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Januar 2010 September 2012 Juni 2009 Juni 2009 Juni 2011

Web Worker-instans

Følgende eksempel opretter en simpel Web Worker, der beregner tal i baggrunden:

Eksempel

Tæller:

Prøv det selv

Kontroller Web Worker-browser

Før du opretter en web worker, kontroller venligst om brugerens browser understøtter det:

hvis (typeof(Worker) !== "undefined") {
  // Ja! Web worker-støtte!
  // Nogle kode.....
} ellers {
  // Tilføjelse! Ingen Web Worker-støtte...
}

Opret Web Worker-fil

Lad os nu oprette vores Web Worker uden for JavaScript.

Her opretter vi en vigtig script. Scriptet gemmes i "demo_workers.js" filen:

let i = 0;
function timedCount() {
  i++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

Vigtige dele af ovenstående kode er postMessage() Metode - bruges til at sende beskeder tilbage til HTML-siden.

Bemærk:Web worker bruges normalt ikke til sådanne enkle scripts, men til CPU-intensive opgaver.

Opret Web Worker objekt

Nu har vi web worker filen, og vi skal kalde den fra HTML-siden.

Følgende kode linje tjekker om worker eksisterer, og opretter en ny web worker objekt og kører koden i "demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Dernæst kan vi sende og modtage beskeder fra web worker.

Tilføj en "onmessage"-eventlistener til web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Når Web Worker sender en besked, udføres koden i event-listeneren. Data fra Web Worker gemmes i event.data.

Afbryd Web Worker

Når web worker-objektet oprettes, fortsætter det med at lytte efter beskeder (selv efter eksterne scripts er færdige) indtil det er stoppet.

For at afslutte web worker og frigive browser/computer ressourcer, brug terminate() Metode:

w.terminate();

Genbrug Web Worker

Hvis worker-variablen sættes til undefined, kan du genbruge følgende kode efter at det er stoppet:

w = undefined;

Komplet eksempel på Web Worker kode

Vi har set Worker-koden i .js-filen. Her er HTML-sidens kode:

Eksempel

<!DOCTYPE html>
<html>
<body>
<p>Tæll tal: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Prøv det selv

Web Worker og DOM

Sådan adgang til følgende JavaScript objekter er ikke mulig for Web Worker, da de befinder sig i en ekstern fil:

  • window objekt
  • document objekt
  • parent objekt