Nemáte rádi flashové reklamy? HTML5 vás nezachrání

Máte pocit, že vám Flash Player zatěžuje počítač natolik, že dopadnete jako mašina na obrázku? HTML5 vás ovšem nespasí, za chybami totiž často nestojí samotná technologie.

Jsou to necelé dva týdny, co redaktoři magazínu Ars Technica provedli test, v rámci něhož zjistili, že aktivní Flash Player v prohlížeči sníží výdrž baterie nového Macbooku Air o celou třetinu. Reakce na původní zápisek tak trošku připomínaly diskuzi pod nejedním výbušným článkem na Živě.cz, sešlo se jich tam totiž rovnou pět stovek. Tématu jsme se nakonec v podobě bleskovky věnovali i u nás na Živě.cz.

Proč se vlastně celá kauza dočkala takové čtenářské reflexe? Zatímco jedni výsledky testu brali jako jasný důkaz toho, že je Flash Player jednoduše špatná technologie, která na počítači nemá co dělat, jiní poukazovali na fakt, že redaktoři Arsu pouze objevili Ameriku.

Flashová reklama není animovaný GIF

Pravda bude někde na půli cesty. Flash Player dnes tvoří nedílnou součást webu, zadavatelé a výrobci reklam totiž využívají jeho interaktivních a animačních schopností. Jednoduše řečeno, animovaný GIF, nebo statický JPEG nedokážou ani zdaleka to, co dokáže Flash Player. A jelikož je reklama nejtypičtějším příjmem komerčních webů, je poněkud naivní předpokládat, že s případným odchodem by své návyky změnili i zadavatelé reklam. Reklama odjakživa křičí a žádá si vaši pozornost, pro křik by tedy pouze použila jiný jazyk. Třeba hojně citované technologie pod společnou hlavičkou známou jako HTML5.

Klepněte pro větší obrázek
Nebudu naivní, takto titulní stránku Živě.cz možná někteří z vás neznají

Na začátku odstavce jsem napsal, že pravda je někde na půli cesty. Ihned to vysvětlím. Flash Player skutečně spotřebovává drahocennou energii, neboť dnes zpracovává náročné úkoly. Zatímco animovaný GIF pouze v časové periodě vykresluje jednoduchý rastr a jeho animace je tedy z výpočetního hlediska triviální, jednoduchý flashový banner může přehrávat (tedy i dekódovat) náročnější internetové video, v reálném čase počítat a vykreslovat nejrůznější vektorovou a rastrovou grafiku a to vše zároveň ještě animovat, deformovat a obohacovat nejrůznějšími efekty. Pokud si pak autor takové grafiky neuvědomuje technické pozadí interpretace Flashe na procesoru (ostatně proč by měl, je to přeci grafik – designér), hotové dílo může být neskutečně náročně a bez problému vytíží procesor i několikanásobně více než přehrávání 1080i AVCHD videa v multimediálním přehrávači (i díky tomu, že v tomto případě se může ve velkém zapojit grafický čip).

HTML5 pohádkově zrychlí web? To je iluze

Suma sumárum, špatný není ani tak Flash Player samotný ale především ten, kdo pro něj píše a navrhuje špatné aplikace. I zde se jednoduše nabízí staré dobré pravidlo, že sice svůj první program dokáže napsat skoro kdokoliv, jen ti nejlepší jej ale dokážou napsat dobře – efektivně a úsporně. Troufám si říci, že toto pravidlo dnes platí zejména u skriptovacích jazyků, které mají jednodušší „štábní kulturu“ než velké jazyky. Takové netypové PHP je neskutečně jednoduché, nedodržuje totiž skoro žádná pravidla. Můžete v něm tedy napsat skvělý webový program, ale také aplikaci, která sice bude fungovat, ale správci webového hostingu se brzy začnou pídit po tom, proč jim najednou kdosi tak nešťastně vytěžuje procesor.

Klepněte pro větší obrázek
S vypnutým Flash Playerem je zátěž procesoru logicky nižší, zpracovává se totiž méně operací.
Jak ovšem dokládá graf níže, rozdíly nemusí být vůbec velké – záleží i na
kvalitě programátora a designéra animace

