Wat zijn web workers en waar zijn ze voor bedoeld…

Web workers zijn een manier om scripts uit te voeren in achtergrondthreads, gescheiden van de hoofd-UI-thread.

Hun belangrijkste doel:

Verbetering van de prestaties: Het verplaatsen van resource-intensieve taken (complexe berekeningen, verwerking van grote hoeveelheden gegevens, parsing) van de hoofdthread, die verantwoordelijk is voor het renderen van de interface en het afhandelen van gebruikersgebeurtenissen. Dit voorkomt dat de pagina vastloopt en verbetert de responsiviteit van de applicatie.
Parallelisme: Het mogelijk maken om meerdere taken gelijktijdig uit te voeren, waardoor multi-core processors efficiënter worden benut.

Er zijn drie soorten web workers:

Dedicated Workers: Geassocieerd met een specifieke pagina en alleen toegankelijk voor die pagina.
Shared Workers: Kunnen toegankelijk zijn vanaf meerdere pagina's of tabbladen van hetzelfde domein.
Service Workers: Werken als netwerkproxies, onderscheppen netwerkverzoeken en maken offline functionaliteit, pushmeldingen en andere mogelijkheden van progressive web apps (PWA) mogelijk.

Werkingsprincipes:

Aparte context: De worker heeft zijn eigen globale object en toegang tot een subset van de API van de browser (geen toegang tot DOM, window, document, parent).
Berichtuitwisseling: De interactie tussen de hoofdthread en de worker gebeurt via berichten met postMessage() en de event handler onmessage. Gegevens worden door waarde (kopieën) of door verwijzing (Transferable Objects) overgedragen.

Voorbeeld van het gebruik van een Dedicated Worker:

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

worker.onmessage = (event) => {
  // Verwerking van het bericht van de worker
  console.log('Ontvangen van de worker:', event.data);
};

worker.postMessage('Start complexe operatie'); // Bericht sturen naar de worker

// worker.js (workerbestand)
onmessage = (event) => {
  // Verwerking van het bericht van de hoofdthread
  console.log('Ontvangen van de hoofdthread:', event.data);

  // Uitvoeren van een complexe taak
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Resultaat terugsturen
  postMessage(result);
};

Wat zijn web workers en waar zijn ze voor bedoeld?