Po přečtení našeho květnového článku o jádru prohlížeče jste možná přemýšleli, kam chce Mozilla posunout budoucnost prohlížečů. Naznačili jsme vlastně už o něco dříve článkem a ukázkou projektu WebRender. Lin Clark teď na blogu hacks.mozilla.org osvětluje, v čem je schované kouzlo vykreslování pomocí WebRenderu, a kdy se dočkáme.
Z experimentálního jádra Servo už je na přímé cestě do Firefoxu CSS knihovna Stylo. Ta sama o sobě zrychluje vykreslování stránek ve Firefoxu a dokonce snižuje spotřebu paměti, ale pořád tu máme WebRender, který v novém „motoru“ Firefoxu chybí.
O WebRenderu se mluví jako o velmi rychlém, spíše než o rychlost jde ve skutečnosti o plynulost. S WebRenderem chce Mozilla náročné aplikace nebo virtuální realitu v prohlížeči dostat ze současných jednotek snímků za sekundu na desítky nebo víc, bez ohledu na velikost a rozlišení obrazovky. A jak to udělá? Od základu má jiný návrh inspirovaný hrami. Ale postupně…
Co vykreslování vůbec dělá?
Po stažení stránky musí prohlížeč nejdřív analyzovat všechen kód a styly a zjistit, jak bude stránka vypadat – kde budou jaké prvky. Pak přichází vykreslovací část a zobrazení stránky na displej. To není potřeba jenom při první načtení stránky, ale vlastně kdykoliv se na ní něco změní, posunete stránku nebo označíte myší text, vykreslovací část jádra má zkrátka pořád co dělat.
Aby všechno vypadalo plynule a hladce, je potřeba vykreslovat alespoň při 60 snímcích za sekundu (FPS – frames per second). To si můžete představit jako rychlé otáčení listů knížky. 60 FPS znamená rychle otočit 60 listů stránky každou vteřinu.
Každý snímek si můžeme představit jako čtverečkovaný papír, kde může být v každém čtverečku jenom jedna barva. Prohlížeč musí všechny tyto velmi malé čtverečky vybarvit za necelých 17 ms (při 60 snímcích za vteřinu). Pokud ale některý z papírů včas nestihne dokončit, uvidíte při posunu trhnutí. Něco jako když z výše uvedené knížky vytrhnete jeden list.
Ještě krátce z historie
Vykreslování je historicky komponenta, kde se jednotlivé prohlížeče nejvíce odlišují. Už první prohlížeče se snaží o určité optimalizace, zejména pro pohyb jenom některých prvků, kdy ostatní zůstávají statické. Ukázka vhodného použití je třeba pro blikající kurzor.
Moc dobře je tu vidět, jak malý kousek je vlastně potřeba znovu vykreslit. Někdy se ale musí kreslit velké oblasti, a co potom? Pro některé případy vytváří prohlížeče tzv. vrstvy, které skládají přes sebe, podobně jako průsvitky nebo výstřižky z papíru. Při posunu stránek si může prohlížeč nechat vykreslenou stránku delší dobu a jenom ji posunovat. Těmto postupům se říká skládání a i to samo o sobě znamená docela dost práce, které většinou musí udělat hlavní proces. Ten už má tak dost práce, protože se stará o obraz stránky, JavaScript a další. Každá práce s vykreslováním tak znamená méně času na běh JavaScriptu v dnešních bohatých webových aplikacích, a teď, co dělat dřív?
Naštěstí je tu kousek hardwaru, který všechno tohle umí a nějakých 20 let ho masivně využívají hlavně hry – grafický čip GPU. Samotné vykreslování může být na grafické kartě obtížné, ale některé prohlížeče už k němu GPU využívají, skládání na GPU je docela hojné. Grafické čipy mají stovky nebo někdy i tisíce jader, takže mohou vykonávat najednou veliké množství procesů. Smutnou pravdou je, že zrovna na výše popsané kroky vykreslování a skládání se vůbec nehodí.
Využití GPU po vzoru herních enginů
Co když přestaneme pro vykreslování řešit jednotlivé vrstvy? A zahodíme celý koncept odděleného kreslení a skládání do jednoho snímku na obrazovce? Návrat k jednoduchosti a vykreslování celé obrazovky znovu a znovu zní šíleně, ale přesně takhle dneska fungují všechny herní enginy. S využitím procesoru (CPU) by to bylo opravdu bláznovství, nicméně díky grafickým čipům s mnoha jádry je to možné a dokonce mnohem plynulejší než stávající přístup. Stovky a tisíce jader GPU se totiž přesně hodí na vybarvování jednotlivých čtverečků. Stačí celou stránku rozdělit to jednoduchých tvarů a pak grafickému čipu říci, co a kam nakreslit.
Co přesně tedy dělá WebRender jinak? Díky novému způsobu využití není potřeba rozdělení na vykreslování a skládání vrstev. Vlastně vůbec nejsou potřeba žádné vrstvy. Pro zobrazení stránky/snímku vlastně stačí jenom stránku rozdělit na malé jednoduché obrazce a poprosit grafický čip o jejich nakreslení. Trochu složitější je to ještě u písma, které je těžké rozdělit na jednoduché obrazce, takže o písmo se pořád u WebRenderu stará procesor. Na druhou stranu text a jeho písmo se moc nemění, takže ho stačí připravit jenom jednou.
Super, kdy to bude?
Tenhle postup zní možná naivně, ale díky modernímu hardwaru doopravdy funguje. Kdy to ale bude ve Firefoxu? Zatím Mozilla doufá někdy v průběhu roku 2018. Závisí na tom i rychlé fungování Firefoxu pro vysoká rozlišení nebo virtuální realitu (WebVR), kde je potřeba ve vysokém rozlišení na úrovní 4K zobrazovat snímky o frekvenci dokonce 90 FPS. Integrace do Firefoxu už je plném proudu a můžete ji sledovat na GitHubu nebo Twitteru.
Celý článek v původním znění najdete na serveru hacks.mozilla.org.