Posuňte se nyní v čase do nějaké snové hypotetické doby, kdy už Flash Player prohrál svůj boj s HTML5. YouTube používá namísto objektového přehrávače HTML tag <video>, internetové rádio Last.fm a další pro změnu zase <audio>. Je to skvělá doba, nové jsou ovšem i reklamy.

Takže jak se změnily? Namísto otravného Flashe vás nyní otravuje otravný Javascript, který animuje vektorovou a rastrovou grafiku napsanou pomocí technologií SVG a Canvas. Javascript a Actionscript (jazyk Flashe) mají společný základ v ECMAscriptu a oba jsou dnes velmi výrazně optimalizované. Ovšem zatímco přehrávač pro Actionscript vyvíjí oficiálně pouze Adobe, přehrávač pro Javascript (tedy samotné prohlížeče) vyvíjí hned několik hráčů a jejich vzájemný výkon se liší. Ostatně proto stále dokola píšeme o SunSpideru a dalších testech, které tento výkon měří a jednoduše porovnávají všechny webové prohlížeče.

Klepněte pro větší obrázek
Představte si, že načtete titulní stránku Živě.cz v maximalizovaném okně nejprve s vypnutým Flash Playerem a pak se zapnutým. Jak bude postupně narůstat spotřeba procesorového času v první minutě, aniž byste pohli myší? Pokud nebude prohlížeč vykonávat žádnou činnost, jeho spotřeba CPU času (vytěžování procesoru) bude v grafu v tom okamžiku vyjádřena vodorovnou čarou. Pokud naopak bude prohlížeč neustále něco počítat na procesoru, v grafu se to projeví navýšením CPU času a čára zamíří vzhůru. V tomto případě jsem změřil titulku Živě.cz vícekrát vždy s jinými reklamami (Flash 1 a 2). V obou případech to byly velmi podobné animované bannery, přesto v případě 1 spotřebovaly 2x více procesorového času. Na vině tedy může být špatný návrh animace. Nicméně i HTML5 dokáže být neskutečně náročný, což dokládá červená čára. Takto procesor zatíží ukázková HTML5 reklama na těchto poměrně jednoduchých stránkách. Nutno podotknout, že ji autor schválně neoptimalizoval, chtěl totiž dokázat, že i jednoduchá HTML5 grafika dokáže být neskutečně náročná.

Vývojáři v HTML5 budou také dělat chyby

Jak změřit Flash Player

V současné době existuje celá hromada technik a postupů, jak měřit náročnost Flashe na systémové prostředky a tedy i na spotřebu baterie notebooku. Já si pro tyto účely napsal jednoduchý program, který počítá vzrůstající procesorový čas přidělený prohlížeči. Jak to funguje? Každé čtyři sekundy jsem změřil, kolik milisekund od startu prohlížeč strávil výpočty pomocí procesoru. Pokud prohlížeč po minutové činnosti bez zásahu surfaře zatíží procesor celkově na jednu sekundu při vypnutém Flashi a na deset sekund při Flashi zapnutém, mohu prostým rozdílem spočítat režii a tedy náročnost flashové animace a načteného doplňku prohlížeče.

Klepněte pro větší obrázek
Měříci program KloboukBench

Co z toho všeho plyne? Zatímco velmi slušný prohlížeč přehraje animovanou reklamu, jiný ji může přehrávat s mnohem většími obtížemi. Ale tím to nekončí. Další ranou je standardizace. Zatímco současný Flash Player zvládne na všech podporovaných platformách prakticky to samé, zvláště u těch nejnovějších standardů CSS3 a HTML5 v případě prohlížečů už to tak neplatí. Ke všemu každý prohlížeč může některé vlastnosti jazyka interpretovat trošku jinak. HTML5 reklama by teoreticky při použití některých exotičtějších vlastností mohla vypadat v každém prohlížeči  trochu jinak. Řešením by byla optimalizace pro každý prohlížeč zvlášť, jak se tak děje i dnes v případě běžných webů, to by ale způsobilo opětovný nárůst velikosti webového kódu a případnou výkonnostní režii při překladu stránky do grafické podoby.

