rendrTakérenderování, vykreslováníPokročilý
Definice
Render je proces převodu dat, kódu nebo scény do výsledné vizuální podoby, například webové stránky, komponenty aplikace, snímku videa nebo 3D obrazu. Ve vývoji označuje jak práci prohlížeče a UI frameworku, tak výpočet grafiky na CPU nebo GPU.
Nezaměňujte: Render se v praxi používá pro webové vykreslování, render komponent v UI frameworku i výpočet obrazu v počítačové grafice.
Co render převádí na viditelný výstup
Render je krok, při kterém se vnitřní popis něčeho převede do podoby, kterou člověk vidí nebo zařízení zobrazí. Vstupem může být HTML a CSS, strom komponent v aplikaci, 3D scéna, textový dokument nebo graf dat. Výstupem bývá obraz na obrazovce, snímek videa, bitmapa, PDF nebo sada instrukcí pro grafický procesor.
Slovo render se používá v několika vrstvách vývoje. Frontend vývojář jím často myslí přepočet UI po změně stavu. Prohlížeč tím myslí sestavení vizuální stránky z DOM, CSSOM, rozvržení a malování. Grafik nebo vývojář her jím myslí výpočet obrazu ze scény, materiálů, světel a kamery.
Render ve webovém prohlížeči
Webový prohlížeč nejdřív načte HTML a vytvoří DOM. Z CSS vznikne CSSOM, tedy struktura pravidel, která říká, jak mají prvky vypadat. Z kombinace těchto struktur vznikne strom určený k zobrazení. Prohlížeč potom počítá velikosti a pozice prvků, maluje je do vrstev a skládá výsledek na obrazovku.
Výkon webového renderu nezávisí jen na JavaScriptu. Drahé mohou být i změny rozměrů, fontů, pozic nebo vlastností, které nutí prohlížeč přepočítat layout. Změna opacity nebo transformace bývá často levnější, protože může proběhnout blíž ke kompozici vrstev.
Render komponent v Reactu
React používá slovo render pro výpočet podoby uživatelského rozhraní z komponent, props a stavu. Komponenta při renderu neznamená automaticky okamžitou změnu DOM. React nejdřív zjistí, jak má UI vypadat, porovná změny a teprve při commit fázi zapíše potřebné úpravy do prostředí, například do prohlížeče.
Opakovaný render komponenty nemusí být chyba. Render může proběhnout proto, že se změnil stav rodiče, přišel nový prop nebo vývojový režim záměrně ověřuje čistotu komponent. Problém vzniká tehdy, když render spouští drahé výpočty, vytváří nestabilní reference bez důvodu nebo způsobuje zbytečné požadavky na síť.
Render na serveru a na klientovi
Server-side rendering vytváří HTML na serveru a posílá prohlížeči už hotovější dokument. Výhoda je rychlejší první obsah a lepší čitelnost pro vyhledávače, pokud je výsledek správně poskládaný. Nevýhodou může být vyšší zátěž serveru a složitější práce se stavem aplikace.
Client-side rendering přesouvá velkou část práce do prohlížeče. Server často pošle základní HTML a JavaScript, který UI sestaví až u uživatele. Moderní frameworky tyto přístupy kombinují: část stránky vznikne na serveru, interaktivní části se následně připojí procesem označovaným jako hydration.
Render v grafice, hrách a 3D scénách
Grafický render počítá obraz z geometrie, materiálů, osvětlení a kamery. Realtime render ve hře musí stihnout mnoho snímků za sekundu, proto používá aproximace, shadery a grafickou kartu. Offline render u filmu nebo vizualizace může počítat jeden snímek déle, protože cílem je kvalita, ne okamžitá odezva.
Render proto vždy znamená kompromis mezi přesností, rychlostí a spotřebou prostředků. U webu se řeší rychlost reakce a stabilita rozvržení. U 3D grafiky se řeší počet polygonů, světla, stíny, textury a kapacita GPU. U aplikačního UI se řeší počet přepočtů a objem práce v každém z nich.
Příklady z praxe
Počítadlo v Reactu
Uživatel klikne na tlačítko a změní se stav komponenty. React znovu zavolá komponentu, spočítá nový výstup a do DOM zapíše jen změnu textu v tlačítku. Konzole ukáže, že render proběhl, i když se nepřestavěla celá stránka.
function Counter() { const [count, setCount] = React.useState(0); console.log('render komponenty'); return <button onClick={() => setCount(count + 1)}>{count}</button>; }Animace karty v prohlížeči
Karta v e-shopu se při najetí myší zvětší. Změna šířky může přinutit prohlížeč přepočítat rozvržení okolních prvků, zatímco transformace se často dá vyřešit kompozicí vrstvy. Výsledkem je plynulejší animace a menší riziko trhání.
.card.slow { width: 320px; } .card.fast { transform: scale(1.05); }
Časté omyly
- MýtusRender znamená vždycky překreslení celé stránky.
- Ve skutečnostiRender často přepočítá jen popis výstupu nebo část rozhraní. Moderní prohlížeče a UI knihovny se snaží měnit jen to, co je nutné.
- MýtusKdyž se komponenta renderuje znovu, je to automaticky chyba výkonu.
- Ve skutečnostiOpakovaný render je běžná součást práce UI frameworků. Problém nastává až tehdy, když render obsahuje drahou práci nebo spouští nevhodné vedlejší efekty.
- MýtusServer-side render vyřeší všechny problémy s rychlostí webu.
- Ve skutečnostiServer-side render může zlepšit první zobrazení obsahu, ale neodstraní těžký JavaScript, pomalé API ani špatně navrženou hydrataci. Výkon závisí na celé cestě od serveru po interakci uživatele.
Časté dotazy
- Proč se render v Reactu spouští víckrát?
- Render komponenty v Reactu může proběhnout víckrát, protože React přepočítává popis UI po změně stavu, props nebo kontextu. Vícenásobný render sám o sobě neznamená pomalou aplikaci. Důležité je, co se během renderu provádí. Čistý výpočet JSX je obvykle levný, zatímco drahé synchronní výpočty, nestabilní objekty nebo vedlejší efekty uvnitř renderu mohou výkon zhoršit.
- Co znamená server-side render u webové stránky?
- Server-side render znamená, že server vytvoří HTML před odesláním stránky do prohlížeče. Prohlížeč tak může dříve zobrazit obsah, aniž by čekal na kompletní běh aplikačního JavaScriptu. Interaktivita se často doplní až později hydratací. Server-side render se hodí pro obsahové weby, e-commerce a stránky, kde záleží na prvním zobrazení a indexovatelnosti.
- Je render totéž co refresh stránky?
- Render není totéž co refresh stránky. Refresh obvykle znamená nové načtení dokumentu nebo aplikace ze serveru. Render je širší a jemnější proces, při kterém se přepočítá nebo zobrazí výstup. Jednostránková aplikace může renderovat mnoho částí rozhraní bez reloadu, zatímco klasický refresh spustí načítání zdrojů znovu.
- Jak poznat, že je render úzké hrdlo výkonu?
- Pomalý render se pozná podle zadrhávání rozhraní, pozdního zobrazení obsahu nebo dlouhých úloh v hlavním vlákně prohlížeče. Příčina nemusí být jen samotné vykreslování. Zpoždění může způsobit velký JavaScript bundle, blokující fonty, složitý layout, příliš mnoho DOM uzlů, drahý výpočet v komponentě nebo pomalá příprava dat na serveru.
Zdroje
- Critical rendering path(otevře se v novém okně)
- Render and Commit(otevře se v novém okně)
- HTML Standard(otevře se v novém okně)
- WebGL(otevře se v novém okně)
Související pojmy
