Změřili jsme Flash a HTML5 na YouTube. Flash zvítězil

Flash je v očích mnoha čtenářů náročný na procesor, zatímco HTML5 je jasná úsporná budoucnost. Vyzkoušeli jsme to na YouTube a výsledky mohou leckoho šokovat. Je to jinak.

V okamžiku, kdy se na webu objevily první stránky, které nabízely video ve formátu HTML5, tedy video, o jehož přehrávání se postará přímo prohlížeč a nikoliv nezávislý doplněk jako Flash Player nebo třeba Silverlight, se komunita rozdělila na dva nesmiřitelné tábory.

Zatímco první skupina Flash Player okamžitě zavrhla a dala zelenou přehrávání pomocí prohlížeče (HTML5), ta druhá se spolehnula na ověřené řešení. Typickým argumentem první skupiny je vysoká zátěž procesoru při dekódování videa pomocí kodeků H.264 obsažených ve Flash Playeru a také nepříliš dobré zkušenosti s Flash Playerem na systémech Apple, což dokládají špatné zkušenosti drtivé většiny majitelů jablečných počítačů.

Klepněte pro větší obrázek  Klepněte pro větší obrázek
Referenční prohlížeč, videoportál a pořad: vlevo v klasickém Flash Playeru, vpravo v HTML5

Rozhodl jsem se, že si tuto městskou legendu ověřím v praxi a na svém vlastním počítači změřím zátěž procesoru v případě přehrávání totožného videa pomocí Flash Playeru a HTML5. Na pomoc jsem si vzal YouTube, který dnes obě technologie nabízí a vytváří díky své velikosti určitý standard. Neměřil jsem tedy zátěž Flashe a HTML5 na libovolném webu, ale právě na YouTube.

Metodika testu

Abych dostál co nejvyšší transparentnosti a standardizovaného měření, napsal jsem si v C# jednoduchý program. Jeho úkol je jediný, po spuštění každé dvě sekundy sečte procesorový čas všech spuštěných procesů se jménem chrome a hodnotu z každého cyklu uloží do formátu CSV s časovou značkou měření. Poté jsem použil program Advanced Key and Mouse Recorder, což je vlastně programovatelná virtuální klávesnice a myš. Pokud v programu nahrajete nějaký pohyb po ploše a stisky kláves, vše si pak můžete přehrát a kurzor myši se bude podle nahraného makra přesně pohybovat po desktopu a klepat a klepat… Virtuální myš jsem musel použít z důvodu synchronního záznamu.

Klepněte pro větší obrázek
Pro potřeby měření jsem si ve Visual C# napsal triviální měřící program

Jakmile jsem nahrané makro spustil, virtuální myš v přesně stanoveném času spustila monitorovací program pro záznam spotřeby procesorového času, poté zcela pročištěný Chrome 13 po čerstvé instalaci bez jediného doplňku a nakonec v něm virtuální klávesnice naťukala adresu videa posledního Týdne Živě na YouTube. Okno nebylo maximalizované a přehrávač se spustil s výchozí kvalitou 360p. Po 46 sekundách od spuštění monitoru CPU se video přepnulo do celoobrazovkového režimu. V případě Flash Playeru se v takovém případě video automaticky přepne na vyšší kvalitu 480p, u verze HTML5 se ale jen původní video 360p rozšíří na celé okno prohlížeče a vy jej musíte maximalizovat ručně (virtuálně se tedy stiskla i klávesa F11).

Klepněte pro větší obrázek  Klepněte pro větší obrázek
Abych při opakovaných pokusech prováděl akce vždy ve správné posloupnosti a čase, myš a klávesnici za mě používal automat – zkušební verze Advanced Key and Mouse Recorder

Video s Týdnem Živě se přehrávalo ještě několik desítek sekund, a pak virtuální myš v přesném čase vše ukončila. Abych se vyvaroval odchylek, toto kolečko se automaticky opakovalo pětkrát po sobě nejprve pro YouTube s Flash Playerem a poté pro YouTube v režimu HTML5. Na úplném konci jsem pak porovnal zprůměrované hodnoty spotřeby CPU času pro Flash Player a HTML5.

Procesorový čas

Ještě než se vrhnu na výsledky, dovolte mi několik odstavečků o použité jednotce. V běžném životě jsme sice zvyklí počítat zátěž procesoru v procentech (Firefox právě „žere“ 50 % CPU aj.), nicméně to je jednotka uměla, relativní a je tu pouze pro nás. Samotný počítač pracuje s procesorovým časem, tedy s dobou, během které byl procesor (nebo přesněji jádro) vytěžovaný nějakým procesem. Takže pokud bude základním intervalem třeba jedna minuta a během ní bude váš procesor vytěžovat třeba Chrome po dobu 59 000 milisekund, znamená to, že jej v tomto intervalu vytěžoval na 98,3 %. V případě MT a vícejádrových procesorů, kde se uplatňuje paralelizace, to tak jednoduché už ale pochopitelně není.

Procentuální vyjádření zátěže třeba ve Správci úloh na Windows ale zpravidla pracuje s mnohem kratšími časovými úseky. Z takového grafu se pak sice dozvíme, že v poslední sekundě nějaký proces vytěžoval jádro na 99 %, ale nemůžeme popsat vytěžovaní procesoru v nějakém dlouhodobějším intervalu a nemůžeme sledovat ani dynamiku tohoto vytěžování.

Právě proto jsem namísto procent použil originální čas. Díky tomu v grafech níže nevidíte, jak u obou verzí YouTube lítá vytěžování CPU nahoru a dolu, ale naopak křivku, která míří neustále nahoru. Jsou to prostě postupně rostoucí hodnoty spotřebovaného času CPU všemi procesy Chrome.exe od jejich spuštění.

Důležité jsou tedy hodnoty na ose Y, ale zároveň (a především) tvar křivky. Když proces zrovna CPU nevytěžuje, křivka je vodorovná (procesorový čas neroste). Pokud naopak začne proces něco počítat, křivka zamíří ostře vzhůru.

Konečně výsledky

A teď už konečně surová data. Upřímně jsem si myslel, že Flash Player asi nedopadne ve srovnání s čistým streamováním a dekódováním videa Chromem zrovna nejlépe. O to více mě překvapilo, že při prvním pokusu spotřeboval během devadesáti sekund Chrome s Flash Playerem skoro třikrát méně procesorového času. Flash Player byl tedy třikrát úspornější než HTML5. Nedalo mi to a test jsem čtyřikrát zopakoval. Dopadlo to v podstatě úplně stejně. Samozřejmě vznikly odchylky, nebyly ale nikterak výrazné a můžete se na ně podívat v grafech níže.

Klepněte pro větší obrázek
 

Klepněte pro větší obrázek
První sekundy po spuštění jsou identické, Chrome se totiž spouští běžným způsobem. Teprve okolo desáté sekundy se spouští video. V čase 00:46 se video přepne do celoobrazovkového režimu, na zvýšené spotřebě (strmější růst) se to ale výrazněji nepodepíše. Pouze u Flash Playeru je patrný skok díky automatickému přechodu rozlišení z 360p na 480p.

Co z toho všeho plyne? Na mém počítači, tedy na Windows 7 a s poslední veřejnou verzí Flash Playeru řady 10 je video na YouTube méně náročně právě při přehrávání skrze kontejner Flash Playeru. Čím je to způsobené? Důvodů může být několik. V případě Flash Playeru se mohla na lepší práci CPU podepsat akcelerace, jiný kodek (H.264) a případně jeho lepší nastavení. YouTube v HTML5 používá v Chromu formát WebM, tedy kodek VP8, který je stále ve vývoji a zatím nedosahuje kvalit H.264, jakkoliv je jinak licenčně svobodný a tedy pro mnohé velmi lákavý.

Klepněte pro větší obrázek
Porovnání průměrů z pěti pokusů pro Flash Player a HTML5. Zde je rozdíl myslím dostatečně zřejmý.

Celý test jsem provedl na svém notebooku Acer Aspire TimelineX 3820TG, který je poháněný mobilní verzí Intel Core i5-430M. Z pohledu současné architektury Sandy Bridge je to tedy už starší model z ledna roku 2010. Otázkou zůstává, jak by se s takovým testem vypořádaly ostatní platformy a zejména pak ty starší čipsety.

Pokud ale máte na počítači nainstalovaný Windows 7 a vaše základní deska je vyzbrojena některým z novějších „jádrových“ Intelů, měli byste každopádně dosáhnout podobných výsledků.

Dobré, nebo špatné?

Po 1 minutě a 42 sekundách si Chrome v případě Flash Playeru uzmul 11,3 sekund procesorového času. To tedy odpovídá průměrné zátěži 11 %. V případě HTML5 si Chrome a YouTube sebraly 27,6 sekund, což při 01:42 dlouhém záznamu odpovídá celkové zátěži 27 %. V obou případech se tedy jedná o činnost, která by neměla současný počítač žádným způsobem omezit. Pokud ale máte na stole několik let starý notebook, nebo počítač, situace může být pochopitelně úplně jiná. Takový počítač už dnes ale jednoduše nelze považovat za referenční.

V příštích dnech a týdnech budu metodiku neustále zlepšovat a vedle YouTube změřím spotřebu procesorového času i u jiných služeb a s jinými parametry (HD video). Pokud tedy znáte nějaké takové, které používají jak Flash Player, tak HTML5, určitě se pochlubte v diskuzi pod článkem a s radostí je použiji.

Toto jsou tedy moje změřené – empirické zkušenosti. A co ty vaše subjektivní? V diskuzi uvítáme slušné a věcné komentáře, ze kterých se budeme moci inspirovat.


Předmětem testu byl pouze YouTube. Na jiných portálech a webech může naopak HTML5 zvítězit, vše totiž záleží na použitém kodeku videa, přenosovém datovém toku a dalších parametrech. A stejně tak může vše pozměnit konkrétní prohlížeč, který může mít odlišně implementované kodeky pro video v HTML5. Chrome jsem použil jako referenční prohlížeč, protože jej vyvíjí stejná firma jako YouTube, měl by tedy být nejlépe odladěný i pro verzi HTML5 populárního videoportálu.

Témata článku: Web, Technologie, Prohlížeče, Chrome, Statistiky, Hudba, filmy, seriály, YouTube, Flash, HTML5, Player

113 komentářů

Nejnovější komentáře

  • Rage_Matt 11. 9. 2011 0:52:53
    No dopredu chcem povedať že v danej problematike sa zrejme moc nevyznám...
  • BluPix 9. 9. 2011 21:00:31
    Když už do hry vstupuje i GPU akcelerace, možná by bylo lepší rovnou měřit...
  • Gogoch 8. 9. 2011 18:13:41
    proc merite v chromu a ne treba v IE9 ci Safari ktere podporuji kodek...
Určitě si přečtěte

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

** Programátorů je málo a horníků bez práce po uzavření dolu Paskov bude moc ** Problém řeší unikátní projekt ** Pilotní kurz dává naději, že by z horníků mohli být použitelní kodéři

28.  11.  2016 | David Polesný | 78

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 123