No a nakonec to nejdůležitější. Pokud umíme psát špatné flashové reklamy, kde bereme víru, že HTML5 reklamy budeme naopak umět psát dokonale? Zatímco Flash Player tu s námi existuje už desetiletí a je tedy poměrně otestovaný včetně hromady dostupné literatury, SVG a Canvas jsou společně s celým HTML5 poměrně velmi živé technologie, jejichž standardizovaná podoba a schopnosti se budou v průběhu příštích let ještě měnit. Riziko špatného HTML5 kódu je zde tedy mnohem vyšší.

Zatím je ještě příliš brzy tvrdit, která technologie je kvalitnější a úspornější – prostě efektivnější, HTML5 bannery se na webu v produkční podobě totiž zatím prakticky nevyskytují. Pokud ovšem sníte svůj technologický sen, ve kterém odchod Flash Playeru vše vyřeší, rychle se probuďte, tak tomu totiž skutečně nikdy nebude.

Webové reklamy jen tak neubude, leda by se jejich nominální komerční hodnota zvýšila přelivem zájmu z tištěných médií. internetová média a webové animace zároveň nejsou perpetum mobile. Zatímco redaktoři a nadřízení musí z něčeho žít, rozpohybovaný obrázek musí někdo vypočítat. A to bude vždy procesor – ať už ten základní, nebo grafický.


Máte pocit, že vám animace na webu vytěžuje procesor až příliš? Nezoufejte, ačkoliv je dnes totiž webový prohlížeč jeden z nejpoužívanějších a zdaleka nejdůležitějších programů,  proti skutečně náročným operacím je to pouze slabý trpaslík. Porovnejte nyní zdánlivě „supernáročnou“ HTML5 reklamu z prvního grafu s kódováním H.264 videa, kdy se procesor skutečně zapotí.

Klepněte pro větší obrázek
Vše je relativní, špatně navržená HTML5 reklama je při srovnání s kódováním videa rázem „zanedbatelná“. Ačkoliv se vám může zdát, že ten rozdíl zase není tak velký, považte, jak by se nůžky rozevřely namísto po minutě po deseti minutách. To už by byly mnohonásobné rozdíly.

Témata článku: Technologie, Web, Prohlížeče, Programování, Hudba, filmy, seriály, Reklama, HTML5, Reflex, Velký test, Player, Flash Player, Adobe Air, Canvas, Náročný test, Vodorovné okno, Náročná operace, Velká náročnost, Trpaslík, Procesorový čas, Slabá baterie, Animovaný GIF, Velká spotřeba, Jednoduchá cesta, Komerční činnost

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

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

** Tesla představila elektrický kamion ** Má obdivuhodný výkon i dojezd ** Prodávat by se měl už za dva roky

17.  11.  2017 | Vojtěch Malý | 229

Black Friday 2017: Přehled slev na elektroniku a počítače

Black Friday 2017: Přehled slev na elektroniku a počítače

** Začala slevová mánie zvaná Black Friday ** Pozor, ne všechny slevy jsou opravdu výhodné ** Průběžně sledujeme slevové akce v počítačových e-shopech

Včera | David Polesný | 24

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

** Nový design Google Map přijde na počítače i mobilní telefony. ** Zaměřuje se na zvýraznění konkrétních míst, mapové podklady jsou mnohdy upozaděné. ** Lépe pracuje s chráněnými oblastmi a parky.

20.  11.  2017 | Vladislav Kluska | 29

Bluetoothové patálie: O bezdrátovém přenosu hudby a  problémech s kodeky

Bluetoothové patálie: O bezdrátovém přenosu hudby a problémech s kodeky

** Bezdrátový přenos hudby je budoucnost ** K dosažení nejlepší kvality je ale potřeba, aby telefon i sluchátka podporovala správný kodek ** Záleží také na typu souborů s hudbou

17.  11.  2017 | Jakub Michlovský | 39


Aktuální číslo časopisu Computer

Otestovali jsme 5 HDR 4K televizorů

Jak natáčet video zrcadlovkou

Vytvořte si chytrou domácnost

Radíme s koupí počítačového zdroje