Úvod do aplikácie Java API pre webových pracovníkov
Web Workers je rozhranie API jazyka JavaScript, ktoré vám umožňuje spustiť skripty v samostatnom vlákne z hlavného. Môže to byť užitočné, ak nechcete mať žiadne prekážky pri vykonávaní hlavných skriptov kvôli skriptom na pozadí.
Aplikácia Web Workers API je podporované takmer vo všetkých prehliadačoch, Podrobnejšie informácie nájdete v dokumente CanIUse. Predtým, než sa dostaneme do kódu, uvidíme pár scenárov, kde by ste mohli používať tento API, aby ste mohli získať predstavu o tom, čo mám na mysli skriptami na pozadí
.
Prípady použitia
Povedzme, že je tu skript preberá a spracuje súbor. Ak je súbor značne veľké to bude trvať dlho, kým bude spracovaná! Ktoré by mohli zablokovať ďalšie skripty, ktoré boli vyvolané neskôr, od vykonania.
Avšak, ak spracovanie súborov sa presunie na pozadie podprocesu, známy ako pracovná niť, ostatné udalosti nebudú zablokované dovtedy, kým predchádzajúca udalosť neuplynie.
Scenár vykonané v pozadia podprocesu pracovníka je známy ako pracovný skript alebo len robotník.
Pre ďalší príklad si predstavte, že existuje veľká forma, usporiadaná v záložkách. Je napísaný tak, že aktualizácia ovládacích prvkov na jednej karte ovplyvňuje niektoré kontroly v iných.
Ak aktualizácia ostatných kariet trvá nejaký čas používateľom nemôže nepretržite používať aktuálnu kartu bez udania udalostí. Môže to spôsobiť zmrazenie používateľského rozhrania kvôli zúfalstvu používateľa.
Vzhľadom na to, že používateľ nevidí ostatné karty pri vypĺňaní aktuálnej karty, môžete to urobiť aktualizujte ovládacie prvky ostatných kariet na pozadie. Týmto spôsobom môže používateľ pokračovať v používaní aktuálnej karty, ktorú vyplňuje, bez toho, aby bol jeho skript blokovaný procesom aktualizácie ovládacích prvkov na iných kartách.
Podobne, ak nájdete scenár, kde sa nachádza skript môže zablokovať používateľa z používania používateľského rozhrania kým sa nevykoná jeho vykonanie, môžete zvážiť jeho presun na pracovnú niť, aby mohla byť vykonaná na pozadí.
Rozsahy a typy pracovníkov
Aplikácia Web Workers API je pravdepodobne jedným z najjednoduchších API, s ktorými môžete pracovať. Má veľmi jednoduché metódy vytvoriť vlákna pracovníka a komunikovať s nimi z hlavného skriptu.
Globálny rozsah pracovníka je v odlišnom kontexte od hlavného vlákna. vy nemôže získať prístup k metódam a vlastnostiam okno
objekt ako napr alert ()
vnútri pracovnej nite. Ty tiež DOM nemôže priamo zmeniť z pracovnej nite.
Avšak vy môcť použite mnoho rozhraní API, ktoré spadajú pod okno
, napríklad sľub
a vyzdvihnúť
, vo vlákne pracovníka (pozri úplný zoznam).
Môžete tiež mať vnorené pracovné podprocesy: pracovné vlákna vytvorené z iného pracovného vlákna. Pracovník, ktorý vytvoril iný, sa nazýva a subworker.
Tam sú tiež veľa typy pracovníkov. Dve hlavné sú vyhradených a zdieľaných pracovníkov.
Vyhradené pracovníčky patria do rovnakého kontextu prehliadania že ich hlavné vlákno patrí. Zdieľaní pracovníci sú však prezentovať v inom kontexte prehliadania (napríklad v rámčeku iframe) z hlavného skriptu. V oboch prípadoch je hlavný scenár a pracovníci musia byť v rovnakej oblasti.
Príkladom tohto tutoriálu bude o špecializovanom pracovníkovi, čo je najbežnejší typ.
Metódy API
Pozrite si nižšie uvedený diagram pre a rýchly prehľad všetkých hlavných metód ktoré tvoria rozhranie Web Workers API.
Worker ()
staviteľ vytvára dedikované pracovné vlákno a vráti referenčný objekt. Potom tento objekt používame na komunikáciu s daným pracovníkom.
PostMessage ()
metóda sa používa v hlavných a pracovných skriptoch odosielanie údajov navzájom. Odoslané údaje sú potom prijaté na druhej strane onmessage
obsluha udalosti.
vypovedať ()
metóda ukončí pracovný závit z hlavného skriptu. Toto ukončenie je okamžitý: akékoľvek aktuálne vykonanie skriptu a čakajúce skripty budú zrušené. Zavrieť()
spôsobuje to isté, ale je to tak zavolá pri zavretí závitu pracovníka.
Príkladový kód
Teraz uvidíme vzorový kód. index.html
stránka obsahuje hlavný skript vnútri a tag, while the worker script is held in a JavaScript file called
worker.js
.
Začíname s vytvorenie pracovnej nite z hlavného skriptu.
w = nový pracovník ("worker.js");
Worker ()
staviteľ priradí ako argument argument URL adresy pracovného súboru.
Potom pridáme obslužný program udalostí pre onmessage
udalosť novo vytvorenej inštancie pracovníka získať údaje z neho. dáta
majetok spoločnosti e
udalosť udrží prijaté údaje.
w = nový pracovník ("worker.js"); w.onmessage = (e) => console.log ("Prijaté od pracovníka: $ e.data");
Teraz používame PostMessage ()
na odoslať nejaké údaje do pracovného vlákna po kliknutí na tlačidlo. PostMessage ()
metóda môže mať dva argumenty. Prvý môže byť akéhokoľvek typu (reťazec, pole ...). Sú to údaje ktoré sa majú odoslať na pracovnú niť (alebo na hlavný skript, ak je metóda prítomná v pracovnom vlákne).
Druhým voliteľným parametrom je pole objektov môžu byť použité pracovnými vláknami (nie však hlavným skriptom alebo naopak). Tieto typy objektov sa nazývajú prenosný
objektov.
document.querySelector ('tlačidlo') onclick = () => w.postMessage ('john');
Práve posielam reťazec hodnotu vlákna pracovníka.
V pracovnej nite musíme pridať onmessage
obsluha udalosti, ktorá dostane údaje poslal do nej hlavný skript po kliknutí na tlačidlo. Vo vnútri psovodu, my zoskupiť prijatý reťazec s iným a vráťte výsledok späť do hlavného skriptu.
console.info ("pracovník bol vytvorený"); onmessage = (e) => postMessage ('Hi $ e.data');
Na rozdiel od hlavného skriptu, kde sme museli použiť w
referenčný objekt na odkazujte na špecifickú pracovnú niť na ktorom skript potom používa onmessage
a PostMessage
metódy, tam je v pracovnej nite nie je potrebný referenčný objekt na označenie hlavného vlákna.
Kód funguje nasledovne. Keď sa prehliadač načíta index.html
, na konzole sa zobrazí "pracovník vytvoril"
hneď ako sa zobrazí správa pracovník ()
konštruktor sa vykoná v hlavnom vlákne, vytvorenie nového pracovníka.
Keď kliknete na tlačidlo na stránke, dostanete "Prijaté od pracovníka: Ahoj john"
správa v konzole, čo je reťazec, ktorý bol zrekonštruované v pracovnej nite s dátami, ktoré mu boli odoslané, a potom odoslané späť do hlavného skriptu.