Představte si, že stavíte dům (ti, co mají zkušenosti se stavbou domu v ČR, si pro jistotu představí, že staví někde, kde řemeslníci fungují). Stavíte ho sami – jeden týden děláte vodu, další elektroinstalaci, další zavádíte plyn… Když děláte jednu věc, nemůžete dělat jinou. A teď si  představte, že máte k dispozici řemeslníky, kteří přijdou, udělají to co udělat mají, uklidí po sobě a zase odejdou. Na stavbu si jich klidně najmete víc, takže zatímco v jedné místnosti elektrikář tahá dráty a zapojuje lustr, tak v jiné už se malíř ohání štětkou a v další jiná parta pokládá koberec. Nakonec je dům postavený rychleji a kvalitněji, než kdyby všechny činnosti dělal jeden jediný člověk jednu po druhé.

Připadá vám to jako velká fantazie? No, pravděpodobně ano – většina z nás nemá příliš dobré zkušenosti s řemeslníky. Naštěstí pro webdesignéry není „dobrý řemeslník“ zas taková fantazie – pokud máme na mysli ty digitální. Seznamte se s webovými řemeslníky – s technologií Web Workers.

K čemu jsou Web Workers

Už jste někdy byli na stránce, která se sice zobrazila, ale nereagovala na klikání? Nebo na stránce, která úspěšně zasekla váš prohlížeč a řekla si o 98 % dostupného výkonu CPU? Ve většině případů je příčinou JavaScript. Webové stránky používají JavaScript čím dál víc, webdesignéři jej mají rádi, protože jim umožňuje vytvářet velmi interaktivní weby, ale daní za to, že fungují všude možně, je i to, že leckdy běží na strojích, které nemají výkon odpovídající nárokům dnešních webových aplikací. Existují postupy jak optimalizovat JavaSript, ale rychlosti nativního kódu se nepřiblížíme ani zdaleka. Navíc některé problémy ani sebelepší optimalizací nevyřešíme.

Webdesignéři se ale kvůli tomu nemusí vzdávat využití JavaScriptu. Místo toho jim vycházejí vstříc tvůrci prohlížečů a nabízejí technologie, které zlepšují kvalitu práce s JavaScriptem. Příkladem takové technologie jsou právě Web Workers.

Jak Web Workers fungují

Většina moderních jazyků (a moderních systémů) je vícevláknová (multi-threaded), což znamená, že podporují vykonávání několika procesů zároveň. Udělat JavaScript vícevláknový by znamenalo udělat jej znovu (a jinak), proto přichází Web Workers s řešením, které za jistých okolností umožní spuštění více vláken najednou. S určitými omezeními lze pak provádět víc než jeden proces v jednu chvíli.

Kde to lze použít?

Vraťme se k naší analogii s řemeslníky na stavbě: Web Workers jsou takoví jednoúčeloví pomocníci (přidavači), kteří dělají jen jednu věc, ale dělají ji dobře. Jsou perfektní na rychlé výpočty, ale složitější práce, jako třeba operace s DOMem (neplést s „domem“), dělat nemohou. Kdybychom náš web přirovnali ke kuchyni, tak si můžeme hlavní JavaScript představit jako Vedoucího Výroby Omelet. Když dělá všechno sám, musí připravit pánev, rozehřát tuk, rozbít vejce a smažit. Pokud chce být produktivní, může si najmout pomocníka, který bude rozbíjet vajíčka místo něj, což mu umožní, aby se věnoval přípravě pánve a vlastnímu smažení. Pomocník nesmí na pánev sahat, pouze plní zadaný úkol, aby se šéfkuchař mohl věnovat jiné práci.

Autor: Daniel Davis pro Opera Software

Jak může pomocník usnadnit výrobu omelet

S Web Workers je to podobné. Pokud potřebujete v JavaScriptu zařídit nějaké výpočetně náročné operace, můžete je přenechat nějakému pomocníkovi, aby se postaral o potřebné, zatímco hlavní proces nerušeně pokračuje dál. Můžete si takových pomocníků vytvořit několik, a každý může dělat víc činností. Pojďme si je ukázat na příkladu.

Prostě ukaž zdrojový kód!

Ještě vydržte, už tam skoro budeme! Worker sám je prostě jen kus JavaScriptu ve vlastním souboru. Protože základem konceptu Web Workers je vykonávání kódu v oddělených vláknech, je třeba, aby byly tyto odděleně vykonávané kódy v samostatných souborech. Co pomocník – Web Worker, to vlastní soubor. V našem příkladu začneme tím, že si vytvoříme prázdný soubor a nazveme jej  worker.js.

V hlavním JavaScriptovém vlákně použijeme odkaz na tento soubor při vytváření nového pomocníka – objektu  Worker:

var worker = new Worker('worker.js');

