I JavaScript finns det flera metoder för att förbättra webbplatsens övergripande användargränssnitt. De 'Web Worker' är ett sådant tillvägagångssätt som gör att huvudtråden kan fortsätta att köras utan att blockeras. Den består av sin separata JavaScript-motorinstans och kan därför inte anropa funktionerna i huvudtråden.
Den här artikeln kommer att diskutera hur man använder 'Web Worker' för multithreading i JavaScript.
Vad är webbarbetare?
'Webbetare' motsvarar ett webbläsar-API som gör att JavaScript kan köra uppgifterna parallellt/samtidigt på en separat/dedikerad tråd.
Vad är behovet av webbarbetare?
Eftersom JavaScript är entrådigt blockerar därför de komplexa JavaScript-koderna UI-tråden, dvs. stoppar huvudfönstret som klarar av alla uppgifter för att uppdatera, implementera användarinmatningshändelser, etc. I ett sådant scenario påverkas användarupplevelsen . För att hantera denna fråga, 'Web Worker' träder i kraft och löser blockeringen av UI-tråden.
Hur använder man webbarbetare för multitrådning med JavaScript?
Att göra en 'Web Worker' , använd Worker-konstruktorn. Det är sådant att det tar en URL som argument, vilket motsvarar arbetsskriptfilens sökväg som implementerar den önskade funktionen. Men för att inkludera arbetarkoden i en HTML-fil, använd en 'klick' att skriva arbetarkod.
Syntax (Skapa en webbarbetare)
konst x = ny Arbetstagare ( 'worker.js' ) ;Syntax (Skicka ett meddelande till arbetaren)
konst x = ny Arbetstagare ( 'worker.js' ) ;
Syntax (ta emot ett meddelande från arbetaren)
x. ett meddelande = fungera ( händelse ) {trösta. logga ( händelse. data ) ;
} ;
Exempel: Användning av 'Web Worker' för att beräkna faktorn för ett nummer i JavaScript
Följande exempel använder 'Arbetstagare()' konstruktör för att skapa en webbarbetare och beräkna faktorvärdet för ett tal:
< html >
< huvud >
< h2 stil = 'text-align: center;' > Exempel på webbarbetare h2 >
huvud >
< kropp >
< manus >
konst x = ny Arbetstagare ( URL. createObjectURL ( ny Klick ( [
`
// Arbetarmanus
konst faktum = ( n ) => {
om ( n == 0 || n == 1 ) {
lämna tillbaka 1n ;
}
annan {
lämna tillbaka BigInt ( n ) * faktum ( BigInt ( n ) - 1n ) ;
}
} ;
själv. ett meddelande = ( händelse ) => {
konst Med = faktum ( händelse. data ) ;
själv. skicka meddelande ( Med. att stränga ( ) ) ;
} ; `
] , { typ : 'text/javascript' } ) ) ) ;
x. skicka meddelande ( 15n ) ;
x. ett meddelande = ( händelse ) => {
konst ut = händelse. data ;
trösta. logga ( 'Faktor av 15 via en webbarbetare->' , ut ) ;
} ;
kropp >
html >
I den här koden tillämpar du följande steg:
- Ange först den angivna rubriken.
- Efter det skapar du en 'Web Worker' objekt som har webbadressen till Blob-objektet som innehåller koden för arbetaren.
- Koden dedikerad till arbetaren ingår i en anonym funktion som beräknar numrets faktorial via en rekursiv funktion.
- Arbetaren lyssnar också efter meddelanden som skickas via huvudtråden med hjälp av 'self.onmessage' händelse, hämtar det godkända numrets factorial och ger resultatet till huvudtråden via 'skicka meddelande()' metod.
- Skapa en arbetarinstans i huvudtråden och skicka ett meddelande till den med numret ' 15n ”. Här, ' n ” hänvisar till ”BigInt”-värdet.
- När arbetaren är klar med att beräkna faktorialen, skickar den resultatet/resultatet tillbaka till huvudtråden med hjälp av 'skicka meddelande()' metod.
- Till sist hämtar/tar huvudtråden ut resultatet i 'onmeddelande' händelse och returnerar motsvarande faktor för numret på konsolen.
Produktion
Fördelar med webbarbetare
Parallell bearbetning : Vid körning av samma kod på ett parallellt sätt.
Inget avbrott i kodexekveringen: Exekveringen av kod görs oberoende av uppdateringar etc. på den aktuella sidan.
Rörelsespårning: All rörelsedetektering sker i bakgrundsarbetaren.
Aktiverad multithreading: Dessa möjliggör multithreading i JavaScript.
Förbättrad prestanda: Optimera prestandan genom att göra intensiva/utmanande uppgifter i separata trådar.
Effektiv användarupplevelse: Dessa undviker att blockera huvudtråden, vilket resulterar i en responsiv användarupplevelse.
Begränsningar för webbarbetare
Det finns dock vissa begränsningar för webbarbetarna också. Dessa anges enligt följande:
- Större användning av minne.
- Det går inte att uppdatera DOM i en arbetstråd eller anropa fönsterobjektet.
Slutsats
'Webbetare' motsvarar ett webbläsar-API som gör att JavaScript kan köra uppgifterna samtidigt på en separat/dedikerad tråd. Dessa kan användas genom att ta en URL som argument, vilket motsvarar arbetsskriptfilens sökväg. Den här bloggen diskuterade användningen av 'Web Workers' för multithreading i JavaScript.