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

Web worker’y to sposób wykonywania skryptów w wątkach w tle, oddzielonych od głównego wątku interfejsu użytkownika.

Ich główne cele:

• Zwiększenie wydajności: Przeniesienie zasobożernych zadań (skomplikowane obliczenia, przetwarzanie dużych ilości danych, parsowanie) z głównego wątku, który odpowiada za renderowanie interfejsu i obsługę zdarzeń użytkownika. Zapobiega to "zawieszaniu" strony i poprawia responsywność aplikacji.
• Paralelizm: Umożliwia wykonywanie wielu zadań jednocześnie, efektywniej wykorzystując procesory wielordzeniowe.

Istnieją trzy typy web workerów:

1. Dedicated Workers: Powiązane z konkretną stroną i dostępne tylko dla niej.
2. Shared Workers: Mogą być dostępne z wielu stron lub kart tej samej domeny.
3. Service Workers: Działają jak proxy sieciowe, przechwytując żądania sieciowe i umożliwiając implementację funkcji offline, powiadomień push i innych możliwości progresywnych aplikacji internetowych (PWA).

Zasady działania:

• Oddzielny kontekst: Worker ma własny obiekt globalny i dostęp do podzbioru API przeglądarki (brak dostępu do DOM, window, document, parent).
• Wymiana wiadomości: Interakcja między głównym wątkiem a workerem odbywa się za pomocą wiadomości postMessage() i obsługi zdarzeń onmessage. Dane są przesyłane jako wartość (kopiowane) lub jako odwołanie (Obiekty Transferowalne).

Przykład użycia Dedicated Worker:

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

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

worker.postMessage('Rozpocznij skomplikowaną operację'); // Wysyłanie wiadomości do workera

// worker.js (plik workera)
onmessage = (event) => {
  // Obsługa wiadomości z głównego wątku
  console.log('Odebrano z głównego wątku:', event.data);

  // Wykonanie skomplikowanego zadania
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Wysyłanie wyniku z powrotem
  postMessage(result);
};