Webdesignérův průvodce po HTML5: Multithreading s WebWorkers

Jednou z největších nevýhod JavaScriptu je, že současné implementace provádí skripty v jednom vlákně. Pokud někde navrhnete příliš složitý výpočet (nebo uděláte chybu, která vyústí v zacyklení), přestane web reagovat a nezpracovává události vyvolané uživatelem. Řešit by to měl koncept Web Workers.

Seriál: Webdesignérův průvodce po HTML5 (21 dílů)

  1. Webdesignérův průvodce po HTML5 – díl nultý 25.5.2010
  2. Webdesignérův průvodce po HTML5 – nová sémantika 1.6.2010
  3. Webdesignérův průvodce po HTML5 – nová sémantika II 8.6.2010
  4. Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15.6.2010
  5. Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22.6.2010
  6. Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29.6.2010
  7. HTML5 Audio: rádio ve vašich stránkách 13.7.2010
  8. Webdesignérův průvodce po HTML5: Microdata 20.7.2010
  9. AppCache: webové aplikace i bez připojení 27.7.2010
  10. Webdesignérův průvodce po HTML5: WebStorage 3.8.2010
  11. Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10.8.2010
  12. Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17.8.2010
  13. Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24.8.2010
  14. HTML5: ukládáme si data k elementům 6.12.2010
  15. Webdesignérův průvodce po HTML5: Táhni a srůstej 5.1.2011
  16. HTML5: První krůčky s FileSystem API 15.2.2011
  17. Mobilizujeme web v HTML5 4.4.2011
  18. Single Page Apps a řešení problémů s historií 1.6.2011
  19. Page Visibility API: Kouká na mě vůbec někdo? 10.8.2011
  20. Práce se soubory v prohlížeči, díl 1 15.8.2011
  21. Práce se soubory v prohlížeči, díl 2 5.9.2011

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.

Jak může pomocník usnadnit výrobu omelet
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.

Umí váš prohlížeč Web Workers? Zjistíte to rychle a přehledně v našem detektoru podpory technologií z rodiny HTML5. Naleznete v něm i odkazy na další články, které se zabývají tímto tématem.

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, MathString
    • 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

Tento článek je volným překladem článku Web Workers rise up!, vydaného na Dev.Opera. Autorem původního textu je Daniel Davis. Překlad vychází s laskavým svolením Opera Software.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Komentáře: 36

Přehled komentářů

v6ak Předat libovolný objekt?
Martin Malý Re: Předat libovolný objekt?
DC Zaujimave ale nebezpecne
MD Re: Zaujimave ale nebezpecne
dc Re: Zaujimave ale nebezpecne
BS-Harou Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
Michal Augustýn Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
Michal Augustýn Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
v6ak Re: Zaujimave ale nebezpecne
bauglir Re: Zaujimave ale nebezpecne
skor webWorker ve webWorkeru
v6ak Re: webWorker ve webWorkeru
Martin Malý Re: webWorker ve webWorkeru
v6ak Re: webWorker ve webWorkeru
Martin Malý Re: webWorker ve webWorkeru
skor Re: webWorker ve webWorkeru
Martin Malý Re: webWorker ve webWorkeru
Zdroj: https://www.zdrojak.cz/?p=3273