Web Workers API

Obsah

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 jiných skriptů, aniž by to ovlivnilo výkon stránky. Můžete pokračovat v tom, co chcete: klikání, vybírání věcí atd., zatímco webový pracovník běží na pozadí.

Podpora prohlížeče

Čísla v tabulce určují první verze prohlížeče, které plně podporují Web Workers:


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

Příklad Web Workers

Níže uvedený příklad vytváří jednoduchého webového pracovníka, který počítá čísla na pozadí:

Příklad

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<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>

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":

let i = 0;

function timedCount()
{
    
i ++;
    
postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

Důležitou součástí výše uvedeného kódu je metoda postMessage() - která se používá k odeslání zprávy zpět na stránku HTML.

Poznámka: Weboví pracovníci se běžně 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 z webového pracovníka je uložen v event.data.

Ukončete webového pracovníka

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 Metoda terminate():

w.terminate();

Znovu použijte Web Worker

Pokud nastavíte pracovní proměnnou na undefined, poté, co byla ukončena, kód můžete 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>
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>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<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 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