V JavaScriptu obstaja več pristopov za izboljšanje celotnega uporabniškega vmesnika spletnega mesta. The 'Spletni delavec' je en tak pristop, ki omogoča, da se glavna nit še naprej izvaja, ne da bi bila blokirana. Vsebuje svoj ločen primerek motorja JavaScript in zato ne more priklicati funkcij glavne niti.
Ta članek bo razpravljal o tem, kako uporabiti 'Spletni delavec' za večnitnost v JavaScriptu.
Kaj so spletni delavci?
'Spletni delavci' ustreza API-ju brskalnika, ki omogoča JavaScriptu, da izvaja naloge vzporedno/istočasno v ločeni/namenski niti.
Kakšna je potreba po spletnih delavcih?
Ker je JavaScript enoniten, zato zapletene kode JavaScript blokirajo nit uporabniškega vmesnika, tj. ustavijo glavno okno, ki se spopada z vsemi nalogami za osveževanje, izvajanje dogodkov uporabniškega vnosa itd. V takem scenariju je prizadeta uporabniška izkušnja . Da bi se spopadli s to težavo, 'Spletni delavec' začne veljati in odpravi blokiranje niti uporabniškega vmesnika.
Kako uporabljati spletne delavce za večnitnost z JavaScriptom?
Za izdelavo a 'Spletni delavec' , uporabite konstruktor Worker. Tako je, da za svoj argument vzame URL, ki ustreza poti datoteke delovnega skripta, ki izvaja želeno funkcionalnost. Če želite kodo delavca vključiti v datoteko HTML, uporabite a 'blob' za pisanje delovne kode.
Sintaksa (ustvarjanje spletnega delavca)
konst x = novo Delavec ( 'worker.js' ) ;Sintaksa (pošiljanje sporočila delavcu)
konst x = novo Delavec ( 'worker.js' ) ;
Sintaksa (prejem sporočila od delavca)
x. onmessage = funkcijo ( dogodek ) {konzola. dnevnik ( dogodek. podatke ) ;
} ;
Primer: uporaba »spletnega delavca« za izračun faktoriala števila v JavaScriptu
Naslednji primer uporablja “Delavec()” konstruktor za ustvarjanje spletnega delavca in izračun faktoriala števila:
< html >
< glavo >
< slog h2 = 'poravnava besedila: sredina;' > Primer spletnih delavcev h2 >
glavo >
< telo >
< scenarij >
konst x = novo Delavec ( URL. createObjectURL ( novo Blob ( [
`
// Skript delavca
konst dejstvo = ( n ) => {
če ( n == 0 || n == 1 ) {
vrnitev 1n ;
}
drugače {
vrnitev BigInt ( n ) * dejstvo ( BigInt ( n ) - 1n ) ;
}
} ;
sebe. onmessage = ( dogodek ) => {
konst z = dejstvo ( dogodek. podatke ) ;
sebe. postMessage ( z. toString ( ) ) ;
} ; `
] , { vrsta : 'besedilo/javascript' } ) ) ) ;
x. postMessage ( 15n ) ;
x. onmessage = ( dogodek ) => {
konst ven = dogodek. podatke ;
konzola. dnevnik ( 'Faktoriel 15 prek spletnega delavca-> ' , ven ) ;
} ;
telo >
html >
V tej kodi uporabite naslednje korake:
- Najprej določite navedeni naslov.
- Po tem ustvarite a 'Spletni delavec' objekt, ki ima URL objekta Blob, ki vsebuje kodo za delavca.
- Koda, namenjena delavcu, je vključena v anonimno funkcijo, ki izračuna faktoriel števila prek rekurzivne funkcije.
- Prav tako delavec posluša sporočila, poslana prek glavne niti z uporabo “self.onmessage” dogodka, pridobi faktorial posredovanega števila in posreduje izid glavni niti prek »postMessage()« metoda.
- V glavni niti ustvarite delovni primerek in mu pošljite sporočilo s številko ' 15n ”. Tukaj, ' n « se nanaša na vrednost »BigInt«.
- Ko delavec konča z računanjem faktoriala, pošlje rezultat/izid nazaj v glavno nit z uporabo »postMessage()« metoda.
- Nazadnje glavna nit pridobi/prejme rezultat v “onmessage” dogodek in vrne ustrezen dejavnik števila na konzoli.
Izhod
Prednosti spletnih delavcev
Vzporedna obdelava : V primeru izvajanja iste kode na vzporeden način.
Brez motenj pri izvajanju kode: Izvajanje kode se izvaja ne glede na osvežitve itd. na trenutni strani.
Sledenje gibanju: Vse zaznavanje gibanja poteka v delavcu v ozadju.
Omogočeno večnitnost: Ti omogočajo večnitnost v JavaScriptu.
Izboljšana zmogljivost: Optimizirajte zmogljivost z izvajanjem intenzivnih/zahtevnih nalog v ločenih nitih.
Učinkovita uporabniška izkušnja: S tem se prepreči blokiranje glavne niti, kar zagotavlja odzivno uporabniško izkušnjo.
Omejitve spletnih delavcev
Vendar pa obstajajo tudi nekatere omejitve spletnih delavcev. Ti so navedeni, kot sledi:
- Večji izkoristek pomnilnika.
- Ni mogoče posodobiti DOM v delovni niti ali priklicati okenskega objekta.
Zaključek
'Spletni delavci' ustreza API-ju brskalnika, ki omogoča JavaScriptu, da istočasno izvaja naloge v ločeni/namenski niti. Te je mogoče uporabiti tako, da kot argument vzamete URL, ki ustreza poti datoteke delovnega skripta. Ta blog je razpravljal o uporabi »spletnih delavcev« za večnitnost v JavaScriptu.