Stalo se vám někdy, že jste potřebovali spouštět kód v prohlížeči, jehož spuštění trvalo tak dlouho, že vaše aplikace na chvíli přestala reagovat? S webovými pracovníky HTML5 to už nikdy nebudete muset zažít.

Weboví pracovníci vám umožňují oddělit dlouho běžící kód a spustit jej nezávisle na jiném kódu běžícím na stránce. Vaše uživatelské rozhraní tak bude reagovat i při složitých operacích.

Co jsou weboví pracovníci?

JavaScript je tradičně jednovláknový jazyk. To znamená, že nic jiného nemůže běžet, když běží jeden kus kódu. Pokud máte například kód, který se pokouší animovat prvek DOM, kód, který se pokouší změnit proměnnou, musí před spuštěním počkat, až animace skončí.

Weboví pracovníci jsou soubory JavaScriptu, které se spouštějí v samostatném vláknu bez přímého přístupu k DOM.

Jedním ze způsobů, jak si představit pracovníky webu, je to, že jde o části kódu, jejichž spuštění zabere spoustu času, takže je dáte prohlížeči ke spuštění na pozadí. Protože tento kód nyní běží na pozadí, neovlivňuje JavaScript zodpovědný za vaši webovou stránku.

instagram viewer

Jako vedlejší efekt již nemůže přímo interagovat se zbytkem vašeho kódu, takže pracovníci webu nemají přístup k DOM. Stále je však k dispozici mnoho dalších rozhraní API prohlížeče, včetně rozhraní WebSocket a Fetch API.

Weboví pracovníci však nejsou zcela izolováni od hlavního vlákna. Když pracovník potřebuje komunikovat s hlavním vláknem, může odeslat zprávu a hlavní vlákno může odeslat svou vlastní zprávu jako odpověď.

Proč Web Workers?

Před webovými pracovníky byl jediným způsobem, jak spustit JavaScript, který vyžadoval mnoho času v prohlížeči, buď:

  • Přijměte, že stránka bude chvíli nereagovat.
  • Rozbijte ten kód asynchronní kusy.

Vzhledem k tomu, že nereagující stránka je obvykle špatným uživatelským dojmem, můžete se rozhodnout pro asynchronní možnost. Psaní kódu tímto způsobem znamená jeho rozdělení na menší části, které může prohlížeč spustit, aniž by manipuloval s uživatelským rozhraním. Části musí být dostatečně malé, aby v případě potřeby aktualizace uživatelského rozhraní mohl prohlížeč dokončit provádění aktuální části a věnovat se uživatelskému rozhraní.

Do HTML5 byli přidáni weboví pracovníci, aby nabídli lepší řešení tohoto problému. Namísto toho, aby vás nutili kreativně pracovat s asynchronním kódem, umožňují vám čistě oddělit funkci, která se spustí v jejím vlastním izolovaném vlákně.

To vývojářům usnadnilo psaní takového kódu a zlepšilo také uživatelskou zkušenost.

Use Cases for Web Workers

Každá aplikace, která vyžaduje hodně výpočtů na straně klienta, by mohla mít prospěch z webových pracovníků.

Řekněme například, že vaše aplikace chce vygenerovat zprávu o využití a ukládá všechna data o klientovi z důvodu ochrany soukromí.

K vygenerování této zprávy musí vaše webová aplikace načíst data, spustit s nimi výpočty, uspořádat výsledky a prezentovat je uživateli.

Pokud byste se o to pokusili v hlavním vláknu, uživatel by zcela nemohl používat aplikaci, zatímco aplikace zpracovávala data. Místo toho můžete část nebo všechen tento kód přesunout do webového pracovníka. To umožňuje uživateli pokračovat v používání aplikace během provádění výpočtů.

Jak používat Web Workers v JavaScriptu

The Web Worker API definuje, jak používat webové pracovníky. Použití tohoto rozhraní API zahrnuje vytvoření objektu Worker pomocí konstruktoru Worker, jako je tento:

nech novýWorker = Worker('worker.js');

