Uvod v API JavaScript za spletne delavce

Spletni delavci je API za JavaScript, ki vam omogoča zagnati skripte v ločeni niti od glavne. Lahko pride v poštev, če ne želite ovirati izvajanja glavnih skriptov, ker skripti v ozadju obstajajo..

API Web Workers je v skoraj vseh brskalnikih, za podrobnejše informacije si oglejte dokumente CanIUse. Preden vnesemo kodo, si oglejmo nekaj scenarijev, kjer boste morda želeli uporabiti ta API, da boste lahko dobili predstavo o tem, kaj sem mislil skripte za ozadje.

Uporabite primere

Recimo, da obstaja scenarij pridobiva in obdeluje datoteko. Če je datoteka precej veliko bo trajalo dlje časa, da se obdelajo! Ki bi lahko zavlekel druge skripte, ki so bili pozneje pozvani, da bi bili izvršeni.

Vendar, če obdelava datoteke se premakne v ozadje v ozadju, znano kot delavska nit, drugi dogodki ne bodo blokirani, dokler nekdo ne konča.

Scenarij izvedeno v ozadju delavca v ozadju je znan kot delavca ali samo delavca.

Za drug primer si zamislite, da obstaja velika oblika, razporejena v zavihke. To je skriptirano tako, da posodablja kontrole v enem zavihku vpliva na nekatere kontrole v drugih.

Če posodobitev drugih zavihkov traja nekaj časa, uporabnik trenutno ne morete uporabljati trenutnega zavihka ne da bi bili njegovi dogodki zadržani. To lahko zamrzne uporabniški vmesnik in užitek uporabnika.

Ker uporabnik ne bo videl drugih zavihkov med izpolnjevanjem trenutnega, lahko posodobite kontrole drugih zavihkov v ozadju v ozadju. Na ta način lahko uporabnik še naprej uporablja trenutni zavihek, ki ga izpolni, ne da bi bil njegov postopek blokiranja kontrolnikov v drugih zavihkih blokiran..

Podobno, če najdete scenarij, kjer je scenarij lahko uporabniku prepreči uporabo uporabniškega vmesnika dokler se ne izvede, jo lahko premaknete v delovno nit, tako da se lahko izvede v ozadju.

Obseg in vrste delavcev

API za spletne delavce je verjetno eden najpreprostejših API-jev, s katerim lahko delate. Ima precej enostavne metode ustvarite delovne niti in komunicirajo z njimi iz glavnega scenarija.

Globalno področje dela nit je v drugem kontekstu od glavne niti. Ti ne morejo dostopati do metod in lastnosti okno predmet kot naprimer opozorilo () znotraj delovne nitke. Ti tudi DOM ne morete spremeniti neposredno iz navoja delavca.

Vendar, vi lahko uporabite številne API-je, ki spadajo pod okno, na primer Obljubi in Fetch, v delu vašega delavca (glejte celoten seznam).

Lahko tudi ugnezdene delovne niti: delovne niti, izdelane iz druge delovne niti. Delavec, ki ga je ustvaril drug, se imenuje a subworker.

Tukaj so tudi veliko vrste delavcev. Dva glavna sta delavcev.

Namenski delavci pripadajo istemu kontekstu brskanja ki jim pripada njihova glavna nit. Vendar so skupni delavci v drugem kontekstu brskanja (na primer v iframe) iz glavnega skripta. V obeh primerih glavni scenarij in delavci morajo biti v isti domeni.

Primer v tej vadnici bo o predanem delavcu, ki je najpogostejši tip.

API metode

Glejte spodnji diagram za hiter pregled vseh glavnih metod ki sestavljajo API Web Workers.

The Delavec () konstruktor ustvarja namensko delovno nit in vrne svoj referenčni objekt. Nato s tem predmetom komuniciramo z določenim delavcem.

The postMessage () Metoda se uporablja tako v glavni kot delovni skripti medsebojno pošiljanje podatkov. Poslane podatke nato prejme na drugi strani o sporočilu dogodka.

The zaključi () metodo konča delavsko nit iz glavnega skripta. Ta prekinitev je takoj: vse trenutne izvedbe skriptov in čakajoče skripte bodo preklicane. The close () Metoda naredi isto, vendar je klic, ki ga zapre delavnica.

Primerna koda

Zdaj pa si oglejte nekaj vzorčnih kod. The index.html stran vsebuje glavni scenarij znotraj

Začnemo s ustvarjanje niti delavca iz glavnega skripta.

 w = nov delavec ('worker.js'); 

 w = nov delavec ('worker.js'); w.onmessage = (e) => console.log ('Prejeto od delavca: $ e.data');  

 document.querySelector ('gumb'): onclick = () => w.postMessage ('john');  

 console.info („ustvarjen delavec“); onmessage = (e) => postMessage ('Hi $ e.data');