HTML Web Workers

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

Hvad er Web Worker?

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

Web worker er JavaScript, der kører i baggrunden, uafhængigt af andre skript, og påvirker ikke websidens 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.....
} else {
    // Undskyld! 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 scripts, 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, og opretter en ny web worker objekt, kører "demo_workers.js" kode, hvis det ikke findes:

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

Dernæst kan vi 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 beskeder, udføres koden i event-listeneren. Data fra web worker gemmes i event.data.

Afslut Web Worker

Efter oprettelse af web worker vil den fortsætte med at lytte efter beskeder (selv efter eksterne scripts er afsluttet) indtil den er blevet afsluttet.

For at afslutte web worker og frigive browserens/komputerens ressourcer, brug terminate() metoden:

w.terminate();

Genbrug Web Worker

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

w = undefined;

Komplet Web Worker-eksempel kode

Vi har allerede set Worker-koden i .js-filen. Her er HTML-sidenes 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;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Try it yourself

Web Workers and DOM

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

  • Window object
  • Document object
  • Parent object