JavaScript Academy · Les

Een Web Worker maken

Start een achtergrondthread voor werk.

Les 1 van 413 stappen

Een Web Worker maken is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Waarom Web Workers?

JavaScript draait op één hoofdthread. Een lange berekening blokkeert alles: de interface loopt vast en klikken reageren niet meer. Web Workers voeren scripts uit op een achtergrondthread, zodat de pagina responsief blijft.

Een worker maken

Start een worker door een script-URL door te geven aan de constructor Worker. De browser laadt dat bestand en voert het uit op een afzonderlijke thread.

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

Het workerscript

Het bestand van de worker bevat gewone JavaScript, maar draait in zijn eigen globale bereik (geen window en geen document). De worker communiceert uitsluitend via berichten.

// worker.js
console.log('worker started');
// This runs off the main thread.

Twee afzonderlijke globale omgevingen

De hoofdpagina en de worker hebben elk hun eigen globale bereik en geheugen. Ze kunnen variabelen niet rechtstreeks delen; ze wisselen kopieën van gegevens uit via berichten.

Hoofdthread: window, DOM, interface
Workerthread: self, berekeningen, geen DOM

Self in de worker

Binnen een worker is het globale object self (een DedicatedWorkerGlobalScope). Je koppelt er handlers aan en roept er API's op, hoewel self vaak impliciet is.

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

Moduleworkers

Je kunt een worker maken die de ES-module import gebruikt door de optie type: 'module' door te geven. Zo kan de worker op een overzichtelijke manier andere modules importeren.

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

Scripts importeren (klassiek)

Gebruik in een klassieke worker (zonder modules) importScripts om extra scripts synchroon in het bereik van de worker te laden.

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

Een worker beëindigen

Stop een worker vanuit de hoofdthread met worker.terminate(), of van binnenuit met self.close(). Zo komen de thread en het bijbehorende geheugen vrij.

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

Fouten van workers afhandelen

Luister naar de gebeurtenis error op de worker om niet-afgevangen uitzonderingen op te vangen die daarin worden veroorzaakt. De gebeurtenis bevat het bericht, de bestandsnaam en het regelnummer.

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

Vereiste van dezelfde oorsprong

Het workerscript moet vanaf dezelfde oorsprong als de pagina worden aangeboden, of via een Blob-URL. Je kunt een worker niet rechtstreeks vanaf een willekeurige URL van een andere oorsprong laden.

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

Dedicated versus Shared

Een Worker is dedicated: die is gekoppeld aan de pagina die hem heeft gemaakt. Meerdere pagina's van dezelfde oorsprong kunnen een SharedWorker bereiken. Deze cursus richt zich op dedicated workers.

Korte toets

Toets je begrip van het maken van Web Workers.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd Web Workers te maken:

new Worker('worker.js') start een achtergrondthread.
De worker heeft zijn eigen globale object (self) en geen DOM.
Gebruik type: 'module' voor imports, of importScripts in klassieke workers.
terminate() / self.close() stopt de worker.
Workers moeten dezelfde oorsprong hebben.

Vervolgens bekijken we het uitwisselen van berichten tussen threads.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Een Web Worker maken” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Een Web Worker maken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Een Web Worker maken”?

Start een achtergrondthread voor werk. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Een Web Worker maken”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy