Ali ste kdaj morali zagnati kodo v brskalniku, ki je tako dolgo zagnala vašo aplikacijo, da se nekaj časa ne odziva? S spletnimi delavci HTML5 vam tega nikoli več ni treba izkusiti.

Spletni delavci vam omogočajo, da ločite dolgo delujočo kodo in jo izvajate neodvisno od druge kode, ki se izvaja na strani. To ohranja vaš uporabniški vmesnik odziven, tudi med zapletenimi operacijami.

Kaj so spletni delavci?

Tradicionalno je JavaScript jezik z eno nitjo. To pomeni, da med izvajanjem enega dela kode ne more delovati nič drugega. Na primer, če imate kodo, ki poskuša animirati element DOM, mora koda, ki poskuša spremeniti spremenljivko, počakati, da se animacija konča, preden se lahko zažene.

Spletni delavci so datoteke JavaScript, ki se izvajajo v ločeni niti brez neposrednega dostopa do DOM.

Eden od načinov razmišljanja o spletnih delavcih je, da so to deli kode, ki potrebujejo veliko časa za izvajanje, zato jih daste brskalniku, da jih izvede v ozadju. Ker se ta koda zdaj izvaja v ozadju, ne vpliva na JavaScript, ki je odgovoren za vašo spletno stran.

Kot stranski učinek ne more več neposredno komunicirati s preostankom vaše kode, zato spletni delavci nimajo dostopa do DOM. Vendar pa je še vedno na voljo veliko drugih API-jev brskalnika, vključno z API-ji WebSocket in Fetch.

Vendar spletni delavci niso povsem izolirani od glavne niti. Ko mora delavec komunicirati z glavno nitjo, lahko pošlje sporočilo, glavna nit pa lahko v odgovor pošlje svoje sporočilo.

Zakaj spletni delavci?

Pred spletnimi delavci je bil edini način za zagon JavaScripta, ki je zahteval veliko časa v brskalniku:

  • Sprejmite, da se stran nekaj časa ne bo odzivala.
  • Razbijte to kodo asinhroni kosi.

Ker je neodzivna stran običajno slaba uporabniška izkušnja, se lahko odločite za asinhrono možnost. Pisanje kode na ta način pomeni, da jo razdelite na manjše dele, ki jih brskalnik lahko izvaja, medtem ko ne obravnava uporabniškega vmesnika. Kosi morajo biti dovolj majhni, da lahko brskalnik, če je uporabniški vmesnik treba posodobiti, dokonča izvajanje trenutnega dela in se posveti uporabniškemu vmesniku.

Spletni delavci so bili dodani v HTML5, da bi ponudili boljšo rešitev te težave. Namesto da bi vas prisilili v ustvarjalnost z asinhrono kodo, vam omogočajo, da čisto ločite funkcijo, ki se izvaja v lastni izolirani niti.

To je razvijalcem olajšalo pisanje takšne kode in izboljšalo uporabniško izkušnjo.

Primeri uporabe za spletne delavce

Vsaka aplikacija, ki zahteva veliko računanja na strani odjemalca, bi lahko imela koristi od spletnih delavcev.

Recimo, na primer, da vaša aplikacija želi ustvariti poročilo o uporabi in shrani vse podatke o odjemalcu zaradi skrbi glede zasebnosti.

Za ustvarjanje tega poročila mora vaša spletna aplikacija pridobiti podatke, izvesti izračune na njih, organizirati rezultate in jih predstaviti uporabniku.

Če bi to poskušali narediti v glavni niti, uporabnik popolnoma ne bi mogel uporabljati aplikacije, medtem ko bi aplikacija obdelovala podatke. Namesto tega lahko del ali celotno kodo premaknete v spletni delavec. To omogoča uporabniku, da še naprej uporablja aplikacijo, medtem ko se izvajajo izračuni.

Kako uporabljati spletne delavce v JavaScriptu

The API spletnega delavca določa, kako uporabljati spletne delavce. Uporaba tega API-ja vključuje ustvarjanje objekta Worker s konstruktorjem Worker, kot je ta:

naj newWorker = Worker('delavec.js');

