HTML Web Workers

Web worker is een JavaScript die in de achtergrond draait en de prestaties van de pagina niet beïnvloedt.

Wat is een Web Worker?

Wanneer een script in een HTML-pagina wordt uitgevoerd, is de pagina niet reagevend totdat het script is voltooid.

Web worker is een JavaScript die in de achtergrond draait, onafhankelijk van andere scripts, en beïnvloedt de prestaties van de pagina niet. Je kunt verder doen met alles wat je wilt: klikken, inhoud selecteren, etc., en op dat moment draait de web worker in de achtergrond.

Browserondersteuning

De cijfers in de tabel wijzen op de eerste browserversie die Web Worker volledig ondersteunt.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Voorbeeld van HTML Web Workers

Het volgende voorbeeld maakt een eenvoudige web worker die in de achtergrond telt:

Telling:

Probeer het zelf

Controleer Web Worker-ondersteuning

Controleer voordat je een web worker maakt of de browser van de gebruiker het ondersteunt:

if (typeof(Worker) !== "undefined") {
    // Ja! Web worker wordt ondersteund!
    // Enkele code.....
} else {
    // Excuses, Web Worker wordt niet ondersteund!
}

Maak een Web Worker-bestand

Nu, laten we onze web worker aanmaken in een extern JavaScript-bestand.

Hier hebben we de tellerscript gecreëerd. Dit script staat in het "demo_workers.js" bestand:

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

Een belangrijk deel van de bovenstaande code is de postMessage() methode - deze wordt gebruikt om een bericht terug te sturen naar de HTML-pagina.

Opmerking: Web workers worden meestal niet gebruikt voor zo eenvoudige scripts, maar voor taken die meer CPU-resourcen vereisen.

Maak Web Worker object aan

Nu hebben we de web worker bestand, we moeten deze aanroepen vanuit de HTML-pagina.

De volgende code regel controleert of er een worker bestaat. Als deze niet bestaat, - maakt het een nieuwe web worker object aan en voert het de code uit van "demo_workers.js":

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

Daarna kunnen we berichten van en naar de web worker ontvangen.

Voeg een "onmessage"-event listener toe aan de web worker:

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

Wanneer een web worker een bericht overbrengt, voert de code in de event listener uit. De gegevens van de web worker worden opgeslagen in event.data.

Beëindig Web Worker

Na het aanmaken van een web worker, luistert deze voortdurend naar berichten (zelfs nadat het externe script is voltooid) totdat deze is beëindigd.

Om een web worker te beëindigen en de browser-/computercapaciteit vrij te geven, gebruik dan de terminate() methode:

w.terminate();

Hergebruik Web Worker

Als je de worker-variabele op undefined zet, kun je de code opnieuw gebruiken nadat deze is beëindigd:

w = undefined;

Volledige Web Worker voorbeeldcode

We hebben gezien dat de Worker-code in het .js-bestand staat. Hier is de code van de HTML-pagina:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<p>Tel nummers: <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! Geen Web Worker-ondersteuning.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Probeer het zelf

Web Worker en DOM

Omdat web workers zich bevinden in een extern bestand, kunnen ze geen toegang krijgen tot de volgende JavaScript-objecten:

  • Window object
  • Document object
  • Parent object