Webb Worker API

Web Worker är JavaScript som körs i bakgrunden, utan att påverka sidans prestanda.

Vad är Web Worker?

När ett skript körs i en HTML-sida är sidan oansvarig innan 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 göra: klicka, välja innehåll osv., medan web worker körs i bakgrunden.

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarversionen som helt stöder Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 januari 2012 september 2009 juni 2009 juni 2011 juni

Web Worker-instans

Följande exempel skapar en enkel Web Worker som räknar bakom kulisserna:

Exempel

Antal:

Prova själv

Kontrollera Web Worker-webbläsare

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

om (typeof(Worker) !== "undefined") {
  // Ja! Stöd för Web worker!
  // Några kod.....
} annars {
  // Förlåt! Ingen stöd för Web Worker..
}

Skapa Web Worker-fil

Låt oss nu skapa vår Web Worker i extern JavaScript.

Här skapar vi en viktig skript. Skriptet lagras i "demo_workers.js"-filen:

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

Det viktiga i ovanstående kod är postMessage() Metod - Används för att skicka meddelanden tillbaka till HTML-sidan.

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

Skapa Web Worker-objekt

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

Följande 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 skicka och ta emot meddelanden från web worker.

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

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

När Web Worker publicerar ett meddelande, körs koden i händelselyssnaren. Data från Web Worker lagras i event.data.

Avsluta Web Worker

När web worker-objektet skapas, fortsätter det att lyssna på meddelanden (även efter att extern skript har slutförts) tills det avslutas.

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

w.terminate();

Återanvänd Web Worker

Om worker-variabeln sätts till undefined, kan du återanvända följande kod efter att den har avslutats:

w = undefined;

Komplett Web Worker-exempel

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

Exempel

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stoppa 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>

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-objekt
  • document-objekt
  • parent-objekt