Wat zijn web workers en waar zijn ze voor bedoeld…

Web-werkers zijn een manier om JavaScript-code uit te voeren in een achtergrondthread, gescheiden van de hoofd-UI-thread van de browser.

Doel:

Het uitvoeren van resource-intensieve berekeningen zonder de hoofdthread te blokkeren, waardoor de interface niet bevriest.
Het verwerken van grote gegevens of het uitvoeren van lange operaties (bijvoorbeeld parsing, compressie, netwerkverzoeken in sommige gevallen) op de achtergrond.
Het verbeteren van de prestaties en de responsiviteit van webapplicaties.

Types web workers:

Dedicated Worker: Geassocieerd met het script dat het heeft gemaakt.
Shared Worker: Kan gedeeld worden tussen meerdere scripts die in verschillende vensters of tabbladen van hetzelfde domein draaien.
Service Worker: Intercepteert netwerkverzoeken, beheert caching, biedt offline toegang, ondersteunt pushmeldingen.

Voorbeeld van het maken en gebruiken van een Dedicated Worker:

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

// Bericht naar de worker sturen
worker.postMessage('Begin zware berekeningen');

// Bericht van de worker ontvangen
worker.onmessage = function(event) {
  console.log('Ontvangen van de worker:', event.data);
};

// worker.js (worker code)
self.onmessage = function(event) {
  console.log('Ontvangen in de worker:', event.data);

  // Simulatie van zware berekeningen
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Bericht terug naar de hoofdthread sturen
  self.postMessage('Berekeningen voltooid, resultaat: ' + result);
};

Beperkingen:

Geen directe toegang tot DOM.
Sommige globale variabelen van de hoofdthread (bijvoorbeeld window, document) kunnen niet worden gebruikt.
Communicatie gebeurt via asynchrone berichtwisseling (postMessage en onmessage/addEventListener('message')).
Gegevens tussen threads worden gekopieerd (structured clone algorithm), maar voor grote gegevens kunnen Transferable Objects worden gebruikt om door verwijzing te worden overgedragen (verlies van toegang in de oorspronkelijke thread).

Wat zijn web workers en waar zijn ze voor bedoeld?