Zrychlování výkonu webů – kritická cesta rederování

Chceme-li začít se zefektivňováním nějakého ustáleného procesu, ať již se jedná o nějaký algoritmus nebo načítání webu, našim prvním krokem a také hlavním cílem by mělo být nalezení kritické cesty, jinak také nazývané jako ústí láhve (bottle neck). Toto pojmenování je na místě, neboť stejně jako hrdlem láhve je oproti jejímu celému průměru schopno protékat pouze značně omezené množství tekutin, tak i v místě kritické cesty se setkáváme s problémem, kdy dochází k výraznému zpomalení fungování daného procesu.

V případě logické optimalizace algoritmu by mohlo jít o operaci, jejíž výpočet je zbytečně složitý, a proto nevhodně zatěžuje datovou náročnost prováděného procesu. U webových stránek platí velmi podobný princip. Zde však většinou neprovádíme žádné logické operace, ale snažíme se návštěvníkovi zobrazit obsah našeho webu.

Toto zobrazování však s sebou nese určitá pravidla, kterým celý proces načítání podléhá. Jestliže se tedy rozhodneme pro optimalizaci výkonu webu, našim cílem by mělo být nalezení kritické cesty renderování, která může mít za následek vysokou latenci webu. K tomu, abychom mohli tuto kritickou cestu naleznout a také optimalizovat, musíme nejprve vědět, jak přesně funguje webový prohlížeč a jakým způsobem probíhá renderování obsahu námi načítaného webu.

Konstrukce objektového modelu stránky

Než začne prohlížeč načítat samotný web, jeho prvním krokem je sestavení DOM (Document Object Model) a CSSOM (Cascading Style Sheets Object Model). Celý proces je navíc rozdělej do 4 po sobě jdoucích kroků:

  1. Konverze – Prohlížeč dostává byty HTML v surové podobě tak, jak jsou mu posílány ze serveru a jednotlivé znaky následně překládá dle dané znakové sady (UTF-8) ,
  2. Tokenizace – Prohlížeč převádí jednotlivé znaky do tokenů podle specifikace W3C HTML5 Standardu, jako je například <head>, <body>, <div> apod.
  3. Lexace – Jednotlivé tokeny jsou převedeny do jednotlivých objektů, reprezentujících dané hodnoty a pravidla .
  4. DOM konstrukce – Na základě obdrženého kódu webový prohlížeč začne sestavovat stromovou konstrukci webu tak, jak ji definují pravidla jednotlivých tagů. Jednotlivé objekty jsou prolinkovány do stromové datové struktury, určující celkovou hierarchii daných prvků webu. Tato hierarchie je založena na jednotlivých parent – child vztazích mezi jednotlivými prvky webu.

Koncovým výstupem DOM modelu je jednoduchá stránka (raw page model), na který jsou následně aplikovány styly. Jedná se o základní konstrukci architektury webu, tak, jak ji můžeme vidět v případě nefunkčního načítaní CSS.

Právě tento proces renderování je tím místem, kde dochází k latenci webů. Budeme-li se na webovou strukturu dívat tak, jak je definována již od 90. let minulého století, při načítání webu dojde nejprve ke stahování fontů a kaskádových stylů, následně ke stahování JavaScriptových knihoven a až se všechny tyto datové zdroje stáhnou a provedou, následně teprve může dojít k vykreslování samotného obsahu webu, tedy k vytvoření samotné DOM konstrukce. Hlavním problémem proto není samotný DOM, ale právě CSSOM, které si blíže objasníme.

CSS Object Model (CSSOM)

Od samotného objektového modelu stránky se dostáváme k objektovému modelu CSS, který podobně jako DOM vytváří objektový strom. Tento objektový strom však vychází z poznatků DOM, na které jsou ex post aplikovány samotné styly. Potřeba stromové struktury opět vychází z nutnosti rozlišení nadřízených a podřízených prvků stylů. Co je těmito nadřízenými a podřízenými prvky myšleno?

Ukázat si to můžeme na běžně používaných prvcích webu, které mohou nést tyto velmi jednoduché styly:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Můžeme zde vidět, že určujeme různou velikost, váhu a barvu písma. Následně zde ale můžeme vidět příkaz display: none;, který je jistě výrazně nadřazenějším prvkem, neboť k čemu nám bude velikost a barva písma, když nezobrazíme celý blok s textem.

Sestavení CSSOM je proto nejdůležitější součástí vykreslování samotného webu. K tomu, aby však CSSOM mohlo být vykresleno, musí nejprve stáhnout všechny dostupné styly a fonty, které může následně na objektový model aplikovat. Nutno podotknout, že právě ono sestavování CSSSOM a synchronní stahování CSS souborů zamezuje samotnému načítání webu, kdy prohlížeč musí čekat, než dojde k celkovému sestavení CSSOM. V těchto místech proto také dochází k vytváření kritické cesty renderování, kterou je nutno eliminovat.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *