JavaScriptissä on useita tapoja parantaa sivuston yleistä käyttöliittymää. The 'Web-työntekijä' on yksi tällainen lähestymistapa, joka mahdollistaa pääsäikeen suorittamisen ilman estämistä. Se sisältää erillisen JavaScript-moottorin ilmentymän, joten se ei voi kutsua pääsäikeen toimintoja.
Tässä artikkelissa käsitellään sen käyttöä 'Web-työntekijä' monisäikeiseen JavaScriptiin.
Mitä ovat verkkotyöntekijät?
'Web työntekijät' vastaa selaimen sovellusliittymää, jonka avulla JavaScript voi suorittaa tehtäviä rinnakkain/samaan aikaan erillisessä/omistetussa säikeessä.
Mihin verkkotyöntekijöitä tarvitaan?
Koska JavaScript on yksisäikeinen, monimutkaiset JavaScript-koodit estävät käyttöliittymän säikeen eli pysäyttävät pääikkunan, joka hoitaa kaikki päivittämiseen, käyttäjän syötetapahtumien toteuttamiseen liittyvät tehtävät jne. Tällainen skenaario vaikuttaa käyttökokemukseen . Tämän ongelman ratkaisemiseksi 'Web-työntekijä' tulee voimaan ja ratkaisee käyttöliittymän säikeen eston.
Kuinka käyttää verkkotyöntekijöitä monisäikeisiin JavaScriptin avulla?
Tehdä 'Web-työntekijä' , käytä Worker-konstruktoria. Se on sellainen, että se ottaa argumentiksi URL-osoitteen, joka vastaa halutun toiminnon toteuttavan työntekijän komentosarjatiedoston polkua. Kuitenkin sisällyttääksesi työntekijän koodin HTML-tiedostoon, käytä a 'möykky' kirjoittaa työntekijäkoodia.
Syntaksi (Web Workerin luominen)
konst x = Uusi Työntekijä ( 'työntekijä.js' ) ;Syntaksi (viestin lähettäminen työntekijälle)
konst x = Uusi Työntekijä ( 'työntekijä.js' ) ;
Syntaksi (viestin vastaanottaminen työntekijältä)
x. viestissä = toiminto ( tapahtuma ) {konsoli. Hirsi ( tapahtuma. tiedot ) ;
} ;
Esimerkki: 'Web Worker':n käyttö luvun tekijöiden laskemiseen JavaScriptissä
Seuraava esimerkki käyttää 'Työntekijä()' rakentaja luomaan verkkotyöskentelyohjelman ja laskemaan luvun kertoimen:
< html >
< pää >
< h2 tyyliin = 'text-align: center;' > Esimerkki verkkotyöntekijöistä h2 >
pää >
< kehon >
< käsikirjoitus >
konst x = Uusi Työntekijä ( URL-osoite. CreateObjectURL ( Uusi Möykky ( [
`
// Työntekijän käsikirjoitus
konst tosiasia = ( n ) => {
jos ( n == 0 || n == 1 ) {
palata 1n ;
}
muu {
palata BigInt ( n ) * tosiasia ( BigInt ( n ) - 1n ) ;
}
} ;
itse. viestissä = ( tapahtuma ) => {
konst Kanssa = tosiasia ( tapahtuma. tiedot ) ;
itse. postiviesti ( Kanssa. toString ( ) ) ;
} ; `
] , { tyyppi : 'teksti/javascript' } ) ) ) ;
x. postiviesti ( 15n ) ;
x. viestissä = ( tapahtuma ) => {
konst ulos = tapahtuma. tiedot ;
konsoli. Hirsi ( 'Factory of 15 Via Web Worker->' , ulos ) ;
} ;
kehon >
html >
Käytä tässä koodissa seuraavia vaiheita:
- Määritä ensin mainittu otsikko.
- Luo sen jälkeen a 'Web-työntekijä' objekti, jolla on työntekijän koodin sisältävän Blob-objektin URL-osoite.
- Työntekijälle omistettu koodi sisältyy anonyymiin funktioon, joka laskee luvun kertoimen rekursiivisen funktion kautta.
- Työntekijä myös kuuntelee pääsäikeen kautta lähetettyjä viestejä hyödyntäen 'self.onmessage' tapahtuma, hakee hyväksytyn luvun kertoimen ja antaa tuloksen pääsäikeelle 'postiviesti()' menetelmä.
- Luo pääketjussa työntekijäinstanssi ja lähetä sille viesti numerolla ' 15n ”. Täällä, ' n ” viittaa ”BigInt”-arvoon.
- Kun työntekijä on laskenut kertoimen, se lähettää tuloksen takaisin pääsäikeeseen käyttämällä 'postiviesti()' menetelmä.
- Lopuksi pääsäie hakee/vastaanottaa tuloksen 'on viesti' tapahtuma ja palauttaa konsolissa olevan numeron vastaavan kertoimen.
Lähtö
Web Workersin edut
Rinnakkaiskäsittely : Jos samaa koodia käytetään rinnakkain.
Ei häiriötä koodin suorittamisessa: Koodin suorittaminen tapahtuu riippumatta päivityksistä jne. nykyisellä sivulla.
Liikkeiden seuranta: Kaikki liikkeentunnistus tapahtuu taustatyöntekijässä.
Monisäikeisyys käytössä: Nämä mahdollistavat monisäikeisen JavaScriptin.
Parannettu suorituskyky: Optimoi suorituskyky tekemällä intensiivisiä/haasteita tehtäviä erillisissä säikeissä.
Tehokas käyttökokemus: Nämä välttävät pääsäikeen estämisen, mikä johtaa reagoivaan käyttökokemukseen.
Verkkotyöntekijöiden rajoitukset
Verkkotyöntekijöillä on kuitenkin myös joitain rajoituksia. Nämä on ilmoitettu seuraavasti:
- Lisää muistin käyttöä.
- DOM:ia ei voi päivittää työsäikeessä tai kutsua ikkunaobjektia.
Johtopäätös
'Web-työntekijät' vastaa selaimen sovellusliittymää, jonka avulla JavaScript voi suorittaa tehtäviä samanaikaisesti erillisessä/omistetussa säikeessä. Näitä voidaan hyödyntää ottamalla argumentiksi URL-osoite, joka vastaa työntekijän komentosarjatiedoston polkua. Tässä blogissa keskusteltiin 'Web Workers':n käytöstä JavaScriptin monisäikeisyydessä.