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 = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

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

Web Worker και DOM

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

  • Window αντικείμενο
  • Document αντικείμενο
  • Parent αντικείμενο