Τι είναι οι web workers και ποιος είναι ο σκοπός…

Οι web workers είναι ένας τρόπος εκτέλεσης scripts σε φόντο, χωριστά από το κύριο νήμα διεπαφής χρήστη.

Ο κύριος σκοπός τους:

Βελτίωση της απόδοσης: Μεταφορά εργασιών που καταναλώνουν πόρους (πολύπλοιοι υπολογισμοί, επεξεργασία μεγάλων όγκων δεδομένων, parsing) από το κύριο νήμα, που είναι υπεύθυνο για την απόδοση της διεπαφής και τη διαχείριση γεγονότων χρήστη. Αυτό αποτρέπει το πάγωμα της σελίδας και βελτιώνει την ανταπόκριση της εφαρμογής.
Παραλληλισμός: Επιτρέπει την εκτέλεση πολλαπλών εργασιών ταυτόχρονα, αξιοποιώντας πιο αποτελεσματικά τους πολυπύρηνους επεξεργαστές.

Υπάρχουν τρεις τύποι web workers:

Dedicated Workers: Συνδέονται με μια συγκεκριμένη σελίδα και είναι προσβάσιμοι μόνο από αυτήν.
Shared Workers: Μπορούν να είναι προσβάσιμοι από πολλές σελίδες ή καρτέλες του ίδιου domain.
Service Workers: Λειτουργούν ως διαμεσολαβητές δικτύου, παρεμβαίνοντας στα αιτήματα δικτύου και επιτρέποντας την υλοποίηση offline λειτουργικότητας, ειδοποιήσεων push και άλλων δυνατοτήτων των προοδευτικών web εφαρμογών (PWA).

Αρχές λειτουργίας:

Χωριστό πλαίσιο: Ο worker έχει το δικό του παγκόσμιο αντικείμενο και πρόσβαση σε ένα υποσύνολο του API του browser (χωρίς πρόσβαση στο DOM, window, document, parent).
Ανταλλαγή μηνυμάτων: Η αλληλεπίδραση μεταξύ του κύριου νήματος και του worker γίνεται μέσω μηνυμάτων με postMessage() και χειριστή γεγονότων onmessage. Τα δεδομένα μεταφέρονται με τιμή (αντιγράφονται) ή με αναφορά (Transferable Objects).

Παράδειγμα χρήσης Dedicated Worker:

// main.js (κύριο νήμα)
const worker = new Worker('worker.js'); // Δημιουργία worker

worker.onmessage = (event) => {
  // Επεξεργασία μηνύματος από τον worker
  console.log('Λήψη από τον worker:', event.data);
};

worker.postMessage('Ξεκίνα πολύπλοκη λειτουργία'); // Αποστολή μηνύματος στον worker

// worker.js (αρχείο worker)
onmessage = (event) => {
  // Επεξεργασία μηνύματος από το κύριο νήμα
  console.log('Λήψη από το κύριο νήμα:', event.data);

  // Εκτέλεση πολύπλοκης εργασίας
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Επιστροφή αποτελέσματος
  postMessage(result);
};

Τι είναι οι web workers και ποιος είναι ο σκοπός τους;