Úvod do API API webového pracovníka

Weboví pracovníci je API jazyka JavaScript, které vám umožní spouštět skripty v samostatném vláknu z hlavního vlákna. To může přijít vhod, když nechcete žádné překážky v provádění hlavních skriptů, kvůli pozadí-esque skriptů.

API Web Workers je podporovány téměř ve všech prohlížečích, Pro podrobnější informace se podívejte do dokumentace CanIUse. Předtím, než se dostanete do kódu, se podívejme na několik scénářů, kde byste mohli chtít toto rozhraní API použít, abyste mohli získat představu o tom, co jsem chtěl říct. skripty na pozadí.

Případy užití

Řekněme, že je to skript vyvolá a zpracuje soubor. Pokud je soubor značně zpracování bude trvat dlouho! Který by mohl zastavit další skripty, které byly vyvolány později, než aby byly provedeny.

Nicméně, pokud zpracování souboru je přesunuto na pozadí, známý jako pracovní vlákno, ostatní události nebudou blokovány, dokud nebude dřívější.

Scénář provedeno v podprocesu pracovníka na pozadí je znám jako pracovní skript nebo jen pracovník.

Pro další příklad si představte, že existuje velká forma, uspořádaná v kartách. Je to skriptováno způsobem, který aktualizuje ovládací prvky na jedné kartě ovlivňuje některé kontroly v jiných.

Pokud aktualizace ostatních karet nějakou dobu trvá, uživatel Nelze nepřetržitě používat aktuální kartu bez toho, aby byly jeho události pozastaveny. Mohlo by dojít ke zmrazení uživatelského rozhraní, ke zděšení uživatele.

Vzhledem k tomu, že uživatel nebude zobrazovat ostatní karty při vyplňování aktuálních karet, můžete aktualizovat ovládací prvky ostatních karet v podprocesu pozadí. Tímto způsobem může uživatel pokračovat v používání aktuální karty, kterou vyplňuje, aniž by všechny její skripty byly blokovány procesem aktualizace ovládacích prvků v jiných kartách..

Podobně, pokud najdete scénář, kde skript uživatel může zablokovat používání uživatelského rozhraní až do jeho provedení můžete zvážit přesunutí na pracovní vlákno, aby mohlo být provedeno na pozadí.

Rozsah a typy pracovníků

API Web Workers je pravděpodobně jednou z nejjednodušších API, s nimiž lze pracovat. Má velmi jednoduché metody vytvořit pracovní podprocesy a komunikovat s nimi z hlavního skriptu.

Globální rozsah pracovního podprocesu je v jiném kontextu než hlavní podproces. Vy nemá přístup k metodám a vlastnostem okno objekt jako upozornění () uvnitř pracovního vlákna. Ty také nelze změnit DOM přímo z pracovního vlákna.

Nicméně, vy umět používat mnoho API, které spadají pod okno, například Slib a Načíst, ve vašem pracovním vlákně (viz úplný seznam).

Můžete také mít vnořená pracovní vlákna: pracovní podprocesy vytvořené z jiného pracovního vlákna. Pracovník vytvořený jiným se nazývá dílčí pracovník.

Jsou tu také mnoho typy pracovníků. Ty dva hlavní jsou pracovníky.

Vyhrazení pracovníci patří do stejného kontextu procházení že jejich hlavní vlákno patří. Sdílené pracovníky jsou však v jiném kontextu procházení (například v iframe) z hlavního skriptu. V obou případech hlavní scénář a dělníci musí být ve stejné doméně.

Příklad v tomto tutoriálu bude o vyhrazeném pracovníku, nejběžnější typ.

Metody API

Viz schéma dole pro a rychlý přehled všech hlavních metod které tvoří Web Workers API.

Pracovník() konstruktor vytvoří vyhrazené pracovní vlákno a vrátí svůj referenční objekt. Pak použijeme tento objekt ke komunikaci s tímto konkrétním pracovníkem.

postMessage () Metoda je používána v hlavním i pracovním skriptu odesílat data navzájem. Odeslaná data jsou pak přijímána na druhé straně onmessage obsluha události.

vypovědět() metoda ukončí pracovní vlákno z hlavního skriptu. Toto ukončení je bezprostřední: jakékoliv současné spuštění skriptu a čekající skripty budou zrušeny. zavřít() Metoda dělá totéž, ale je to zavoláním samotného pracovního vlákna.

Příklad kódu

Podívejme se nyní na ukázkový kód. index.html stránka obsahuje hlavní skript uvnitř

Začneme s vytvoření pracovního vlákna z hlavního skriptu.

  w = nový pracovník ('worker.js'); 
  Pracovník() konstruktor jako argument použije adresu URL pracovního souboru.
 Pak přidáme obslužný program události pro onmessage události nově vytvořené instance pracovníka přijímat data z ní.  data vlastnictví E událost bude uchovávat přijatá data.
  w = nový pracovník ('worker.js'); w.onmessage = (e) => console.log ('Přijato od pracovníka: $ e.data');  
 Nyní používáme postMessage () na odeslat některá data do pracovního vlákna kliknutím na tlačítko. postMessage () metoda může mít dva argumenty. První může být jakéhokoliv typu (řetězec, pole…). Jsou to data odesílat do pracovního vlákna (nebo do hlavního skriptu, když je metoda přítomna v pracovním vláknu).
 Druhý volitelný parametr je pole objektů, které mohou být použity pracovními vlákny (ale ne hlavním skriptem, nebo naopak). Tyto druhy objektů jsou volány Přenosný objekty.
  document.querySelector ('button') .cclick = () => w.postMessage ('john');  
 Právě posílám řetězec do pracovního vlákna.
 V pracovním vláknu musíme přidat onmessage obsluha události data obdrží zasláno do hlavního skriptu na tlačítko click. Uvnitř psovoda, my zřetězit přijatý řetězec s jiným a poslat výsledek zpět do hlavního skriptu.
  console.info („vytvořený pracovník“); onmessage = (e) => postMessage ('Hi $ e.data');  
 Na rozdíl od hlavního skriptu, kde jsme museli používat w referenční objekt odkazují na konkrétní pracovní vlákno na kterém skript potom použije onmessage a postMessage metody v pracovním vláknu není třeba žádného referenčního objektu přejděte na hlavní vlákno.
 Kód funguje následovně. Když se prohlížeč načte index.html, konzole zobrazí "vytvořený pracovník" zprávu pracovník() konstruktor je proveden v hlavním vláknu, vytvoření nového pracovníka.
 Když kliknete na tlačítko na stránce, dostanete "Přijato od pracovníka: Hi john" v konzole, což je řetězec, který byl v pracovním vláknu s daty, které mu byly zaslány, a pak odesláno zpět do hlavního skriptu.