I JavaScript er der flere tilgange til at forbedre webstedets overordnede brugergrænseflade. Det 'Webmedarbejder' er en sådan tilgang, der tillader hovedtråden at blive ved med at udføre uden at blive blokeret. Den omfatter dens separate JavaScript-motorinstans og kan derfor ikke påberåbe sig funktionaliteterne i hovedtråden.
Denne artikel vil diskutere, hvordan man bruger 'Webmedarbejder' til multithreading i JavaScript.
Hvad er Web Workers?
'Webarbejdere' svarer til en browser API, der gør det muligt for JavaScript at køre opgaverne parallelt/på samme tid på en separat/dedikeret tråd.
Hvad er behovet for webarbejdere?
Da JavaScript er single-threaded, blokerer de komplekse JavaScript-koder derfor UI-tråden, dvs. stopper hovedvinduet, der klarer alle opgaverne til opdatering, implementering af brugerinputhændelser osv. I et sådant scenarie påvirkes brugeroplevelsen . For at klare dette problem skal 'Webmedarbejder' træder i kraft og løser blokeringen af UI-tråden.
Hvordan bruger man webarbejdere til multithreading med JavaScript?
At lave en 'Webmedarbejder' , brug Worker-konstruktøren. Det er sådan, at det tager en URL som sit argument, som svarer til arbejdsscriptfilens sti, der implementerer den ønskede funktionalitet. For at inkludere arbejderkoden i en HTML-fil skal du dog bruge en 'klat' at skrive arbejderkode.
Syntaks (oprettelse af en webarbejder)
konst x = ny Arbejder ( 'worker.js' ) ;Syntaks (sende en besked til arbejderen)
konst x = ny Arbejder ( 'worker.js' ) ;
Syntaks (modtagelse af en besked fra arbejderen)
x. en besked = fungere ( begivenhed ) {konsol. log ( begivenhed. data ) ;
} ;
Eksempel: Anvendelse af 'Web Worker' til at beregne faktoren for et tal i JavaScript
Følgende eksempel bruger 'Arbejder()' konstruktør til at oprette en webarbejder og beregne faktoren for et tal:
< html >
< hoved >
< h2 stil = 'text-align: center;' > Eksempel på webarbejdere h2 >
hoved >
< legeme >
< manuskript >
konst x = ny Arbejder ( URL. createObjectURL ( ny Blob ( [
`
// Arbejdsmanuskript
konst faktum = ( n ) => {
hvis ( n == 0 || n == 1 ) {
Vend tilbage 1n ;
}
andet {
Vend tilbage BigInt ( n ) * faktum ( BigInt ( n ) - 1n ) ;
}
} ;
selv. en besked = ( begivenhed ) => {
konst Med = faktum ( begivenhed. data ) ;
selv. postBesked ( Med. til String ( ) ) ;
} ; `
] , { type : 'tekst/javascript' } ) ) ) ;
x. postBesked ( 15n ) ;
x. en besked = ( begivenhed ) => {
konst ud = begivenhed. data ;
konsol. log ( 'Faktor af 15 via en webarbejder->' , ud ) ;
} ;
legeme >
html >
Anvend følgende trin i denne kode:
- Angiv først den angivne overskrift.
- Derefter skal du oprette en 'Webmedarbejder' objekt med URL'en til Blob-objektet, der omfatter koden til arbejderen.
- Koden dedikeret til arbejderen er inkluderet i en anonym funktion, der beregner tallets fakultet via en rekursiv funktion.
- Arbejderen lytter også efter beskeder sendt via hovedtråden ved hjælp af 'selv.besked' hændelse, henter factorialet for det beståede nummer og giver resultatet til hovedtråden via 'postMessage()' metode.
- I hovedtråden skal du oprette en arbejderforekomst og sende den en besked med nummeret ' 15n ”. Her, ' n ' refererer til 'BigInt'-værdien.
- Efter at arbejderen er færdig med at beregne faktoren, sender den resultatet/resultatet tilbage til hovedtråden ved hjælp af 'postMessage()' metode.
- Til sidst henter/modtager hovedtråden resultatet i 'onbesked' hændelse og returnerer den tilsvarende faktor for nummeret på konsollen.
Produktion
Fordele ved Web Workers
Parallel behandling : I tilfælde af at køre den samme kode på en parallel måde.
Ingen afbrydelse i kodeudførelse: Udførelsen af kode sker uafhængigt af opdateringer osv. på den aktuelle side.
Bevægelsessporing: Al bevægelsesdetektering foregår i baggrundsarbejderen.
Aktiveret multithreading: Disse muliggør multithreading i JavaScript.
Forbedret ydeevne: Optimer ydeevnen ved at udføre intensive/udfordrende opgaver i separate tråde.
Effektiv brugeroplevelse: Disse undgår at blokere hovedtråden, hvilket resulterer i en responsiv brugeroplevelse.
Begrænsninger for webarbejdere
Der er dog også nogle begrænsninger for webarbejderne. Disse er angivet som følger:
- Større udnyttelse af hukommelsen.
- Kan ikke opdatere DOM i en arbejdstråd eller kalde vinduesobjektet.
Konklusion
'Webarbejdere' svarer til en browser API, der gør det muligt for JavaScript at køre opgaverne på samme tid på en separat/dedikeret tråd. Disse kan bruges ved at tage en URL som argument, som svarer til arbejdsscriptfilens sti. Denne blog diskuterede brugen af 'Web Workers' til multithreading i JavaScript.