Web Workers-API
Een webwerker is een JavaScript dat op de achtergrond wordt uitgevoerd, zonder de prestaties van de pagina te beïnvloeden.
Wat is een webwerker?
Bij het uitvoeren van scripts op een HTML-pagina reageert de pagina niet meer totdat het script is voltooid.
Een webwerker is een JavaScript dat op de achtergrond wordt uitgevoerd, onafhankelijk van andere scripts, zonder de prestaties van de pagina te beïnvloeden. Je kunt blijven doen wat je wilt: klikken, dingen selecteren, etc., terwijl de webwerker op de achtergrond draait.
Browserondersteuning
De getallen in de tabel geven de eerste browserversies aan die Web Workers volledig ondersteunen:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Voorbeeld van webwerkers
In het onderstaande voorbeeld wordt een eenvoudige webwerker gemaakt die getallen op de achtergrond telt:
Voorbeeld
Controleer Web Worker-ondersteuning
Controleer voordat u een webwerker aanmaakt of de browser van de gebruiker dit ondersteunt:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Een Web Worker-bestand maken
Laten we nu onze webwerker maken in een extern JavaScript.
Hier maken we een script dat telt. Het script wordt opgeslagen in het bestand "demo_workers.js":
let i = 0;
function timedCount()
{
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Het belangrijkste deel van de bovenstaande code is de postMessage()methode - die wordt gebruikt om een bericht terug naar de HTML-pagina te posten.
Opmerking: Normaal gesproken worden webwerkers niet gebruikt voor dergelijke eenvoudige scripts, maar voor meer CPU-intensieve taken.
Een Web Worker-object maken
Nu we het webworker-bestand hebben, moeten we het vanaf een HTML-pagina aanroepen.
De volgende regels controleren of de worker al bestaat, zo niet: er wordt een nieuw webworker-object gemaakt en de code wordt uitgevoerd in "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Dan kunnen we berichten van de webwerker verzenden en ontvangen.
Voeg een 'onmessage'-gebeurtenislistener toe aan de webwerker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Wanneer de webwerker een bericht plaatst, wordt de code in de gebeurtenislistener uitgevoerd. De gegevens van de webwerker worden opgeslagen in event.data.
Een webwerker beëindigen
Wanneer een webworker-object wordt gemaakt, blijft het naar berichten luisteren (zelfs nadat het externe script is voltooid) totdat het wordt beëindigd.
Gebruik de methode om een webwerker te beëindigen en browser-/computerbronnen vrij te maken
terminate():
w.terminate();
Hergebruik de webwerker
Als u de worker-variabele instelt op undefined, kunt u de code opnieuw gebruiken nadat deze is beëindigd:
w = undefined;
Voorbeeldcode voor volledige webwerker
We hebben de Worker-code al gezien in het .js-bestand. Hieronder staat de code voor de HTML-pagina:
Voorbeeld
<!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>
Web Workers en de DOM
Omdat webwerkers zich in externe bestanden bevinden, hebben ze geen toegang tot de volgende JavaScript-objecten:
- Het raamobject
- Het documentobject
- Het bovenliggende object