Uvod u JavaScript API za radnike na webu

Web radnici je JavaScript API koji vam omogućuje pokrenuti skripte u zasebnoj niti od glavne. To može biti korisno kada ne želite nikakvu smetnju u izvršavanju glavnih skripti, zbog skripti u pozadini.

API za web-radnike je podržan u gotovo svim preglednicima, za detaljnije informacije pogledajte dokumente CanIUse. Prije nego što uđemo u kôd, pogledajmo nekoliko scenarija u kojima biste mogli koristiti ovaj API kako biste dobili ideju o tome što sam mislio skripte u pozadini.

Koristite slučajeve

Recimo da postoji skripta preuzima i obrađuje datoteku. Ako je datoteka znatno veliki će biti potrebno mnogo vremena za obradu! Što bi moglo zaustaviti druge skripte koje su kasnije bile pozvane da budu pogubljene.

Međutim, ako obrada datoteke premještena je u pozadinu, poznat kao radni konac, ostali događaji neće biti blokirani dok se ne završi prvi.

Skripta izvršen u pozadini radnika je poznat kao radnička skripta ili samo radnik.

Za drugi primjer zamislite da postoji veliki oblik, raspoređen u karticama. Skriptirano je na način da ažurira kontrole na jednoj kartici utječe na neke kontrole u drugima.

Ako je za ažuriranje ostalih kartica potrebno neko vrijeme, korisnik ne može kontinuirano koristiti trenutnu karticu bez da se njegovi događaji stavljaju na čekanje. To može zamrznuti korisničko sučelje i užas.

Budući da korisnik neće vidjeti druge kartice dok popunjava trenutnu, možete ažurirajte kontrole ostalih kartica u pozadini. Na taj način korisnik može nastaviti upotrebljavati trenutnu karticu koju ispunjava, a da nijedna skripta nije blokirana procesom ažuriranja kontrola na drugim karticama.

Isto tako, ako pronađete scenarij u kojem je skripta može blokirati korisnika od korištenja korisničkog sučelja dok se izvršenje ne izvrši, razmislite o premještanju u nit radnika, tako da se može izvršiti u pozadini.

Opsezi i vrste radnika

Web Workers API je vjerojatno jedan od najjednostavnijih API-jeva s kojima možete raditi. Ima vrlo jednostavne metode stvoriti radne niti i komunicirati s njima iz glavne skripte.

Globalno područje radničke niti je u drugom kontekstu od glavne niti. Vas ne mogu pristupiti metodama i svojstvima prozor objekt kao što su upozorenje () unutar radničke niti. Ti također ne mogu izravno promijeniti DOM iz radničke niti.

Međutim, vi limenka koristiti mnoge API-je koji spadaju pod prozor, na primjer Obećanje i donijeti, u vašoj radnoj niti (pogledajte cijeli popis).

Također možete imati ugniježđene radne niti: radna nit stvorena iz drugog radnog niza. Radnik kojeg je stvorio drugi zove se a subworker.

Postoje također mnogi vrste radnika. Dvije su glavne posvećeni i zajednički radnici.

Namjenski radnici pripadaju istom kontekstu pregledavanja kojoj pripada njihova glavna nit. Međutim, zajednički radnici su prisutan u drugom kontekstu pregledavanja (na primjer, u iframeu) iz glavne skripte. U oba slučaja, glavni scenarij i radnici moraju biti u istoj domeni.

Primjer u ovom tutorialu će biti o predanom radniku, koji je najčešći tip.

API metode

Pogledajte donji dijagram za brzi pregled svih glavnih metoda koji čine API Web Workers.

Radnik() konstruktor stvara namjensku radnu nit i vraća svoj referentni objekt. Zatim, koristimo ovaj objekt za komunikaciju s tim određenim radnikom.

postMessage () metoda se koristi u glavnim i radnim skriptama međusobno slati podatke. Poslane podatke tada prima druga strana OnMessage rukovatelj događajima.

ukinuti () način završava radnu nit iz glavne skripte. To je otkazivanje neposredan: bilo koja trenutna izvedba skripte i skripti na čekanju bit će otkazani. Zatvoriti() metoda radi istu stvar, ali je nazvan radnicom koja se zatvara sama.

Primjer koda

Sada ćemo vidjeti neki primjer koda. index.html stranica sadrži glavna skripta unutar a

Počinjemo s kreiranje radničke niti iz glavne skripte.

  w = novi radnik ('worker.js'); 
  Radnik() konstruktor uzima URL radničke datoteke kao svoj argument.
 Zatim dodamo rukovatelja događaja OnMessage događaj novonastale radničke instance u primati podatke iz njega.  podaci vlasništvo e će zadržati primljene podatke.
  w = novi radnik ('worker.js'); w.onmessage = (e) => console.log ('Primljeno od radnika: $ e.data');  
 Sada, koristimo postMessage () do poslati neke podatke u radnu nit klikom na gumb. postMessage () metoda može uzeti dva argumenta. Prvi može biti bilo koje vrste (niz, niz ...). To su podaci za slanje u radnu nit (ili glavnoj skripti, kada je metoda prisutna u radnoj niti).
 Drugi, opcijski parametar je niz objekata koji mogu se koristiti radni niti (ali ne glavnom skriptom ili obrnuto). Takve vrste objekata se zovu prenosiv objekti.
  onclick = () => w.postMessage ('john');  
 Samo šaljem vrijednost niza radnoj niti.
 U radnoj niti, moramo dodati OnMessage događaj će primiti podatke poslana je glavnom skriptom na gumb klik. Unutar vodiča, mi spojiti primljeni niz s drugim i pošaljite rezultat natrag na glavnu skriptu.
  console.info ('radnik kreiran'); onmessage = (e) => postMessage ('Hi $ e.data');  
 Za razliku od glavnog scenarija gdje smo morali koristiti w referentni objekt odnosi se na određenu radnu nit na kojem skripta tada koristi OnMessage i postMessage metode nema potrebe za referentnim objektom u radnoj niti da biste pokazali na glavnu nit.
 Kod radi na sljedeći način. Kada se preglednik učita index.html, konzola će prikazati "radnik je stvorio" poruku čim radnik() konstruktor se izvršava u glavnoj niti, stvaranje novog radnika.
 Kada kliknete gumb na stranici, dobit ćete "Primljeno od radnika: Hi john" u konzoli, koja je bila niz spojena u radnoj niti s podacima koji su mu poslani, a zatim je poslan natrag na glavnu skriptu.