HTML Web Workers

Web worker on taustalla suoritettava JavaScript, joka ei vaikuta sivun suorituskykyyn.

Mitä Web Worker on?

Kun suoritat skriptiä HTML-sivulla, sivu ei ole vastaanottavaista, ennen kuin skripti on valmis.

Web worker on taustalla suoritettava JavaScript, joka on riippumaton muista skripteistä eikä vaikuta sivun suorituskykyyn. Voit tehdä mitä tahansa haluat: klikata, valita sisältöä jne., ja tällöin web worker suorittaa taustalla.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen Web Worker -tuen saavan selaimen version.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers -esimerkki

Seuraava esimerkki luo yksinkertaisen web workerin, joka laskee taustalla:

Laskuri:

Kokeile itse

Tarkista Web Worker -tuen

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

if (typeof(Worker) !== "undefined") {
    // Kyllä! Web worker tuettu!
    // Jotain koodia.....
}
    // anteeksi! Web Worker ei ole tuettu!
}

Luo Web Worker-tiedosto

Nyt luomme web workerin ulkoisessa JavaScript-tiedostossa.

Tässä luomme laskettavaa skriptiä. Skripti tallennetaan "demo_workers.js"-tiedostoon:

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

Tärkein osa yllä olevassa koodissa on postMessage() -metodi - se käytetään viestin lähettämiseen HTML-sivulle.

Kommentit: Web workeria ei yleensä käytetä niin yksinkertaisissa skripteissä, vaan enemmän CPU-resursseja vaativiin tehtäviin.

Luo Web Worker-objekti

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

Tässä koodirivissä tarkistetaan, onko worker olemassa. Jos sitä 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 vastaanottaa viestejä web workerista.

Lisää "onmessage"-tapahtumankuuntelija web workeriin:

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

Kun web worker lähettää viestin, se suorittaa tapahtumankuuntelijan koodin. Web workerin lähettämät tiedot tallennetaan event.data-muuttujaan.

Lopeta Web Worker

Web worker jatkaa viestien kuuntelua (vaikka ulkoiset skriptit ovat valmiita) kunnes se on lopetettu.

Jos haluat lopettaa web workerin ja vapauttaa selaimen/tietokoneen resurssit, käytä terminate() -metodia:

w.terminate();

Toista Web Worker

Jos asetat worker-muuttujan undefinediksi, voit käyttää tätä koodia uudelleen sen jälkeen, kun se on lopetettu:

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()">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;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Kokeile itse

Web Worker ja DOM

Koska web worker sijaitsee ulkoisessa tiedostossa, ne eivät voi käyttää seuraavia JavaScript-objekteja:

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