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 färdigt.

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

Tal 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-krävande 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 i "demo_workers.js":

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

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

Lägg till en "onmessage"-händelselyssnare till web worker:

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

När en web worker skickar meddelanden, körs koden i händelselyssnaren. 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 externa 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 upprepa användningen av denna kod efter att den har avslutats:

w = undefined;

Komplett Web Worker-exempelkod

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 tal: <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 webb worker ligger i en extern fil kan de inte åtkomma följande JavaScript-objekt:

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