Rendering engine (vykreslovací jádro)

Příklady z praxe

1. 01

   Layout thrashing v seznamu položek

   Skript prochází sto prvků, každému nastaví šířku a hned poté si přečte jejich výšku. Každé čtení donutí engine dokončit layout, takže místo jednoho přepočtu jich proběhne sto. Oprava spočívá v rozdělení fáze čtení a zápisu: nejdřív se posbírají všechny hodnoty, pak se teprve zapisuje.

   // špatně: čtení a zápis se střídají
   items.forEach(el => {
     el.style.width = '200px';
     console.log(el.offsetHeight); // vynutí layout
   });
   
   // lépe: nejdřív číst, pak zapisovat
   const heights = items.map(el => el.offsetHeight);
   items.forEach((el, i) => {
     el.style.width = heights[i] + 'px';
   });

2. 02

   Rozdílný výsledek ve WebKitu a Blinku

   E-shop testovaný jen v Chromu vypadá na iPhonu rozbitě, protože Safari používá WebKit s odlišnou implementací některých CSS vlastností a jiným časováním prohlížečových událostí. Na iOS je WebKit povinný i pro Chrome, takže testování v desktopovém Chromu problém neodhalí. Řešením je test na reálném zařízení nebo v simulátoru Safari.

Časté omyly

MýtusChrome, Edge a Opera jsou různé prohlížeče, takže je stačí otestovat všechny tři.

Ve skutečnostiChrome, Edge i Opera stojí na jádru Blink, takže se ve vykreslování chovají prakticky stejně. Skutečně odlišné výsledky přinese až test v Safari (WebKit) a Firefoxu (Gecko).

MýtusRendering engine a JavaScriptový engine jsou totéž.

Ve skutečnostiRendering engine řeší parsování HTML, styly, layout a malování, zatímco JavaScriptový engine (V8, SpiderMonkey) vykonává kód. Jsou to oddělené komponenty, ale sdílejí hlavní vlákno, takže se navzájem blokují.

MýtusPřesun vykreslování na GPU vždycky zrychlí stránku.

Ve skutečnostiVynucení vlastní kompozitní vrstvy u příliš mnoha prvků zvýší spotřebu paměti GPU a přenosy mezi CPU a GPU, což může výsledek naopak zhoršit. Zrychlení dává smysl u prvků, které se skutečně často animují.

Časté dotazy

Jak zjistím, který rendering engine používá můj prohlížeč?

Rendering engine prohlížeče se dá zjistit z about stránky prohlížeče nebo z user agent řetězce v konzoli. Chrome, Edge, Opera, Brave a Vivaldi používají Blink, Safari na macOS i všechny prohlížeče na iOS používají WebKit, Firefox používá Gecko. Na iOS je situace zvláštní: i Chrome tam vykresluje přes systémový WebKit, protože Apple dlouho nepovoloval jiná jádra. Pro testování to znamená, že desktopový Chrome neřekne nic o tom, jak se stránka zobrazí na iPhonu.

Proč se stránka při scrollování trhá, i když má málo obsahu?

Trhané scrollování obvykle nezpůsobí množství obsahu, ale práce, kterou musí rendering engine udělat mezi snímky. Nejčastější příčiny jsou dlouhé JavaScriptové úlohy blokující hlavní vlákno, animace vlastností vyžadujících layout (width, top, margin), příliš složité CSS selektory nebo velké stínové a filtrové efekty přes rozsáhlé plochy. Panel Performance ve vývojářských nástrojích ukáže, kolik času padne na scripting, layout a paint. Cílem je vejít se do zhruba 16 milisekund na snímek při 60 snímcích za sekundu.

Jaký je rozdíl mezi rasterizací a path tracingem u 3D rendering enginů?

Rasterizace promítá trojúhelníky přímo do obrazovky a osvětlení aproximuje pomocí shaderů a předpočítaných map, takže zvládne desítky snímků za sekundu a používá se ve hrách a náhledech. Path tracing naopak simuluje dráhy světelných paprsků scénou a vzorkuje je, čímž získá fyzikálně věrné odrazy, měkké stíny i globální osvětlení, ale jeden snímek trvá minuty až hodiny. Blender nabízí obojí: EEVEE rasterizuje, Cycles trasuje paprsky. Volba závisí na tom, zda potřebujete rychlost, nebo věrnost.

Ovlivňuje rendering engine SEO a hodnocení stránky?

Rendering engine ovlivňuje SEO nepřímo přes rychlost vykreslení. Googlebot pro indexaci používá jádro založené na Chromiu, tedy Blink, takže vidí stránku podobně jako Chrome včetně obsahu vytvořeného JavaScriptem. Metriky Core Web Vitals, konkrétně Largest Contentful Paint, Cumulative Layout Shift a Interaction to Next Paint, měří přímo výsledky práce vykreslovacího jádra a vstupují do hodnocení. Pomalý layout, skákající obsah nebo blokovaný hlavní vlákno tedy poškodí jak uživatelský dojem, tak pozici ve výsledcích.

Zdroje

1. HTML Standard(otevře se v novém okně)WHATWG
2. CSS Snapshot(otevře se v novém okně)W3C
3. Populating the page: how browsers work(otevře se v novém okně)MDN Web Docs
4. Blender Manual: Rendering(otevře se v novém okně)Blender Foundation
5. Browser engine(otevře se v novém okně)Wikipedia

Související pojmy

• Core Web VitalsCore Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.
• DOMDOM je programové rozhraní a stromový model dokumentu HTML nebo XML, který prohlížeč vytvoří po načtení stránky a zpřístupní skriptům. Díky DOM mohou skripty číst strukturu, měnit obsah, reagovat na události a synchronizovat vykreslenou stránku se stavem aplikace. DOM proto není jen text souboru, ale živý objektový pohled na dokument.
• RasterizaceRasterizace je převod geometrie, písma, vektorových tvarů nebo obrazových popisů na mřížku pixelů či vzorků. V grafických kartách tvoří klíčový krok mezi 3D scénou a obrazem na displeji: rozhoduje, které pixely pokrývá trojúhelník, jakou mají hloubku a jaké fragmenty dostanou shadery.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Adresa v pamětiAdresa v paměti je číslo, kterým procesor jednoznačně označuje konkrétní buňku operační paměti, obvykle jeden bajt. Program pomocí adresy říká, odkud má data načíst nebo kam je zapsat. Adresy tvoří souvislý číselný rozsah, jehož velikost určuje šířka adresní sběrnice a architektura, typicky 32 nebo 64 bitů.
• AI agentAI agent je softwarový systém, který pomocí modelu umělé inteligence vnímá zadaný kontext, plánuje další kroky a samostatně volá nástroje nebo služby k dosažení cíle. Na rozdíl od jednorázového promptu udržuje stav úlohy, vyhodnocuje výsledky akcí a může opakovat postup, dokud nesplní zadání nebo nenarazí na limit.