Czym są web worker i do czego służą?

Web workery to sposób uruchamiania kodu JavaScript w tle, oddzielonym od głównego wątku interfejsu użytkownika przeglądarki.

Cel:

• Wykonywanie obliczeń zasobożernych bez blokowania głównego wątku, co zapobiega zawieszaniu się interfejsu.
• Przetwarzanie dużych danych lub wykonywanie długotrwałych operacji (np. parsowanie, kompresja, żądania sieciowe w niektórych przypadkach) w tle.
• Poprawa wydajności i responsywności aplikacji internetowych.

Typy web workerów:

1. Dedicated Worker: Powiązany z skryptem, który go utworzył.
2. Shared Worker: Może być współdzielony między kilkoma skryptami działającymi w różnych oknach lub zakładkach tej samej domeny.
3. Service Worker: Przechwytuje żądania sieciowe, zarządza pamięcią podręczną, zapewnia dostęp offline, obsługuje powiadomienia push.

Przykład tworzenia i użycia Dedicated Worker:

// main.js (główny wątek)
const worker = new Worker('worker.js');

// Wysyłanie wiadomości do workera
worker.postMessage('Rozpocznij ciężkie obliczenia');

// Odbieranie wiadomości od workera
worker.onmessage = function(event) {
  console.log('Odebrane od workera:', event.data);
};

// worker.js (kod workera)
self.onmessage = function(event) {
  console.log('Odebrano w workerze:', event.data);

  // Symulacja ciężkich obliczeń
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Wysyłanie wiadomości z powrotem do głównego wątku
  self.postMessage('Obliczenia zakończone, wynik: ' + result);
};

Ograniczenia:

• Brak bezpośredniego dostępu do DOM.
• Nie można używać niektórych zmiennych globalnych głównego wątku (np. window, document).
• Komunikacja odbywa się przez asynchroniczną wymianę wiadomości (postMessage i onmessage/addEventListener('message')).
• Dane między wątkami są przesyłane przez kopiowanie (algorytm klonowania strukturalnego), ale dla dużych danych można użyć Transferable Objects do przesyłania przez referencję (z utratą dostępu w oryginalnym wątku).