U JavaScriptu postoji više pristupa poboljšanju cjelokupnog korisničkog sučelja stranice. The “Web radnik” je jedan takav pristup koji omogućuje glavnoj niti da nastavi s izvođenjem bez blokiranja. Sastoji se od svoje zasebne instance JavaScript motora i stoga ne može pozvati funkcije glavne niti.
Ovaj članak govori o tome kako ga koristiti “Web radnik” za višenitnost u JavaScriptu.
Što su web radnici?
“Web radnici” odgovara API-ju preglednika koji omogućuje JavaScriptu paralelno/istovremeno pokretanje zadataka na zasebnoj/namjenskoj niti.
Koja je potreba za web radnicima?
Budući da je JavaScript jednonitni, stoga složeni JavaScript kodovi blokiraju nit korisničkog sučelja, tj. zaustavljaju glavni prozor koji se nosi sa svim zadacima za osvježavanje, implementaciju događaja korisničkog unosa itd. U takvom scenariju utječe na korisničko iskustvo . Kako bi se nosio s ovim problemom, “Web radnik” stupa na snagu i rješava blokiranje UI niti.
Kako koristiti web radnike za višenitnost s JavaScriptom?
Za izradu a “Web radnik” , koristite konstruktor radnika. Takav je da uzima URL kao svoj argument, koji odgovara putanji datoteke radne skripte koja implementira željenu funkcionalnost. Međutim, za uključivanje radnog koda u HTML datoteku, upotrijebite a “mrljica” napisati kod radnika.
Sintaksa (stvaranje web radnika)
konst x = novi Radnik ( 'radnik.js' ) ;Sintaksa (slanje poruke radniku)
konst x = novi Radnik ( 'radnik.js' ) ;
Sintaksa (Primanje poruke od radnika)
x. onmessage = funkcija ( događaj ) {konzola. log ( događaj. podaci ) ;
} ;
Primjer: korištenje 'web radnika' za izračunavanje faktorijela broja u JavaScriptu
Sljedeći primjer koristi 'Radnik()' konstruktor za stvaranje web worker-a i izračunavanje faktorijela broja:
< html >
< glavu >
< h2 stilu = 'poravnavanje teksta: centar;' > Primjer web radnika h2 >
glavu >
< tijelo >
< skripta >
konst x = novi Radnik ( URL. createObjectURL ( novi Mrlja ( [
`
// Radnička skripta
konst činjenica = ( n ) => {
ako ( n == 0 || n == 1 ) {
povratak 1n ;
}
drugo {
povratak BigInt ( n ) * činjenica ( BigInt ( n ) - 1n ) ;
}
} ;
sebe. onmessage = ( događaj ) => {
konst S = činjenica ( događaj. podaci ) ;
sebe. postMessage ( S. toString ( ) ) ;
} ; `
] , { tip : 'tekst/javascript' } ) ) ) ;
x. postMessage ( 15n ) ;
x. onmessage = ( događaj ) => {
konst van = događaj. podaci ;
konzola. log ( 'Faktorijel od 15 putem Web Worker-> ' , van ) ;
} ;
tijelo >
html >
U ovom kodu primijenite sljedeće korake:
- Prvo navedite navedeni naslov.
- Nakon toga kreirajte a “Web radnik” objekt koji ima URL Blob objekta koji sadrži kod za radnika.
- Kod namijenjen radniku uključen je u anonimnu funkciju koja izračunava faktorijel broja putem rekurzivne funkcije.
- Također, radnik sluša poruke poslane putem glavne niti koristeći “self.onmessage” događaja, dohvaća faktorijel proslijeđenog broja i daje ishod glavnoj niti putem “postMessage()” metoda.
- U glavnoj niti kreirajte radnu instancu i pošaljite joj poruku s brojem ' 15n ”. Ovdje, ' n ” odnosi se na vrijednost „BigInt”.
- Nakon što radnik završi s izračunavanjem faktorijela, šalje rezultat/ishod natrag u glavnu nit koristeći “postMessage()” metoda.
- Na kraju, glavna nit dohvaća/prima ishod u “na poruku” događaj i vraća odgovarajući faktorijel broja na konzoli.
Izlaz
Prednosti Web Workersa
Paralelna obrada : U slučaju pokretanja istog koda na paralelan način.
Nema prekida u izvršavanju koda: Izvršenje koda se vrši bez obzira na osvježavanja itd. na trenutnoj stranici.
Praćenje kretanja: Sva detekcija pokreta odvija se u pozadinskom programu.
Omogućena višenitnost: Oni omogućuju višenitnost u JavaScriptu.
Poboljšana izvedba: Optimizirajte izvedbu obavljanjem intenzivnih/izazovnih zadataka u zasebnim nitima.
Učinkovito korisničko iskustvo: Time se izbjegava blokiranje glavne niti, što rezultira brzim korisničkim iskustvom.
Ograničenja Web Workersa
Međutim, postoje i neka ograničenja web radnika. Oni su navedeni, kako slijedi:
- Veća iskoristivost memorije.
- Nije moguće ažurirati DOM u radnoj niti ili pozvati objekt prozora.
Zaključak
“Web radnici” odgovara API-ju preglednika koji omogućuje JavaScriptu da izvodi zadatke u isto vrijeme na zasebnoj/namjenskoj niti. Oni se mogu koristiti uzimanjem URL-a kao argumenta, koji odgovara putanji datoteke radne skripte. Ovaj blog raspravljao je o korištenju 'web radnika' za višenitnost u JavaScriptu.