I JavaScript er det flere tilnærminger for å forbedre det generelle brukergrensesnittet til nettstedet. De 'Nettarbeider' er en slik tilnærming som lar hovedtråden fortsette å kjøre uten å bli blokkert. Den består av sin separate JavaScript-motorforekomst, og kan derfor ikke påkalle funksjonaliteten til hovedtråden.
Denne artikkelen vil diskutere hvordan du kan bruke 'Nettarbeider' for multithreading i JavaScript.
Hva er webarbeidere?
'Nettarbeidere' tilsvarer et nettleser-API som gjør at JavaScript kan kjøre oppgavene parallelt/samtidig på en egen/dedikert tråd.
Hva er behovet for nettarbeidere?
Siden JavaScript er entrådet, blokkerer derfor de komplekse JavaScript-kodene grensesnitttråden, dvs. stopper hovedvinduet som takler alle oppgavene for oppdatering, implementering av brukerinndata, osv. I et slikt scenario påvirkes brukeropplevelsen . For å takle dette problemet må 'Nettarbeider' trer i kraft og løser blokkeringen av UI-tråden.
Hvordan bruke webarbeidere for multithreading med JavaScript?
Å lage en 'Nettarbeider' , bruk Worker-konstruktøren. Det er slik at det tar en URL som argument, som tilsvarer arbeidsskriptfilens bane som implementerer ønsket funksjonalitet. For å inkludere arbeiderkoden i en HTML-fil, bruk imidlertid en 'blob' å skrive arbeiderkode.
Syntaks (opprette en nettarbeider)
konst x = ny Arbeider ( 'worker.js' ) ;Syntaks (sende en melding til arbeideren)
konst x = ny Arbeider ( 'worker.js' ) ;
Syntaks (motta en melding fra arbeideren)
x. en melding = funksjon ( begivenhet ) {konsoll. Logg ( begivenhet. data ) ;
} ;
Eksempel: Bruk av 'Web Worker' for å beregne faktorene til et tall i JavaScript
Følgende eksempel bruker 'Arbeider()' konstruktør for å lage en webarbeider og beregne faktoren til et tall:
< html >
< hode >
< h2 stil = 'text-align: center;' > Eksempel på nettarbeidere h2 >
hode >
< kropp >
< manus >
konst x = ny Arbeider ( URL. createObjectURL ( ny Blob ( [
`
// Arbeiderskript
konst faktum = ( n ) => {
hvis ( n == 0 || n == 1 ) {
komme tilbake 1n ;
}
ellers {
komme tilbake BigInt ( n ) * faktum ( BigInt ( n ) - 1n ) ;
}
} ;
selv. en melding = ( begivenhet ) => {
konst Med = faktum ( begivenhet. data ) ;
selv. postmelding ( Med. til String ( ) ) ;
} ; `
] , { type : 'tekst/javascript' } ) ) ) ;
x. postmelding ( 15n ) ;
x. en melding = ( begivenhet ) => {
konst ute = begivenhet. data ;
konsoll. Logg ( 'Faktor av 15 via en nettarbeider->' , ute ) ;
} ;
kropp >
html >
I denne koden bruker du følgende trinn:
- Først spesifiser den oppgitte overskriften.
- Etter det oppretter du en 'Nettarbeider' objekt som har URL-en til Blob-objektet som består av koden for arbeideren.
- Koden dedikert til arbeideren er inkludert i en anonym funksjon som beregner nummerets faktorial via en rekursiv funksjon.
- Arbeideren lytter også etter meldinger sendt via hovedtråden ved å bruke «selv.melding» hendelse, henter faktoren til det beståtte tallet, og gir resultatet til hovedtråden via «postMessage()» metode.
- Opprett en arbeiderforekomst i hovedtråden og send den en melding med nummeret ' 15n '. Her, ' n ' refererer til 'BigInt'-verdien.
- Etter at arbeideren er ferdig med å beregne faktoren, sender den resultatet/utfallet tilbake til hovedtråden ved å bruke «postMessage()» metode.
- Til slutt henter/mottar hovedtråden resultatet i «onmelding» hendelse og returnerer den tilsvarende faktoren til nummeret på konsollen.
Produksjon
Fordeler med webarbeidere
Parallell behandling : Ved å kjøre den samme koden på en parallell måte.
Ingen avbrudd i kodeutførelse: Utførelsen av kode gjøres uavhengig av oppdateringer etc. på gjeldende side.
Bevegelsessporing: All bevegelsesdeteksjon finner sted i bakgrunnsarbeideren.
Aktivert multithreading: Disse muliggjør multithreading i JavaScript.
Forbedret ytelse: Optimaliser ytelsen ved å gjøre intensive/utfordrende oppgaver i separate tråder.
Effektiv brukeropplevelse: Disse unngår å blokkere hovedtråden, noe som resulterer i en responsiv brukeropplevelse.
Begrensninger for nettarbeidere
Det er imidlertid noen begrensninger for webarbeiderne også. Disse er oppgitt som følger:
- Større utnyttelse av minnet.
- Kan ikke oppdatere DOM i en arbeidstråd eller påkalle vindusobjektet.
Konklusjon
'Nettarbeidere' tilsvarer et nettleser-API som gjør at JavaScript kan kjøre oppgavene samtidig på en egen/dedikert tråd. Disse kan brukes ved å ta en URL som argument, som tilsvarer banen til arbeiderskriptfilen. Denne bloggen diskuterte bruken av 'Web Workers' for multithreading i JavaScript.