Hoe maak je een Web Worker-thread in JavaScript?

Om een Web Worker in JavaScript te maken, wordt de constructor Worker gebruikt, die het pad naar het script accepteert dat in een aparte thread wordt uitgevoerd.

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

Het worker-script (worker.js) wordt uitgevoerd in een andere globale context, die geen toegang heeft tot de DOM of het globale object window. Voor het uitwisselen van gegevens tussen het hoofdscript en de worker worden de methoden postMessage() en de gebeurtenishandler onmessage gebruikt.

In het hoofdscript:

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

// Gegevens naar de worker sturen
worker.postMessage({ data: 'Hallo vanuit de hoofdthread!' });

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

// Fouten van de worker verwerken (optioneel)
worker.onerror = function(error) {
  console.error('Fout in de worker:', error);
};

// Worker beëindigen
// worker.terminate();

In het worker-script (worker.js):

// Verwerking van berichten van de hoofdthread
self.onmessage = function(event) {
  console.log('Ontvangen in de worker:', event.data);

  // Uitvoeren van een langdurige operatie (voorbeeld!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Resultaat terugsturen naar de hoofdthread
  self.postMessage({ result: result, originalData: event.data });
};

// Fouten binnen de worker verwerken (optioneel)
self.onerror = function(error) {
  console.error('Fout in de worker:', error);
};

// De worker kan andere scripts importeren
// importScripts('utils.js', 'helper.js');

Web Workers maken het mogelijk om resource-intensieve berekeningen in een aparte thread uit te voeren, waardoor de blokkering van de hoofd-UI-thread wordt voorkomen en de responsiviteit van de applicatie wordt verbeterd. Houd rekening met de beperkingen: workers hebben geen directe toegang tot de DOM, window, document, localStorage of sessionStorage. Gegevensuitwisseling gebeurt door het kopiëren van waarden of met behulp van Transferable objecten om de prestaties bij het overdragen van grote hoeveelheden gegevens te verbeteren.