Web Worker API

Web Worker on taustalla toimiva JavaScript, joka ei vaikuta sivun suorituskykyyn.

Mitä Web Worker on?

HTML-sivulla suoritettaessa skriptiä, sivu on vastaanottamaton ennen kuin skripti on valmis.

Web Worker on taustalla toimiva JavaScript, joka on riippumaton muista skripteistä eikä vaikuta sivun suorituskykyyn. Voit tehdä mitä tahansa haluat: napsauttaa, valita sisältöä jne., samalla kun web worker toimii taustalla.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäiset selaimet, jotka tukevat täysin Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 vuoden tammikuu 2012 vuoden syyskuu 2009 vuoden kesäkuu 2009 vuoden kesäkuu 2011 vuoden kesäkuu

Web Worker-esitys

Seuraava esimerkki luo yksinkertaisen Web Workerin, joka laskee numerot taustalla:

Esimerkki

Laskuri:

Kokeile itse

Tarkista Web Worker-selain

Ennen kuin luot web workerin, tarkista käyttäjän selaimesi tukee sitä:

if (typeof(Worker) !== "undefined") {
  // Kyllä! Web worker-tuki!
  // Jotain koodia.....
} else {
  // Pahoittelemme! Web Worker-tuen ei ole saatavilla..
}

Luo Web Worker-tiedosto

Nyt luomme Web Workerin ulkoisessa JavaScriptissä.

Tässä luomme tärkeän skriptin. Skripti tallennetaan "demo_workers.js"-tiedostoon:

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

Yllä olevan koodin tärkeä osa on postMessage() Menetelmä - Lähetetään viesti takaisin HTML-sivulle.

Huomautus:Web workeria ei yleensä käytetä tällaisissa yksinkertaisissa skripteissä, vaan CPU-painoisissa tehtävissä.

Luo Web Worker-objekti

Nyt meillä on web worker-tiedosto, ja meidän täytyy kutsua sitä HTML-sivulta.

Seuraava koodirivi tarkistaa, onko worker olemassa, ja jos ei ole, se luo uuden web worker-objektin ja suorittaa "demo_workers.js"-tiedoston koodin:

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

Sitten voimme lähettää ja vastaanottaa viestejä web workerilta.

Lisää web workerille "onmessage"-tapahtumankuuntelija.

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

Kun Web Worker lähettää viestin, se suorittaa tapahtumankuuntelijakoodin. Web Workerin tiedot tallennetaan event.data:ssa.

Lopeta Web Worker

Kun web worker-objekti luodaan, se jatkaa viestien kuuntelua (vaikka ulkoiset skriptit ovat päättymässä) kunnes se lopetetaan.

Jos haluat lopettaa web workerin ja vapauttaa selain/tietokoneen resurssit, käytä terminate() Menetelmä:

w.terminate();

Toista Web Worker

Jos asetetaan worker-muuttuja undefinediksi, voit käyttää seuraavaa koodia sen jälkeen, kun se on päättynyt:

w = undefined;

Koko Web Worker-esimerkki

Olemme jo nähneet Worker-koodin .js-tiedostossa. Tässä on HTML-sivun koodi:

Esimerkki

<!DOCTYPE html>
<html>
<body>
<p>Lasketaan lukuja: <output id="result"></output></p>
<button onclick="startWorker()">Aloita työntekijä</button>
<button onclick="stopWorker()">Pysäytä 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>

Kokeile itse

Web Worker ja DOM

Koska Web Worker sijaitsee ulkoisessa tiedostossa, se ei voi käyttää seuraavia JavaScript-objekteja:

  • window-objekti
  • document-objekti
  • parent-objekti