Web Workers API

Indholdsfortegnelse

En webarbejder er et JavaScript, der kører i baggrunden, uden at det påvirker sidens ydeevne.

Hvad er en webarbejder?

Når scripts udføres på en HTML-side, reagerer siden ikke, indtil scriptet er færdigt.

En webarbejder er et JavaScript, der kører uafhængigt i baggrunden af andre scripts uden at påvirke ydeevnen af siden. Du kan fortsætte med at gøre, hvad du vil: klikke, vælge ting osv., mens webarbejderen kører i baggrunden.

Browser support

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


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Eksempel på webarbejdere

Eksemplet nedenfor opretter en simpel webarbejder, der tæller tal i baggrunden:

Eksempel

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <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>

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }

Opret en Web Worker-fil

Lad os nu oprette vores webarbejder i en ekstern JavaScript.

Her laver vi et script, der tæller. Scriptet er gemt i filen "demo_workers.js":

let i = 0;

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

timedCount();

Den vigtige del af koden ovenfor er metoden postMessage() - som bruges til at sende en besked tilbage til HTML-siden.

Bemærk: Normalt bruges webarbejdere ikke til så simple scripts, men til mere CPU-intensive opgaver.

Opret et Web Worker-objekt

Nu hvor vi har webarbejderfilen, skal vi kalde den fra en HTML-side.

De følgende linjer kontrollerer, om arbejderen allerede eksisterer, hvis ikke - den opretter et nyt webarbejderobjekt og kører koden i "demo_workers.js":

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

Så kan vi sende og modtage beskeder fra webarbejderen.

Tilføj en "onmessage"-begivenhedslytter til webarbejderen.

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

Når webarbejderen sender en besked, udføres koden i hændelseslytteren. Dataene fra webarbejderen er gemt i event.data.

Afslut en Web Worker

Når et webarbejderobjekt er oprettet, vil det fortsætte med at lytte efter meddelelser (selv efter det eksterne script er færdigt), indtil det afsluttes.

For at afslutte en webarbejder og gratis browser-/computerressourcer skal du bruge terminate() metode:

w.terminate();

Genbrug Web Worker

Hvis du indstiller arbejdervariablen til udefineret, efter at den er blevet afsluttet, du kan genbruge koden:

w = undefined;

Fuld Web Worker Eksempel kode

Vi har allerede set Worker-koden i .js-filen. Nedenfor er koden til HTML-siden:

Eksempel

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <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>

Web Workers og DOM

Da webarbejdere er i eksterne filer, har de ikke adgang til følgende JavaScript-objekter:

Vinduesobjektet
Dokumentobjektet
Forælderobjektet