HTML Web Workers

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

Τι είναι ο Web Worker;

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

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

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

Τα αριθμήματα στην τάβλη δείχνουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως τον Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Παράδειγμα HTML Web Workers

Ο παρακάτω παράδειγμα δημιουργεί έναν απλό web worker που μετρά στο παρασκήνιο:

Αριθμός:

Δοκιμάστε το شخصικά

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

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

if (typeof(Worker) !== "undefined") {
    // Ναι! Υποστηρίζεται ο Web worker!
    // Μερικός κώδικας.....
}
    // Συγγνώμη! Δεν υποστηρίζεται ο Web Worker!
}

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

Τώρα, ας δημιουργήσουμε τον web worker μας σε ένα εξωτερικό αρχείο JavaScript.

Σε αυτό το σημείο, δημιουργούμε το σενάριο μετρήματος. Το σενάριο αυτό αποθηκεύεται στο αρχείο "demo_workers.js":

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

Το σημαντικό μέρος του παραπάνω κώδικα είναι η μέθοδος postMessage() - χρησιμοποιείται για να στείλει ένα μήνυμα πίσω στην σελίδα HTML.

Σχόλια: Ο web worker συνήθως δεν χρησιμοποιείται για τόσο απλά σενάρια, αλλά για εργασίες που απαιτούν περισσότερους πόρους CPU.

Δημιουργία αντικειμένου Web Worker

Τώρα έχουμε το αρχείο web worker, πρέπει να το καλέσουμε από τη σελίδα HTML.

Ο παρακάτω κώδικας ελέγχει是否存在 worker, αν δεν υπάρχει - δημιουργεί μια νέα οντότητα web worker και εκτελεί τον κώδικα από το "demo_workers.js":

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

Στη συνέχεια, μπορούμε να λαμβάνουμε μηνύματα από τον web worker.

Προσθέστε έναν παραλήπτη συμβάντος "onmessage" στον web worker:

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

Όταν ο web worker στέλνει μήνυμα, εκτελεί τον κώδικα του παραλήπτη συμβάντος. Τα δεδομένα από τον web worker αποθηκεύονται στο event.data.

Σταμάτημα Web Worker

Μετά τη δημιουργία web worker, θα συνεχίσει να παρακολουθεί μηνύματα (ακόμα και μετά την ολοκλήρωση του εξωτερικού σενάριου) μέχρι να σταματήσει.

Για να σταματήσετε τον web worker και να ελευθερώσετε πόρους του προγράμματος περιήγησης/υπολογιστή, χρησιμοποιήστε τη μέθοδο terminate():

w.terminate();

Επανχρήση Web Worker

Αν θέλετε να ρυθμίσετε τη μεταβλητή worker σε undefined, μπορείτε να επαναχρησιμοποιήσετε τον κώδικα αυτό μετά την Τέλεση του:

w = undefined;

Πλήρης κώδικας παράδειγματος Web Worker

Έχουμε ήδη δει τον κώδικα Worker στο αρχείο .js. Ακολουθεί ο κώδικας της σελίδας HTML:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<p>Ός αριθμούς: <output id="result"></output></p>
<button onclick="startWorker()">Ξεκινήστε Worker</button> 
<button onclick="stopWorker()">Στοπ 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 = "Συγγνώμη! Δεν υπάρχει υποστήριξη για Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Δοκιμάστε το شخصικά

Web Worker και DOM

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

  • Αντικείμενο window
  • Αντικείμενο document
  • Αντικείμενο parent