Πώς δημιουργείτε ένα νήμα Web Worker στη JavaScript…

Για τη δημιουργία Web Worker στην JavaScript, χρησιμοποιείται ο κατασκευαστής Worker, ο οποίος δέχεται τη διαδρομή προς το σενάριο που εκτελείται σε ένα ξεχωριστό νήμα.

const worker = new Worker('path/to/worker.js');

Το σενάριο του worker (worker.js) εκτελείται σε ένα άλλο παγκόσμιο πλαίσιο, που δεν έχει πρόσβαση στο DOM ή στο παγκόσμιο αντικείμενο window. Για την ανταλλαγή δεδομένων μεταξύ του κύριου σεναρίου και του worker, χρησιμοποιούνται οι μέθοδοι postMessage() και ο χειριστής συμβάντων onmessage.

Στο κύριο σενάριο:

const worker = new Worker('worker.js');

// Αποστολή δεδομένων στον worker
worker.postMessage({ data: 'Γειά από το κύριο νήμα!' });

// Επεξεργασία μηνυμάτων από τον worker
worker.onmessage = function(event) {
  console.log('Λήφθηκε από τον worker:', event.data);
};

// Επεξεργασία σφαλμάτων του worker (προαιρετικά)
worker.onerror = function(error) {
  console.error('Σφάλμα στον worker:', error);
};

// Τερματισμός του worker
// worker.terminate();

Στο σενάριο του worker (worker.js):

// Επεξεργασία μηνυμάτων από το κύριο νήμα
self.onmessage = function(event) {
  console.log('Λήφθηκε στον worker:', event.data);

  // Εκτέλεση μακροχρόνιας λειτουργίας (παράδειγμα!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Αποστολή αποτελέσματος πίσω στο κύριο νήμα
  self.postMessage({ result: result, originalData: event.data });
};

// Επεξεργασία σφαλμάτων μέσα στον worker (προαιρετικά)
self.onerror = function(error) {
  console.error('Σφάλμα στον worker:', error);
};

// Ο worker μπορεί να εισάγει άλλα σενάρια
// importScripts('utils.js', 'helper.js');

Οι Web Workers επιτρέπουν την εκτέλεση υπολογιστικά εντατικών εργασιών σε ένα ξεχωριστό νήμα, αποτρέποντας το μπλοκάρισμα του κύριου νήματος του UI και βελτιώνοντας την ανταπόκριση της εφαρμογής. Πρέπει να λαμβάνονται υπόψη οι περιορισμοί: οι workers δεν έχουν άμεση πρόσβαση στο DOM, window, document, localStorage ή sessionStorage. Η ανταλλαγή δεδομένων γίνεται μέσω αντιγραφής τιμών ή με τη χρήση αντικειμένων Transferable για βελτίωση της απόδοσης κατά τη μεταφορά μεγάλου όγκου δεδομένων.

Πώς δημιουργείτε ένα νήμα Web Worker στη JavaScript;