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!