HTML Web Workers

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

Hvad er Web Worker?

Når der udføres et script på en HTML-side, er siden ikke responsiv, indtil scriptet er færdigt.

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

Browser-understøttelse

Tallene i tabellen indikerer den første browser-version, der fuldt ud understøtter Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers-eksempel

Følgende eksempel opretter en simpel web worker, der tæller i baggrunden:

Tæller:

Try it yourself

Kontroller Web Worker-understøttelse

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

if (typeof(Worker) !== "undefined") {
    //Ja! Web Worker understøttes!
    //Nogle kode.....
}
    //Beklager! Web Worker understøttes ikke!
}

Opret Web Worker-fil

Lad os nu oprette vores web worker i en ekstern JavaScript fil.

Her har vi oprettet tællingskoden. Denne kode gemmes i "demo_workers.js" filen:

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

Den vigtigste del af ovenstående kode er postMessage() metoden - den bruges til at sende en besked tilbage til HTML-siden.

Kommentarer: Web worker bruges normalt ikke til så enkle skript, men til mere CPU-intensive opgaver.

Opret Web Worker objekt

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

Nedenstående kode linje tjekker om worker eksisterer, hvis ikke - den opretter en ny web worker objekt og kører koden fra "demo_workers.js":

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

Så kan vi modtage beskeder fra web workeren.

Tilføj en "onmessage"-hændelseslytter til web worker:

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

Når en web worker sender en besked, udføres koden i event listeneren. Data fra web worker gemmes i event.data.

Afslut Web Worker

Når en web worker er oprettet, fortsætter den med at lytte efter beskeder (selv når eksterne skript er færdige) indtil den er afsluttet.

For at afslutte web worker og frigøre browserens/computers ressourcer, brug terminate() metoden:

w.terminate();

Genbrug Web Worker

Hvis du sætter worker-variablen til undefined, kan du gentage brugen af koden efter, at den er blevet afsluttet:

w = undefined;

Komplet Web Worker eksempel 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>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Try it yourself

Web Worker and DOM

Since web workers are located in external files, they cannot access the following JavaScript objects:

  • window object
  • document object
  • parent object