Web Workers API


Innehållsförteckning

    Visa innehållsförteckning


En webbarbetare är ett JavaScript som körs i bakgrunden, utan att det påverkar sidans prestanda.


Vad är en webbarbetare?

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

En webbarbetare är ett JavaScript som körs i bakgrunden, oberoende av andra skript, utan att påverka sidans prestanda. Du kan fortsätta göra vad du vill: klicka, markera saker etc. medan webbarbetaren körs i bakgrunden.

Webbläsarstöd

Siffrorna i tabellen anger de första webbläsarversionerna som fullt ut stöder Web Workers:

Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Jan 2010 Sep 2012 Jun 2009 Jun 2009 Jun 2011

Exempel på webbarbetare

Exemplet nedan skapar en enkel webbarbetare som räknar siffror i bakgrunden:

Exempel

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop 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>
if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }


Skapa en Web Worker-fil

Låt oss nu skapa vår webbarbetare i ett externt JavaScript.

Här skapar vi ett manus som räknas. Skriptet lagras i filen "demo_workers.js":

let i = 0;

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

timedCount();

Den viktiga delen av koden ovan är metoden postMessage() - som används för att skicka ett meddelande tillbaka till HTML-sidan.

Obs: Normalt används inte webbarbetare för sådana enkla skript, utan för mer CPU-intensiva uppgifter.


Skapa ett webbarbetarobjekt

Nu när vi har webbarbetarfilen måste vi anropa den från en HTML-sida.

Följande rader kontrollerar om arbetaren redan finns, om inte - den skapar ett nytt webbarbetarobjekt 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 webbarbetaren.

Lägg till en "onmessage"-händelselyssnare till webbarbetaren.

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

När webbarbetaren postar ett meddelande exekveras koden i händelseavlyssnaren. Uppgifterna från webbarbetaren lagras i event.data.


Avsluta en Web Worker

När ett webbarbetarobjekt skapas fortsätter det att lyssna efter meddelanden (även efter att det externa skriptet är klart) tills det avslutas.

För att avsluta en webbarbetare och gratis webbläsare/datorresurser, använd terminate() metod:

w.terminate();

Återanvänd Web Worker

Om du ställer in arbetarvariabeln till odefinierad, efter att den har avslutats, du kan återanvända koden:

w = undefined;

Fullständig webbarbetarexempelkod

Vi har redan sett Worker-koden i .js-filen. Nedan ä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()">Stop 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 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop 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>

Web Workers och DOM

Eftersom webbarbetare finns i externa filer har de inte åtkomst till följande JavaScript-objekt:

  • Fönsterobjektet

  • Dokumentobjektet

  • Förälderobjektet