Pomocníkovi dáme něco ke zpracování, on s tím něco udělá a vrátí nám výsledek své práce – podobně jako ten výše zmíněný kuchtík. S Workerem se domlouváme pomocí metody  postMessage  :

// Vytvoříme nový objekt worker
var worker = new Worker('worker.js');
// Pošleme mu zprávu, čímž ho donutíme pracovat
worker.postMessage();

Můžeme mu samosebou předat nějaké hodnoty ke zpracování:

// Vytvoříme nový objekt worker 
var worker = new Worker('worker.js');
// Pošleme mu zprávu a přihodíme i hodnoty ke zpracování
var info = 'Weboví dělníci';
worker.postMessage(info); 

V samotném kódu Web Workera, tedy v souboru worker.js, použijeme obsluhu události onmessage k přijetí dat a zahájení potřebných prací. Pokud budeme ve zprávě předávat nějakou proměnnou, můžeme k ní přistupovat přes event.data třeba takto:

// Přijmeme zprávu z hlavního vlákna
onmessage = function(event) {
  // Něco uděláme
  var info = event.data;
};

Posílání zpráv zpátky hlavnímu vláknu používá naprosto stejný postup ( worker.js):

// Přijmeme zprávu z hlavního vlákna 
onmessage = function(event) {
  // Něco uděláme
  var info = event.data;
  var result = info + ' dejme se na pochod!';
  postMessage(result);
}; 

V hlavním vlákně ošetříme došlou zprávu

// Vytvoříme nový objekt worker 
var worker = new Worker('worker.js');
// Pošleme mu zprávu a přihodíme i hodnoty ke zpracování
var info = 'Weboví dělníci';
worker.postMessage(info);

// Přijmeme zprávu od pomocníka
worker.onmessage = function (event) {
  // a něco s ní uděláme
  alert(event.data);
}; 

Můžete si naši malou demonstraci Web Workers stáhnout a vyzkoušet.

Opera je navržena jako jednovláknový prohlížeč kvůli podpoře různých platforem, proto současná implementace Web Workers prokládá vykonávání kódu v jednom vláknu. Jiné prohlížeče mohou mít vícevláknovou architekturu a mohou spouštět vlákna Web Workers jako oddělené procesy.

Mějte na paměti, že…

Výše uvedený příklad je velmi jednoduchý, ale když svěříte Web Workerům nějaké komplikované úlohy, jako zpracování velkých polí či výpočty souřadnic bodů v 3D prostoru, stanou se velmi užitečnou pomůckou. Důležité je pamatovat si, že výpočty spuštěné v oddělených vláknech jako Web Workers nemohou přistupovat k obsahu stránky přes DOM. Ve výše uvedeném příkladu bychom např. nemohli volat alert() přímo z kódu worker.js, ani bychom nemohli volat např.  documen­t.getElementBy­Id()  — pomocný kód může pouze přijímat a odesílat proměnné, i když proměnnou může být řetězec, číslo či jakýkoli JSON objekt.

Představení Web Workers zakončíme stručným přehledem toho, co v nich lze použít a co ne.

• Můžete použít:
  • objekt navigator
  • objekt location (pouze ke čtení)
  • metodu importScripts() (pro přístup ke skriptům ze stejné domény)
  • JavaScriptové objekty, jako jsou Object, Array, Date, Math,  String
  • XMLHttpRequest
  • setTimeout() a setInterval()
• Nemůžete přistupovat k:
  • DOMu
  • Rodičovské stránce, která pomocný proces vytvořila (s výjimkou předávání dat přes  postMessage())

Podpora v prohlížečích

V době psaní článku podporují Web Workers pouze některé prohlížeče, takže by tato funkce měla být používána obezřetně. Namísto sledování verzí prohlížečů můžete v kódu použít snadnou metodu ověření podpory Web Workers. Stačí testovat existenci vlastnosti Worker objektu  window:

// Zjištění podpory WebWorkers
if (!!window.Worker) {
  // Skvěle, nudnou práci udělá někdo jiný!
}

Web Workers se hodí v situacích, kdy nechceme nechat uživatele stránky zbůhdarma civět na nereagující nehybnou stránku, zatímco se na pozadí něco počítá. Namísto toho se může hlavní vlákno soustředit na práci s uživatelským rozhraním a na rychlou interakci s uživatelem, zatímco vlákna Web Workers mohou na pozadí zpracovávat data a komunikovat pomocí AJAXu se serverem. Což je skvělé a úžasné a všichni budou šťastní…

Odkazy k tématu

• Poslední verze specifikace Web Workers
• Jednoduchá ukázka Web Workers, autor: Remy Sharp
• Ukázka Web Workers – spojování bodů, autor: Brandon Aaron
• Úvod do Web Workers API, autor Nicholas C. Zakas
• Detekce podpory HTML5 a souvisejících JavaScriptových API, autor: Mark Pilgrim
• Ukázka raytracingu v JS s pomocí Web Workers
• Práce s Web Workers, Mozilla Developer Central