Kuidas kasutada veebitöötajaid JavaScriptis mitme lõimega töötlemiseks?

Kuidas Kasutada Veebitootajaid Javascriptis Mitme Loimega Tootlemiseks



JavaScriptis on saidi üldise kasutajaliidese täiustamiseks mitu lähenemisviisi. The 'Veebitöötaja' on üks selline lähenemine, mis võimaldab põhilõime täitmist jätkata ilma blokeerimata. See sisaldab eraldi JavaScripti mootori eksemplari ja seetõttu ei saa see põhilõime funktsioone kasutada.

See artikkel räägib, kuidas seda kasutada 'Veebitöötaja' JavaScriptis mitme lõimega töötlemiseks.







Mis on veebitöötajad?

'Veebitöötajad' vastab brauseri API-le, mis võimaldab JavaScriptil käitada ülesandeid paralleelselt/samaaegselt eraldi/spetsiaalses lõimes.



Milleks on vaja veebitöötajaid?

Kuna JavaScript on ühelõimeline, blokeerivad keerulised JavaScripti koodid kasutajaliidese lõime, st peatavad peaakna, mis tegeleb kõigi värskendamise, kasutaja sisendsündmuste rakendamise jms ülesannetega. Selline stsenaarium mõjutab kasutajakogemust . Selle probleemiga toimetulemiseks 'Veebitöötaja' jõustub ja lahendab kasutajaliidese lõime blokeerimise.



Kuidas kasutada veebitöötajaid JavaScriptiga mitme lõimega töötlemiseks?

Et teha a 'Veebitöötaja' , kasutage Worker konstruktorit. See on selline, et selle argumendiks on URL, mis vastab soovitud funktsiooni rakendava töötaja skriptifaili teele. Töötaja koodi lisamiseks HTML-faili kasutage aga a 'tilk' töötaja koodi kirjutamiseks.





Süntaks (veebitöötaja loomine)

konst x = uus Tööline ( 'tööline.js' ) ;

Süntaks (Töötajale sõnumi saatmine)



konst x = uus Tööline ( 'tööline.js' ) ;

Süntaks (Töötajalt sõnumi saamine)

x. sõnumis = funktsiooni ( sündmus ) {
konsool. logi ( sündmus. andmeid ) ;
} ;

Näide: „Web Workeri” kasutamine arvu faktoriaali arvutamiseks JavaScriptis
Järgmises näites kasutatakse 'Tööline()' konstruktor veebitöötaja loomiseks ja arvu faktoriaali arvutamiseks:

DOCTYPE html >
< html >
< pea >
< h2 stiilis = 'text-align: center;' > Veebitöötajate näide h2 >
pea >
< keha >
< stsenaarium >
konst x = uus Tööline ( URL. looObjectURL ( uus Blob ( [
`
// Töötaja skript
konst fakt = ( n ) => {
kui ( n == 0 || n == 1 ) {
tagasi 1n ;
}
muidu {
tagasi BigInt ( n ) * fakt ( BigInt ( n ) - 1n ) ;
}
} ;
ise. sõnumis = ( sündmus ) => {
konst Koos = fakt ( sündmus. andmeid ) ;
ise. postisõnum ( Koos. toString ( ) ) ;
} ; `
] , { tüüp : 'tekst/javascript' } ) ) ) ;
x. postisõnum ( 15n ) ;
x. sõnumis = ( sündmus ) => {
konst välja = sündmus. andmeid ;
konsool. logi ( 'Factory of 15 Via Web Worker->' , välja ) ;
} ;

keha >

html >

Selles koodis rakendage järgmisi samme.

  • Esiteks täpsustage märgitud pealkiri.
  • Pärast seda looge a 'Veebitöötaja' objekt, millel on töötaja koodi sisaldava Blob-objekti URL.
  • Töötajale pühendatud kood sisaldub anonüümses funktsioonis, mis arvutab rekursiivse funktsiooni kaudu arvu faktoriaali.
  • Samuti kuulab töötaja põhilõime kaudu saadetud sõnumeid kasutades 'self.onmessage' sündmus, otsib läbitud arvu faktoriaali ja annab tulemuse põhilõimele läbi 'postisõnum()' meetod.
  • Looge põhilõimes töötaja eksemplar ja saatke sellele sõnum numbriga ' 15n ”. Siin, ' n ” viitab väärtusele „BigInt”.
  • Kui töötaja on faktoriaali arvutamise lõpetanud, saadab ta tulemuse/tulemuse tagasi põhilõime, kasutades 'postisõnum()' meetod.
  • Lõpuks tõmbab/saab põhilõng tulemuse failis 'on sõnum' sündmus ja tagastab konsoolil oleva numbri vastava faktoriaali.

Väljund

Veebitöötajate eelised

Paralleelne töötlemine : sama koodi paralleelsel käitamisel.

Koodi täitmisel ei esine häireid: Koodi täitmine toimub sõltumata värskendustest jne praegusel lehel.

Liikumise jälgimine: Kogu liikumistuvastus toimub taustatöötajas.

Lubatud mitmelõimeline: Need võimaldavad JavaScriptis mitme lõimega kasutamist.

Täiustatud jõudlus: Optimeerige jõudlust, tehes intensiivseid/väljakutselisi ülesandeid eraldi lõimedes.

Tõhus kasutajakogemus: Need väldivad põhilõime blokeerimist, mille tulemuseks on tundlik kasutajakogemus.

Veebitöötajate piirangud

Siiski on ka veebitöötajatel mõned piirangud. Need on märgitud järgmiselt:

  • Suurem mälukasutus.
  • DOM-i ei saa värskendada töölõimes ega kutsuda aknaobjekti.

Järeldus

'Veebitöötajad' vastab brauseri API-le, mis võimaldab JavaScriptil käitada ülesandeid samal ajal eraldi/spetsiaalses lõimes. Neid saab kasutada, võttes argumendiks URL-i, mis vastab töötaja skriptifaili teele. Selles ajaveebis arutati veebitöötajate kasutamist JavaScriptis mitme lõimega töötlemiseks.