HTML Web Workers

Web worker är JavaScript som körs i bakgrunden och påverkar inte sidans prestanda.

Vad är Web Worker?

När ett skript körs på en HTML-sida är sidan inte responsiv, tills skriptet är klart.

Web worker är JavaScript som körs i bakgrunden, oberoende av andra skript och påverkar inte sidans prestanda. Du kan fortsätta med vad du vill: klicka, välja innehåll osv., medan web worker körs i bakgrunden.

Webbläsarstöd

Talen i tabellen indikerar den första webbläsarversionen som fullständigt stöder Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers-exempel

Följande exempel skapar en enkel web worker som räknar bakgrunden:

Antal:

Prova själv

Kontrollera Web Worker-stöd

Innan du skapar en web worker, kontrollera om användarens webbläsare stöder den:

if (typeof(Worker) !== "undefined") {
    // Ja! Web worker stöds!
    // Några kod...
}
    // Ursäkta! Web Worker stöds inte!
}

Skapa Web Worker-fil

Låt oss nu skapa vår web worker i en extern JavaScript-fil.

Här har vi skapat ett räknings-skript. Skriptet lagras i "demo_workers.js"-filen:

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

Det viktiga i ovanstående kod är postMessage() metoden - den används för att skicka ett meddelande tillbaka till HTML-sidan.

Kommentarer: Web worker används vanligtvis inte för så enkla skript, utan för mer CPU-intensiva uppgifter.

Skapa Web Worker-objekt

Nu har vi web worker-filen, vi behöver anropa den från HTML-sidan.

Nedanstående kodrad kontrollerar om worker finns, om den inte finns - skapar den en ny web worker-objekt och kör koden från "demo_workers.js":

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

Då kan vi ta emot meddelanden från web worker.

Lägg till en "onmessage"-eventlyssnare till web worker:

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

När en web worker skickar ett meddelande, körs koden i event-listenern. Data från web worker lagras i event.data.

Avsluta Web Worker

När en web worker har skapats, fortsätter den att lyssna på meddelanden (även efter att extern skript har slutförts) tills den har avslutats.

För att avsluta web worker och frigöra webbläsarens/datorns resurser, använd terminate() metoden:

w.terminate();

Återanvänd Web Worker

Om du sätter worker-variabeln till undefined, kan du återanvända denna kod efter att den har avslutats:

w = undefined;

Hela Web Worker-exempelkoden

Vi har redan sett Worker-koden i .js-filen. Här är koden för HTML-sidan:

Exempel

<!DOCTYPE html>
<html>
<body>
<p>Räkna nummer: <output id="result"></output></p>
<button onclick="startWorker()">Starta Worker</button> 
<button onclick="stopWorker()">Stoppa 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 = "Tyvärr! Ingen stöd för Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Prova själv

Web Worker och DOM

Eftersom web worker ligger i en extern fil kan de inte komma åt följande JavaScript-objekt:

  • window-objektet
  • document-objektet
  • parent-objektet