Oletko koskaan joutunut suorittamaan koodia selaimessa, jolloin sovelluksesi suorittaminen kesti niin kauan, ja se ei vastaa hetkeksi? HTML5-verkkotyöntekijöiden avulla sinun ei tarvitse kokea sitä enää koskaan.

Web-työntekijät antavat sinun erottaa pitkään käynnissä olevan koodin ja suorittaa sen erillään muusta sivulla käynnissä olevasta koodista. Tämä pitää käyttöliittymäsi reagoivana, jopa monimutkaisten toimintojen aikana.

Mitä ovat verkkotyöntekijät?

Perinteisesti JavaScript on yksisäikeinen kieli. Tämä tarkoittaa, että mikään muu ei voi toimia, kun yksi koodinpala on käynnissä. Jos sinulla on esimerkiksi koodi, joka yrittää animoida DOM-elementtiä, koodin, joka yrittää muuttaa muuttujaa, on odotettava animaation päättymistä ennen kuin se voidaan suorittaa.

Verkkotyöntekijät ovat JavaScript-tiedostoja, jotka suoritetaan erillisessä säikeessä ilman suoraa pääsyä DOM: iin.

Yksi tapa ajatella verkkotyöntekijöitä on, että ne ovat koodinpätkiä, joiden suorittaminen vie paljon aikaa, joten annat ne selaimelle suoritettavaksi taustalla. Koska tämä koodi toimii nyt taustalla, se ei vaikuta verkkosivusi JavaScriptiin.

instagram viewer

Sivuvaikutuksena se ei voi enää olla suoraan vuorovaikutuksessa muun koodin kanssa, joten verkkotyöntekijöillä ei ole pääsyä DOM: iin. Monet muut selaimen sovellusliittymät ovat kuitenkin edelleen saatavilla, mukaan lukien WebSocket- ja Fetch-sovellusliittymät.

Verkkotyöntekijät eivät kuitenkaan ole täysin eristettyjä pääsäikeestä. Kun työntekijän täytyy kommunikoida pääsäikeen kanssa, hän voi lähettää viestin ja pääsäie voi lähettää oman viestin vastauksena.

Miksi verkkotyöntekijät?

Ennen verkkotyöntekijöitä ainoa tapa ajaa JavaScriptiä, joka vaati paljon aikaa selaimessa, oli jompikumpi:

  • Hyväksy, että sivu ei vastaa vähään aikaan.
  • Riko tuo koodi sisään asynkronisia paloja.

Koska reagoimaton sivu on yleensä huono käyttökokemus, voit valita asynkronisen vaihtoehdon. Koodin kirjoittaminen tällä tavalla tarkoittaa sen jakamista pienempiin osiin, joita selain voi suorittaa, kun se ei käsittele käyttöliittymää. Kappaleiden on oltava tarpeeksi pieniä, jotta jos käyttöliittymä tarvitsee päivitystä, selain voi suorittaa nykyisen kappaleen loppuun ja huolehtia käyttöliittymästä.

Web-työntekijät lisättiin HTML5:een paremman ratkaisun tarjoamiseksi tähän ongelmaan. Sen sijaan, että pakottaisit sinut luoviksi asynkronisen koodin kanssa, ne antavat sinun erottaa funktion selkeästi toimimaan omassa eristetyssä säikeessään.

Tämä helpotti kehittäjien tällaisten koodien kirjoittamista ja paransi myös käyttökokemusta.

Käyttötapaukset verkkotyöntekijöille

Mikä tahansa sovellus, joka vaatii paljon laskentaa asiakaspuolella, voisi hyötyä verkkotyöntekijöistä.

Oletetaan esimerkiksi, että sovelluksesi haluaa luoda käyttöraportin ja tallentaa kaikki asiakkaan tiedot tietosuojasyistä.

Raportin luomiseksi verkkosovelluksesi on noudettava tiedot, suoritettava niille laskelmia, järjestettävä tulokset ja esitettävä ne käyttäjälle.

Jos yrität tehdä niin pääsäikeessä, käyttäjä ei pystyisi käyttämään sovellusta kokonaan, kun sovellus käsittelee tietoja. Sen sijaan voit siirtää osan tai koko koodista verkkotyöntekijään. Näin käyttäjä voi jatkaa sovelluksen käyttöä laskelmien suorittamisen aikana.

Web Workersin käyttäminen JavaScriptissä

The Web Worker API määrittelee kuinka verkkotyöntekijöitä käytetään. Tämän API: n käyttäminen edellyttää Worker-objektin luomista Worker-konstruktorilla seuraavasti:

anna newWorker = Työntekijä('worker.js');

