Wat zijn Web Workers en waar zijn ze voor nodig?

Web Workers maken het mogelijk om resource-intensieve operaties uit te voeren in achtergrondthreads, zonder de hoofdthread van JavaScript-uitvoering te blokkeren, die verantwoordelijk is voor het renderen van de gebruikersinterface. Dit voorkomt dat de pagina vastloopt en verbetert de responsiviteit van de applicatie, vooral bij het werken met grote hoeveelheden gegevens, berekeningen of netwerkverzoeken.

Belangrijkste typen Worker:

• Dedicated Worker: Gemaakt met new Worker('worker.js'). Werkt alleen met de pagina die het heeft gemaakt en wordt direct beheerd vanuit het script van die pagina.
• Shared Worker: Gemaakt met new SharedWorker('worker.js'). Kan toegankelijk zijn vanaf meerdere scripts in verschillende vensters of tabbladen van dezelfde bron.
• Service Worker: Werkt als een proxy tussen de browser en het netwerk. Gebruikt voor resource caching, autonome werking en implementatie van pushmeldingen.

Communicatie tussen de hoofdthread en de Worker gebeurt asynchroon via berichten:

• postMessage(): om gegevens van de ene naar de andere thread te sturen.
• onmessage event handler: om gegevens te ontvangen in een andere thread.

Beperkingen van Web Workers:

• Geen directe toegang tot DOM.
• Geen toegang tot window en document objecten.
• Geen toegang tot sommige globale variabelen en functies van de hoofdthread.

Voorbeeld van het gebruik van een Dedicated Worker:

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

worker.addEventListener('message', (event) => {
  console.log('Ontvangen bericht van Worker:', event.data);
});

worker.postMessage('Hallo vanuit de hoofdthread!');

// worker.js
self.addEventListener('message', (event) => {
  console.log('Ontvangen bericht vanuit hoofdthread:', event.data);
  self.postMessage('Hallo vanuit Worker!');
});