Jeste li ikada morali pokrenuti kod u pregledniku kojem je trebalo toliko vremena da se vaša aplikacija neko vrijeme ne odaziva? S HTML5 web radnicima to više nikada nećete morati doživjeti.
Web radnici vam omogućuju da odvojite dugotrajni kod i pokrenete ga neovisno o drugom kodu koji se izvodi na stranici. Ovo održava vaše korisničko sučelje osjetljivim, čak i tijekom složenih operacija.
Što su web radnici?
Tradicionalno, JavaScript je jezik s jednom niti. To znači da se ništa drugo ne može izvoditi dok se izvodi jedan dio koda. Na primjer, ako imate kod koji pokušava animirati DOM element, kod koji pokušava promijeniti varijablu mora pričekati da animacija završi prije nego što se može pokrenuti.
Web radnici su JavaScript datoteke koje se izvršavaju u zasebnoj niti bez izravnog pristupa DOM-u.
Jedan način razmišljanja o web radnicima jest da su oni dijelovi koda za čije je izvođenje potrebno puno vremena, pa ih dajete pregledniku da ih izvrši u pozadini. Budući da se taj kod sada izvodi u pozadini, ne utječe na JavaScript odgovoran za vašu web stranicu.
Kao nuspojava, više ne može izravno komunicirati s ostatkom vašeg koda, tako da web radnici nemaju pristup DOM-u. Međutim, još uvijek su dostupni mnogi drugi API-ji preglednika, uključujući API-je WebSocket i Fetch.
Web radnici ipak nisu posve izolirani od glavne niti. Kada radnik treba komunicirati s glavnom niti, može poslati poruku, a glavna nit može poslati vlastitu poruku kao odgovor.
Zašto Web radnici?
Prije web radnika, jedini način za pokretanje JavaScripta koji je zahtijevao puno vremena u pregledniku bio je:
- Prihvatite da stranica neko vrijeme neće reagirati.
- Provali taj kod asinkroni komadi.
Budući da je stranica koja ne reagira obično loše korisničko iskustvo, mogli biste se odlučiti za asinkronu opciju. Pisanje koda na ovaj način znači njegovo dijeljenje na manje dijelove koje preglednik može pokretati dok ne rukuje korisničkim sučeljem. Dijelovi moraju biti dovoljno mali da, ako korisničko sučelje treba ažurirati, preglednik može dovršiti izvršavanje trenutnog dijela i posvetiti se korisničkom sučelju.
Web radnici dodani su HTML5 kako bi ponudili bolje rješenje za ovaj problem. Umjesto da vas tjeraju da budete kreativni s asinkronim kodom, oni vam omogućuju čisto odvajanje funkcije za izvođenje u vlastitoj izoliranoj niti.
To je programerima olakšalo pisanje takvog koda i poboljšalo korisničko iskustvo.
Slučajevi korištenja za web radnike
Svaka aplikacija koja zahtijeva puno računanja na strani klijenta mogla bi imati koristi od web radnika.
Recimo, na primjer, da vaša aplikacija želi generirati izvješće o korištenju i pohranjuje sve podatke o klijentu zbog brige o privatnosti.
Da biste generirali to izvješće, vaša web aplikacija mora dohvatiti podatke, pokrenuti izračune na njima, organizirati rezultate i predstaviti ih korisniku.
Ako biste to pokušali učiniti u glavnoj niti, korisnik bi bio potpuno onemogućen za korištenje aplikacije dok aplikacija obrađuje podatke. Umjesto toga, možete dio ili cijeli taj kod premjestiti u web worker. To omogućuje korisniku da nastavi koristiti aplikaciju dok se izračuni izvode.
Kako koristiti web radnike u JavaScriptu
The Web Worker API definira kako koristiti web radnike. Korištenje ovog API-ja uključuje stvaranje objekta Worker s konstruktorom Worker na sljedeći način:
neka newWorker = Worker('radnik.js');The Radnik konstruktor prihvaća naziv JavaScript datoteke kao svoj parametar i pokreće datoteku u novoj niti. Vraća objekt Worker kako bi glavnoj niti omogućio interakciju s radnom niti.
Radnici komuniciraju s glavnom niti šaljući poruke naprijed i natrag. Vi koristite postMessage funkcija za slanje događaja između radnika i glavne niti. Koristiti onmessage slušatelj događaja za slušanje poruka od druge strane.
Evo primjera koda. Prvo, glavna nit može izgledati ovako:
neka radnik = novi Radnik('radnik.js')
worker.postMessage('hej')
radnik.onmessage = funkcija(e) {
console.log('Radnik niti kaže', e.podaci)
}
Ova glavna nit stvara radni objekt iz worker.js, zatim mu šalje poruku sa radnik.postMessage. Zatim definira slušatelja događaja, sličnog koncepta a Slušatelj DOM događaja. Događaj će se aktivirati svaki put kada radnik pošalje poruku natrag glavnoj niti, a rukovatelj zapisuje poruku radnika na konzolu.
Kod unutar worker-a (worker.js) ima jedan posao:
na poruku = funkcija(e) {
neka poruka = e.podaci;
console.log('Glavna nit reče', poruka);
objavi poruku('Bok!')
}Osluškuje sve poruke poslane iz glavne niti, zapisuje poruku u konzolu i šalje povratnu poruku natrag glavnoj niti.
Sve su poruke u ovom primjeru bile nizovi, ali to nije uvjet: možete poslati gotovo bilo koju vrstu podataka kao poruku.
Radnici koje ste do sada vidjeli zovu se predani radnici. Možete im pristupiti samo iz datoteke u kojoj ste ih stvorili (namijenjeni su njoj). Zajednički radnici su suprotni: oni mogu primati poruke i slati poruke u više datoteka. Zajednički radnici konceptualno su isti kao posvećeni radnici, ali ih morate koristiti malo drugačije.
Pogledajmo primjer. Umjesto korištenja Worker konstruktora, svaka datoteka koja želi koristiti dijeljeni worker mora stvoriti worker objekt koristeći SharedWorker():
neka sharedWorker = novi SharedWorker('worker.js')Razlike tu ipak ne staju. Da bi datoteka poslala ili primila poruku od dijeljenog radnika, to mora učiniti pristupom a luka objekt, umjesto da to učini izravno. Evo kako to izgleda:
sharedWorker.port.postMessage('Bok tamo!')
sharedWorker.port.onMessage = funkcija(e) {
console.log('Zajednički radnik je poslao', e.podaci);
}
Morate također koristiti port objekt unutar workera:
onconnect = funkcija(e) {
konst port = e.ports[0];
port.onmessage = funkcija(e) {
console.log('Poruka primljena', e.podaci)
port.postMessage('Zdravo!');
}
}
The onconnect slušatelj se aktivira svaki put kada se uspostavi veza s portom (kada je onmessage slušatelj događaja postavljen je u glavnoj niti).
Kada se to dogodi, kôd dobiva priključak na koji je upravo spojen iz događaja povezivanja i pohranjuje ga u varijablu. Zatim, kod registrira onmessage slušatelj na port objektu. Kod zatim zapisuje poruku u konzolu i koristi port za slanje poruke natrag u glavnu nit.
Web radnici poboljšavaju korisničko iskustvo
Web radnici su JavaScript niti koje vam omogućuju pokretanje složenih i dugotrajnih dijelova koda u pozadini. Ovaj kod će tada izbjeći blokiranje korisničkog sučelja. Korištenje web radnika znatno olakšava pisanje ove vrste koda i poboljšava iskustvo za korisnika aplikacije. Možete stvoriti web radnike i komunicirati s njima pomoću API-ja web radnika.