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.

Diskuze (113) Další článek: Další patentová kauzička: WiLAN žaluje firmy Apple, HP a Dell

Témata článku: Technologie, Web, Prohlížeče, YouTube, Chrome, Hudba, filmy, seriály, Statistiky, HTML5, Flash, Starý pořad, První parametr, Měření času, Starý notebook, Poslední pokus, Virtuální klávesnice, Stejná firma, Vysoká zátěž, Celý test, Populární videoportál, Triviální nastavení, Vodorovné okno, Nahrané měření, Opakovaný pokus, Virtuální procesor, První pokus, Notebook apple na Mall.cz


Určitě si přečtěte

Jak funguje kontroverzní program, který ženám krade plavky. Mají se čeho bát?

Jak funguje kontroverzní program, který ženám krade plavky. Mají se čeho bát?

** Strojové učení ještě nepřitáhlo takový zájem jako na začátku prázdnin ** Ne, umělá inteligence nenašla lék na rakovinu ** Naučila se svlékat ženy nejen z plavek

Jakub Čížek | 34

Pojďme programovat elektroniku: Postavíme bezpečnostní systém za 30 Kč

Pojďme programovat elektroniku: Postavíme bezpečnostní systém za 30 Kč

** Před pár týdny jste si mohli v akci koupit Wi-Fi desku za jeden dolar ** Nám už TTGO T-Display dorazila do redakce ** Připojíme k ní jazýčkový kontakt a vyrobíme bezpečnostní systém

Jakub Čížek | 30

3D tisk pro naprosté zelenáče: Co vyrobíte na laciném stroji za pár tisíc korun

3D tisk pro naprosté zelenáče: Co vyrobíte na laciném stroji za pár tisíc korun

** Domácí 3D tisk je dnes už finančně dostupný prakticky všem ** Lacinou tiskárnu pořídíte za pár tisíc korun ** Jak vlastně tisk probíhá a jak navrhnout, co vytisknout

Jakub Čížek | 66

Nové iPhony, hodinky a další novinky Applu: Zase bude za co utrácet

Nové iPhony, hodinky a další novinky Applu: Zase bude za co utrácet

Dnes proběhla další velká prezentační akce Applu, na které došlo k odhalení nových iPhonů a dalších novinek. Událost jsme sledovali online, a tak se můžete podívat na chronologický zápis těch nejdůležitějších informací.

David Polesný | 136

Google Coral: Raspberry Pi s čipem, který zpracuje 4 biliony operací za sekundu

Google Coral: Raspberry Pi s čipem, který zpracuje 4 biliony operací za sekundu

** Je to velké jako Raspberry Pi ** Ale je to až o několik řádů rychlejší ** Dorazil nám exotický Google Coral s akcelerátorem Edge TPU

Jakub Čížek | 18



Aktuální číslo časopisu Computer

Speciál o přechodu na DVB-T2

Velký test herních myší

Super fotky i z levného mobilu

Jak snadno upravit PDF