The Työntekijä constructor hyväksyy JavaScript-tiedoston nimen parametriksi ja suorittaa tiedoston uudessa säikeessä. Se palauttaa Worker-objektin, jotta pääsäie voi olla vuorovaikutuksessa työntekijäsäikeen kanssa.

Työntekijät ovat vuorovaikutuksessa pääketjun kanssa lähettämällä viestejä edestakaisin. Käytät postiviesti toiminto lähettää tapahtumia työntekijän ja pääsäikeen välillä. Käytä viestissä tapahtumakuuntelija kuunnellaksesi viestejä toiselta osapuolelta.

Tässä esimerkki koodista. Ensinnäkin pääketju voi näyttää tältä:

päästää työntekijä = Uusi Työntekijä('työläinen.js')
worker.postMessage('Hei!')
worker.onmessage = toiminto(e) {
 console.log('Työntekijälanka sanoo', e.data)
}

Tämä pääsäie luo worker-objektin worker.js: stä ja lähettää sitten sille viestin worker.postMessage. Sitten se määrittelee tapahtumakuuntelijan, joka on samanlainen kuin a DOM-tapahtuman kuuntelija. Tapahtuma käynnistyy aina, kun työntekijä lähettää viestin takaisin pääsäikeeseen, ja käsittelijä kirjaa työntekijän viestin konsoliin.

Työntekijän sisällä olevalla koodilla (worker.js) on yksi työ:

onmessage = toiminto(e) {
päästää viesti = e.data;
 console.log('Pääketju sanoi', viesti);
 postMessage('Hei!')
}

Se kuuntelee kaikki pääsäikeestä lähetetyt viestit, kirjaa viestin konsoliin ja lähettää vastausviestin takaisin pääsäikeeseen.

Tämän esimerkin viestit ovat kaikki olleet merkkijonoja, mutta se ei ole vaatimus: voit lähettää melkein minkä tahansa tyyppistä dataa viestinä.

Sellaisia ​​työntekijöitä, joita olet nähnyt tähän mennessä, kutsutaan omistautuneiksi työntekijöiksi. Voit käyttää niitä vain tiedostosta, jossa loit ne (ne on omistettu sille). Jaetut työntekijät ovat päinvastaisia: he voivat vastaanottaa viestejä useista tiedostoista ja lähettää viestejä useisiin tiedostoihin. Jaetut työntekijät ovat käsitteellisesti samoja kuin omistautuneet työntekijät, mutta sinun on käytettävä heitä hieman eri tavalla.

Katsotaanpa esimerkkiä. Worker-konstruktorin käyttämisen sijaan jokaisen tiedoston, joka haluaa käyttää jaettua työntekijää, on luotava työntekijäobjekti käyttämällä SharedWorker():

päästää SharedWorker = Uusi SharedWorker('worker.js')

Erot eivät kuitenkaan lopu tähän. Jotta tiedosto voi lähettää tai vastaanottaa viestin jaetulta työntekijältä, sen on tehtävä se käyttämällä a portti objektiin sen sijaan, että tekisit sen suoraan. Tältä se näyttää:

sharedWorker.port.postMessage('Hei siellä!')
sharedWorker.port.onMessage = toiminto(e) {
 console.log('Jaettu työntekijä lähetti', e.data);
}

Sinun on käytettävä porttiobjektia myös työntekijän sisällä:

onconnect = toiminto(e) {
konst portti = e.ports[0];
port.onmessage = toiminto(e) {
 console.log('Viesti vastaanotettu', e.data)
 port.postMessage('Hei!');
 }
}

The yhteyden yhteydessä kuuntelija käynnistyy aina, kun yhteys porttiin tapahtuu (kun viestissä tapahtuman kuuntelija on asetettu pääketjuun).

Kun näin tapahtuu, koodi saa portin, johon juuri yhdistettiin yhteystapahtumasta, ja tallentaa sen muuttujaan. Seuraavaksi koodi rekisteröi viestissä kuuntelija porttiobjektissa. Koodi kirjaa sitten viestin konsoliin ja käyttää porttia viestin lähettämiseen takaisin pääsäikeeseen.

Verkkotyöntekijät parantavat käyttökokemusta

Verkkotyöntekijät ovat JavaScript-säikeitä, joiden avulla voit ajaa monimutkaisia ​​ja pitkäkestoisia koodinpätkiä taustalla. Tämä koodi välttää sitten käyttöliittymän estämisen. Verkkotyöntekijöiden käyttö tekee tällaisen koodin kirjoittamisesta paljon helpompaa ja parantaa sovelluksen käyttäjän kokemusta. Voit luoda verkkotyöntekijöitä ja olla vuorovaikutuksessa heidän kanssaan Web Worker API: n avulla.