The Pracovník konstruktor přijímá název souboru JavaScript jako svůj parametr a spouští soubor v novém vlákně. Vrátí objekt Worker, který umožní hlavnímu vláknu interakci s pracovním vláknem.

Pracovníci komunikují s hlavním vláknem odesíláním zpráv tam a zpět. Používáte postMessage funkce pro odesílání událostí mezi pracovním a hlavním vláknem. Použijte onmessage posluchač událostí pro poslech zpráv od druhé strany.

Zde je příklad kódu. Za prvé, hlavní vlákno může vypadat takto:

nechat dělník = Nový Worker('worker.js')
worker.postMessage('Ahoj!')
worker.onmessage = funkce(E) {
 console.log('Pracovní vlákno říká', e.data)
}

Toto hlavní vlákno vytvoří pracovní objekt z worker.js a poté mu odešle zprávu s worker.postMessage. Poté definuje posluchače událostí, podobný konceptu jako a Posluchač událostí DOM. Událost se spustí pokaždé, když pracovník odešle zprávu zpět do hlavního vlákna, a obsluha zaznamená zprávu pracovníka do konzoly.

Kód uvnitř workeru (worker.js) má jednu úlohu:

onmessage = funkce(E) {
nechat zpráva = e.data;
 console.log('Hlavní vlákno řekl', zpráva);
 postMessage('Ahoj!')
}

Naslouchá všem zprávám odeslaným z hlavního vlákna, zaprotokoluje zprávu do konzole a odešle zprávu zpět do hlavního vlákna.

Všechny zprávy v tomto příkladu byly řetězce, ale to není podmínkou: jako zprávu můžete odeslat téměř jakýkoli typ dat.

Pracovníci, které jste dosud viděli, se nazývají oddaní pracovníci. Můžete k nim přistupovat pouze ze souboru, ve kterém jste je vytvořili (jsou mu vyhrazeny). Sdílení pracovníci jsou opakem: mohou přijímat zprávy z více souborů a odesílat zprávy do více souborů. Sdílení pracovníci jsou koncepčně stejní jako vyhrazení pracovníci, ale musíte je používat trochu jinak.

Podívejme se na příklad. Namísto použití konstruktoru Worker musí každý soubor, který chce použít sdíleného workera, vytvořit objekt worker pomocí SharedWorker():

nechat sharedWorker = Nový SharedWorker('worker.js')

Rozdíly tím však nekončí. Aby soubor mohl odeslat nebo přijmout zprávu od sdíleného pracovníka, musí tak učinit přístupem k a přístav objekt, místo aby tak činil přímo. Takto to vypadá:

sharedWorker.port.postMessage('Ahoj!')
sharedWorker.port.onMessage = funkce(E) {
 console.log('Sdílený pracovník odeslal', e.data);
}

Musíte také použít objekt portu uvnitř pracovníka:

onconnect = funkce(E) {
konst port = e.ports[0];
port.onmessage = funkce(E) {
 console.log('Zpráva přijata', e.data)
 port.postMessage('Ahoj!');
 }
}

The onconnect posluchač se spustí pokaždé, když dojde k připojení k portu (když onmessage posluchač událostí je nastaven v hlavním vlákně).

Když k tomu dojde, kód získá port, ke kterému byl právě připojen z události připojení, a uloží jej do proměnné. Dále kód zaregistruje onmessage posluchač na objektu portu. Kód pak zaznamená zprávu do konzoly a použije port k odeslání zprávy zpět do hlavního vlákna.

Web Workers zlepšuje uživatelskou zkušenost

Weboví pracovníci jsou vlákna JavaScriptu, která vám umožňují spouštět složité a dlouhotrvající části kódu na pozadí. Tento kód pak zabrání blokování uživatelského rozhraní. Použití webových pracovníků značně usnadňuje psaní tohoto druhu kódu a zlepšuje uživatelský dojem z aplikace. Pomocí rozhraní API webového pracovníka můžete vytvářet webové pracovníky a komunikovat s nimi.