In een tijd waarin websites en webapplicaties steeds zwaarder leunen op JavaScript, wordt het belang van multi-threading steeds groter. Zonder deze techniek, die ervoor zorgt dat taken parallel worden uitgevoerd, kunnen lange laadtijden het interactieve karakter van een pagina aantasten.
Multi-threading JavaScript met de Web Workers API
Het probleem met single-threaded JavaScript
Het onderstaande diagram illustreert het issue. De groene balk staat voor de hoofd-thread, terwijl de rode balk een intensieve taak vertegenwoordigt. Deze taak verhindert gebruikersinteractie totdat de taak is voltooid, wat Google, in relatie tot hun Core Web Vitals de First Input Delay (FID) noemt.
Multi-threading
Dit probleem wordt opgelost door gebruik te maken van multi-threading. Hierbij wordt bepaalde JavaScript-code parallel aan de hoofd-thread uitgevoerd, waardoor de gebruiker interactie met de pagina kan hebben terwijl berekeningen plaatsvinden.
Web Workers API
De techniek die je in JavaScript gebruikt voor multi-threading heet de Web Workers API (Application Programming Interface). Je kunt vanuit de hoofd-thread een ‘Worker’ aanmaken, die specifieke code uitvoert. Het resultaat van deze berekeningen wordt teruggestuurd naar de hoofd-thread zodra ze zijn voltooid. Een web worker omvat een ‘event handler’, waarin wordt gedefinieerd wat de Worker moet uitvoeren nadat deze zijn input heeft ontvangen. In de hoofd-thread wordt ook een ‘event handler’ gedefinieerd, die bepaalt wat er moet gebeuren wanneer de Worker zijn resultaat heeft teruggestuurd.
De code in de praktijk
In het rechter venster staat een stukje JavaScript met een ‘langzame functie’. In de twee linker vensters staat dezelfde code, maar de trage functie wordt uitgevoerd in de Worker.
In de console is te zien dat de pagina met de worker binnen 2 milliseconden klaar is, terwijl die zonder de worker 1631 milliseconden bezig is.
Optimaliseer je webapplicaties met Web Workers!
Klaar om de kracht van multi-threading in JavaScript te benutten en je webapplicaties te optimaliseren? Ontdek meer over de Web Workers API en hoe Webwijs je kan ondersteunen bij het verbeteren van de prestaties van je projecten. Neem vandaag nog contact met ons op voor advies op maat!
Meer informatie over dit onderwerp? Joris maakt je volledig webwijs. Keertje afspreken?
Neem contact opMogen we jou ook webwijs maken? We zitten vol frisse ideeën waar we jou graag verder mee helpen.
Daag ons uit