HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML-video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

HTML Web Workers API


'n Webwerker is 'n JavaScript wat in die agtergrond loop, sonder om die werkverrigting van die bladsy te beïnvloed.


Wat is 'n webwerker?

Wanneer skrifte in 'n HTML-bladsy uitgevoer word, reageer die bladsy nie totdat die script klaar is nie.

'n Webwerker is 'n JavaScript wat op die agtergrond loop, onafhanklik van ander skrifte, sonder om die werkverrigting van die bladsy te beïnvloed. Jy kan voortgaan om te doen wat jy wil: kliek, dinge kies, ens., terwyl die webwerker in die agtergrond loop.


Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat Web Workers ten volle ondersteun.

API
Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Voorbeeld

Die voorbeeld hieronder skep 'n eenvoudige webwerker wat getalle in die agtergrond tel:

Voorbeeld

Count numbers:


Gaan Webwerkerondersteuning na

Voordat u 'n webwerker skep, kyk of die gebruiker se blaaier dit ondersteun:

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}


Skep 'n Webwerker-lêer

Kom ons skep nou ons webwerker in 'n eksterne JavaScript.

Hier skep ons 'n skrif wat tel. Die skrip word in die "demo_workers.js" lêer gestoor:

var i = 0;

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

timedCount();

Die belangrike deel van die kode hierbo is die postMessage()metode - wat gebruik word om 'n boodskap terug na die HTML-bladsy te plaas.

Let wel: Normaalweg word webwerkers nie vir sulke eenvoudige skrifte gebruik nie, maar vir meer SVE-intensiewe take.


Skep 'n Webwerker-objek

Noudat ons die webwerkerlêer het, moet ons dit vanaf 'n HTML-bladsy oproep.

Die volgende reëls kyk of die werker reeds bestaan, indien nie - dit skep 'n nuwe webwerker-objek en loop die kode in "demo_workers.js":

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

Dan kan ons boodskappe van die webwerker stuur en ontvang.

Voeg 'n "onmessage"-gebeurtenisluisteraar by die webwerker.

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

Wanneer die webwerker 'n boodskap plaas, word die kode binne die gebeurtenisluisteraar uitgevoer. Die data van die webwerker word in event.data gestoor.


Beëindig 'n Webwerker

Wanneer 'n webwerker-objek geskep word, sal dit voortgaan om vir boodskappe te luister (selfs nadat die eksterne skrif voltooi is) totdat dit beëindig word.

Om 'n webwerker en gratis blaaier-/rekenaarhulpbronne te beëindig, gebruik die terminate()metode:

w.terminate();

Hergebruik die Web Worker

As jy die werkerveranderlike op ongedefinieerd stel, nadat dit beëindig is, kan jy die kode hergebruik:

w = undefined;

Volledige webwerkervoorbeeldkode

Ons het reeds die Werker-kode in die .js-lêer gesien. Hieronder is die kode vir die HTML-bladsy:

Voorbeeld

<!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>
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;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Webwerkers en die DOM

Aangesien webwerkers in eksterne lêers is, het hulle nie toegang tot die volgende JavaScript-objekte nie:

  • Die venster voorwerp
  • Die dokument voorwerp
  • Die ouer-objek