Czym są Web Workers i do czego służą?

Web Workers umożliwiają wykonywanie operacji intensywnych w zasobach w wątkach tła, nie blokując głównego wątku wykonywania JavaScript, który odpowiada za renderowanie interfejsu użytkownika. Zapobiega to zawieszaniu się strony i poprawia responsywność aplikacji, szczególnie podczas pracy z dużymi ilościami danych, obliczeniami lub żądaniami sieciowymi.

Główne typy Worker:

• Dedykowany Worker: Tworzony za pomocą new Worker('worker.js'). Działa tylko z stroną, która go utworzyła, i jest zarządzany bezpośrednio z tego skryptu.
• Shared Worker: Tworzony za pomocą new SharedWorker('worker.js'). Może być dostępny z wielu skryptów w różnych oknach lub zakładkach tego samego źródła.
• Service Worker: Działa jako proxy między przeglądarką a siecią. Używany do buforowania zasobów, autonomicznej pracy i wdrażania powiadomień push.

Komunikacja między głównym wątkiem a Workerem odbywa się asynchronicznie za pomocą wiadomości:

• postMessage(): do wysyłania danych z jednego wątku do drugiego.
• Obsługa zdarzenia onmessage: do odbierania danych w innym wątku.

Ograniczenia Web Workers:

• Nie mają bezpośredniego dostępu do DOM.
• Nie mają dostępu do obiektów window i document.
• Nie mają dostępu do niektórych zmiennych globalnych i funkcji głównego wątku.

Przykład użycia Dedykowanego Workera:

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

worker.addEventListener('message', (event) => {
  console.log('Odebrano wiadomość od Workera:', event.data);
});

worker.postMessage('Cześć z głównego wątku!');

// worker.js
self.addEventListener('message', (event) => {
  console.log('Odebrano wiadomość z głównego wątku:', event.data);
  self.postMessage('Cześć z Workera!');
});