The Delavec konstruktor sprejme ime datoteke JavaScript kot svoj parameter in zažene datoteko v novi niti. Vrne objekt Worker, ki glavni niti omogoči interakcijo z delovno nitjo.

Delavci komunicirajo z glavno nitjo s pošiljanjem sporočil naprej in nazaj. Uporabljate postMessage funkcijo za pošiljanje dogodkov med delavcem in glavno nitjo. Uporabi onmessage poslušalec dogodkov za poslušanje sporočil druge strani.

Tukaj je primer kode. Prvič, glavna nit bi lahko izgledala takole:

pustiti delavec = novo Delavec ('worker.js')
worker.postMessage('Zdravo!')
delavec.onmessage = funkcijo(e) {
 console.log('Delavec nit pravi', e.podatki)
}

Ta glavna nit ustvari delovni objekt iz worker.js, nato pa mu pošlje sporočilo z delavec.postMessage. Nato definira poslušalca dogodkov, ki je po konceptu podoben a poslušalec dogodkov DOM. Dogodek se bo sprožil vsakič, ko delavec pošlje sporočilo nazaj v glavno nit, in upravljavec zabeleži sporočilo delavca v konzolo.

Koda znotraj delavca (worker.js) ima eno nalogo:

na sporočilo = funkcijo(e) {
pustiti sporočilo = e.podatki;
 console.log('Glavna nit reče', sporočilo);
 postMessage('zdravo')
}

Posluša vsa sporočila, poslana iz glavne niti, zabeleži sporočilo v konzolo in pošlje povratno sporočilo nazaj v glavno nit.

Vsa sporočila v tem primeru so bila nizi, vendar to ni pogoj: kot sporočilo lahko pošljete skoraj vse vrste podatkov.

Delavci, ki ste jih videli do sedaj, se imenujejo predani delavci. Do njih lahko dostopate samo iz datoteke, v kateri ste jih ustvarili (tej so namenjeni). Delavci v skupni rabi so nasprotno: lahko prejemajo sporočila iz več datotek in jim pošiljajo sporočila. Deljeni delavci so konceptualno enaki namenskim delavcem, vendar jih morate uporabljati nekoliko drugače.

Poglejmo si primer. Namesto uporabe konstruktorja delavca mora vsaka datoteka, ki želi uporabiti delavca v skupni rabi, ustvariti objekt delavca z SharedWorker():

pustiti sharedWorker = novo SharedWorker('worker.js')

Vendar se razlike tu ne končajo. Če želite, da datoteka pošlje ali prejme sporočilo od delavca v skupni rabi, mora to storiti z dostopom do a pristanišče nasprotovati, namesto da bi to storili neposredno. Takole izgleda:

sharedWorker.port.postMessage('Zdravo!')
sharedWorker.port.onMessage = funkcijo(e) {
 console.log('Deljeni delavec je poslal', e.podatki);
}

Objekt vrat morate uporabiti tudi znotraj delavca:

onconnect = funkcijo(e) {
konst vrata = e.ports[0];
port.onmessage = funkcijo(e) {
 console.log('Sporočilo prejeto', e.podatki)
 port.postMessage('Zdravo!');
 }
}

The onconnect poslušalec se sproži vsakič, ko pride do povezave z vrati (ko je onmessage poslušalec dogodkov je nastavljen v glavni niti).

Ko se to zgodi, koda iz dogodka povezave pridobi vrata, s katerimi je bila pravkar povezana, in jih shrani v spremenljivko. Nato koda registrira onmessage poslušalec na objektu vrat. Koda nato sporočilo zabeleži v konzolo in uporabi vrata za pošiljanje sporočila nazaj v glavno nit.

Spletni delavci izboljšajo uporabniško izkušnjo

Spletni delavci so niti JavaScript, ki vam omogočajo izvajanje zapletenih in dolgo delujočih delov kode v ozadju. Ta koda se bo nato izognila blokiranju uporabniškega vmesnika. Uporaba spletnih delavcev močno olajša pisanje te vrste kode in izboljša izkušnjo za uporabnika aplikacije. Ustvarite lahko spletne delavce in komunicirate z njimi z uporabo API-ja za spletne delavce.