HTML Web Workers API
Webový pracovník je JavaScript běžící na pozadí, aniž by to ovlivnilo výkon stránky.
Co je Web Worker?
Při provádění skriptů na stránce HTML stránka přestane reagovat, dokud není skript dokončen.
Webový pracovník je JavaScript, který běží na pozadí, nezávisle na jiných skriptech, aniž by to ovlivnilo výkon stránky. Můžete pokračovat v tom, co chcete: klikat, vybírat věci atd., zatímco webový pracovník běží na pozadí.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Příklad HTML Web Workers
Níže uvedený příklad vytváří jednoduchého webového pracovníka, který počítá čísla na pozadí:
Příklad
Zkontrolujte Web Worker Support
Před vytvořením webového pracovníka zkontrolujte, zda jej prohlížeč uživatele podporuje:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Vytvořte soubor Web Worker
Nyní vytvoříme našeho webového pracovníka v externím JavaScriptu.
Zde vytvoříme skript, který se počítá. Skript je uložen v souboru "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Důležitou součástí výše uvedeného kódu je postMessage()metoda - která se používá k odeslání zprávy zpět na stránku HTML.
Poznámka: Obvykle se weboví pracovníci nepoužívají pro takové jednoduché skripty, ale pro úlohy náročnější na CPU.
Vytvořte objekt Web Worker
Nyní, když máme soubor webového pracovníka, musíme jej zavolat ze stránky HTML.
Následující řádky zkontrolují, zda pracovník již existuje, pokud ne - vytvoří nový objekt webového pracovníka a spustí kód v "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Poté můžeme odesílat a přijímat zprávy od webového pracovníka.
Přidejte do webového pracovníka posluchače událostí „onmessage“.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Když webový pracovník odešle zprávu, spustí se kód v posluchači událostí. Data od webového pracovníka jsou uložena v event.data.
Ukončit Web Worker
Když je vytvořen objekt webového pracovníka, bude nadále naslouchat zprávám (i po dokončení externího skriptu), dokud nebude ukončen.
Chcete-li ukončit webového pracovníka a uvolnit prostředky prohlížeče/počítače, použijte
terminate()metodu:
w.terminate();
Znovu použijte Web Worker
Pokud nastavíte pracovní proměnnou na undefined, po jejím ukončení můžete kód znovu použít:
w = undefined;
Ukázkový kód úplného webového pracovníka
Kód Worker jsme již viděli v souboru .js. Níže je uveden kód HTML stránky:
Příklad
<!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>
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>
Web Workers a DOM
Protože weboví pracovníci jsou v externích souborech, nemají přístup k následujícím objektům JavaScriptu:
- Objekt okna
- Objekt dokumentu
- Nadřazený objekt