Jak utworzyć wątek Web Worker w JavaScript?

Aby utworzyć Web Workera w JavaScript, używa się konstruktora Worker, który przyjmuje ścieżkę do skryptu wykonywanego w osobnym wątku.

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

Skrypt workera (worker.js) jest wykonywany w innym kontekście globalnym, który nie ma dostępu do DOM ani do obiektu globalnego window. Do wymiany danych między głównym skryptem a workerem używa się metod postMessage() i obsługi zdarzeń onmessage.

W głównym skrypcie:

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

// Wysyłanie danych do workera
worker.postMessage({ data: 'Cześć z głównego wątku!' });

// Obsługa wiadomości od workera
worker.onmessage = function(event) {
  console.log('Odebrano od workera:', event.data);
};

// Obsługa błędów workera (opcjonalnie)
worker.onerror = function(error) {
  console.error('Błąd w workerze:', error);
};

// Zakończenie pracy workera
// worker.terminate();

W skrypcie workera (worker.js):

// Obsługa wiadomości od głównego wątku
self.onmessage = function(event) {
  console.log('Odebrano w workerze:', event.data);

  // Wykonanie długotrwałej operacji (przykład!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Wysłanie wyniku z powrotem do głównego wątku
  self.postMessage({ result: result, originalData: event.data });
};

// Obsługa błędów wewnątrz workera (opcjonalnie)
self.onerror = function(error) {
  console.error('Błąd w workerze:', error);
};

// Worker może importować inne skrypty
// importScripts('utils.js', 'helper.js');

Web Workers pozwalają na przeniesienie obliczeń intensywnych do osobnego wątku, co zapobiega blokowaniu głównego wątku interfejsu użytkownika i poprawia responsywność aplikacji. Należy pamiętać o ograniczeniach: workery nie mają bezpośredniego dostępu do DOM, window, document, localStorage ani sessionStorage. Wymiana danych odbywa się przez kopiowanie wartości lub z użyciem obiektów Transferable, co zwiększa wydajność przy przesyłaniu dużych ilości danych.