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 vastaanottavaisa, 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: napsauttaa, valita sisältöä jne., ja tällöin web worker suorittaa taustalla.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen Web Workerin täysin tukevan selaimen version.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers -esimerkki

Alla oleva 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 tukeeko 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 laskennaskriptin. 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() -menetelmä - se käytetään viestin lähettämiseen HTML-sivulle.

Huomautus: Web workeria ei yleensä käytetä näin yksinkertaisissa skripteissä, vaan enemmänkin CPU-keskitettyihin tehtäviin.

Luo Web Worker-objekti

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

Tämä koodirivi tarkistaa työntekijän olemassaolon, 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 tapahtumankuuntelijakoodin. Web workerin lähettämä tieto tallennetaan event.data-ominaisuuteen.

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() -menetelmää:

w.terminate();

Web Workerin uudelleenkäyttö

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

w = undefined;

Täydellinen 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