Web Worker API

Οι Web Worker εκτελούνται στο παρασκήνιο και δεν επηρεάζουν την απόδοση της σελίδας.

Τι είναι ο Web Worker;

Όταν εκτελείτε κώδικα σε σελίδα HTML, η σελίδα είναι ανταποκρίσιμη μέχρι να ολοκληρωθεί ο κώδικας.

Οι Web Worker εκτελούνται στο παρασκήνιο και είναι ανεξάρτητοι από άλλους κώδικες, χωρίς να επηρεάζουν την απόδοση της σελίδας. Μπορείτε να συνεχίσετε να κάνετε ό,τι θέλετε: κλικ, επιλογή περιεχομένου κ.λπ., ενώ ο web worker εκτελείται στο παρασκήνιο.

Υποστήριξη περιηγητή

Τα αριθμήματα στη τаблицή σημειώνουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως τους Web Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Ιανουάριος 2010 Σεπτέμβριος 2012 Ιούνιος 2009 Ιούνιος 2009 Ιούνιος 2011

Περίπτωση Web Worker

Το παρακάτω παράδειγμα δημιουργεί έναν απλό Web Worker που υπολογίζει αριθμούς στο παρασκήνιο:

Exemplos

Αριθμητική:

Δοκιμάστε το προσωπικά

Έλεγχος υποστήριξης Web Worker περιηγητή

Πριν από τη δημιουργία του web worker, ελέγξτε αν ο περιηγητής του χρήστη υποστηρίζει το feature αυτό:

Αν (typeof(Worker) !== "undefined") {
  // Ναι! Υποστήριξη Web worker!
  // Κάποιο κώδικας.....
}
  // Συγγνώμη! Δεν υπάρχει υποστήριξη Web Worker..
}

Δημιουργία αρχείου Web Worker

Nou, na kanei ton Web Worker stin ekstatiki JavaScript.

Edw, kanei mia importan kwdikas. O kwdikas stois arxei "demo_workers.js".

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

To koinon kwdika tou parathou einai postMessage() Metodoi - gia to apodosei twn stinwn stin HTML pageni.

Skepsis:Oxi, to web worker ouk xrhsimopoieitai gia toto tipou ta simple script, alla gia CPU koinotikes diadromes.

Dyoisi Web Worker

Otan naoume to arxei tou web worker, na kalesoume to apo tin HTML pageni.

To kwdika tou arxikou eurethous einai kai ekei:

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

Otan, mporoume na stilioume kai na perasoume ta stinima tou web worker.

Prosthetoume ena "onmessage" event listener ston web worker.

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

Pou ekpoume mesw tou web worker, ekteleitei to kwdika tou event listener. Ta data tou web worker symvainoun stin event.data.

Teleutei Web Worker

Pou kanei to onoma tou web worker, einai ena logismiko kai ginetai anamesa stin akroasis mesw twn mexri ton teleuton, an ginetai teleutei.

An theloume na teleutei to web worker kai na eleutherosei ta oria tou prokypnounta tou prokypnounta, na xrhsimopoihsoume terminate() Metodoi:

w.terminate();

Reuse Web Worker

An to orisma tou worker ginetai undefined, meta ton teleuton sou, mporoume na kanoume reuse to kwdika hmeromhnia:

w = undefined;

Holos kwdikas tis Praktikis Web Worker

Hmea hmea einai mia .js arxei gia to kwdika tou Worker. Opoia einai to kwdika tis HTML pagenis;

Exemplos

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="arxitektonisDiaskepsis()">Arxitektonis Diaskepsis</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 Worker και DOM

Επειδή οι Web Worker βρίσκονται σε εξωτερικό αρχείο, δεν μπορούν να προσβούν στους παρακάτω JavaScript αντικειμένους:

  • Ο αντικειμενος window
  • Ο αντικειμενος document
  • Ο αντικειμενος parent