HTML Web Workers

Web workers are JavaScript running in the background and will not affect the performance of the page.

What is Web Worker?

When executing scripts on an HTML page, the page is unresponsive until the script is completed.

Web workers are JavaScript running in the background, independent of other scripts, and will not affect the performance of the page. You can continue to do anything you want: click, select content, etc., while the web worker runs in the background.

Browser Support

The numbers in the table indicate the first browser version that fully supports Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Example

The following example creates a simple web worker that counts in the background:

Count:

Probeer het zelf

Check Web Worker Support

Before creating a web worker, please check if the user's browser supports it:

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

Create Web Worker File

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

Hier hebben we de tell script gecreëerd. Dit script wordt opgeslagen 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 naar de HTML-pagina te sturen.

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

Maak Web Worker object aan

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

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

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

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

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 het de code uit in de event listener. De gegevens van de web worker worden opgeslagen in event.data.

Beëindig Web Worker

Nadat een web worker is gecreëerd, luistert het voortdurend naar berichten (zelfs nadat het externe script is voltooid) totdat het is afgesloten.

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 het code opnieuw gebruiken nadat het is afgesloten:

w = undefined;

Volledige Web Worker voorbeeldcode

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

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<p>Tel het aantal: <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