Jak psát lepší CSS s výkonem v mysli

V dnešním příspěvku budeme přemýšlet o možnostech kódu, které můžeme provést v CSS pro zlepšení výkonu stránek. Než se však do těchto možností pustíme, pojďme se nejprve krátce podívat na pracovní postup vykreslování webových stránek, abychom se mohli zaměřit naproblematické (výkonové) oblasti, které jsou řešitelné prostřednictvím CSS.

Zde je hrubý tok operací prováděných prohlížečem po vytvoření stromu DOM:

Přepočítat styl (a vykreslit vytvoření stromu). Prohlížeč vypočítá styly, které mají být aplikovány na prvky ve stromu DOM. Strom vykreslení je později vytvořen, když odloží uzly (prvky) ze stromu DOM, které se nemají vykreslit (prvky s zobrazení: žádné) a ty, které jsou (pseudoprvky).
Rozložení (aka Reflow). Pomocí dříve vypočítaného stylu vypočítá prohlížeč pozici a geometrii každého prvku na stránce.
Repaint. Jakmile je rozložení mapováno, pixely jsou nakresleny na obrazovku.
Kompozitní vrstvy. Během malování může být obraz prováděn v různých vrstvách nezávisle; tyto vrstvy se pak nakonec spojí dohromady.

Nyní pokračujme v tom, co můžeme udělat v prvních třech fázích operace, abychom mohli psát lépe fungující CSS kódy.

1. Omezte výpočty stylu

Podobně, jak bylo uvedeno výše, ve fázi "Přepočítat styl" prohlížeč vypočítá styly, které mají být aplikovány na prvky. Prohlížeč nejprve zjistí všechny selektory v CSS, které odkazují na daný uzel prvku ve stromu DOM. Pak prochází všemi pravidly stylu v těchto selektorech a rozhoduje, které z nich mají být na prvek aplikovány.

Zabránit nákladným výpočtům stylu, snížit složité a hluboce vnořené selektory takže je pro prohlížeč jednodušší zjistit, na který prvek odkazuje volič. To snižuje výpočetní čas.

Jiné způsoby, jak zaměstnat, zahrnují snížení počtu pravidel stylu (pokud je to možné), odstranění nepoužívaných CSS a vyhýbání se redundance a přepsání, tak, aby prohlížeč nemusel projít stejným stylem znovu a znovu během výpočtu stylů.

2. Omezte zpětné proudy

Reflows nebo Layout změny v elementu jsou velmi "drahé" procesy a mohou být ještě větším problémem, když prvek, který prošel změnami rozvržení, má značné množství dětí (protože Odrazí kaskádu v hierarchii).

Odrazy jsou spouštěny změnami rozvržení prvku, jako jsou změny geometrických vlastností, jako je výška nebo velikost písma, přidání nebo odebrání tříd prvků, změna velikosti okna, aktivace :vznášet se, DOM změny pomocí JavaScriptu, atd.

Stejně jako ve stylu výpočtu, snížit Reflows, vyhnout se komplexním selektorům a hluboké DOM stromy (opět, aby se zabránilo nadměrnému kaskádování Reflowů).

Pokud musíte změnit styly rozvržení komponenty na stránce, cílit styly prvku, který je nejnižší v hierarchii prvků je složka vyrobena. To je tak, že změny rozvržení nespustí (téměř) žádné jiné Reflows.

Pokud animujete prvek, který prochází změnami rozvržení, Vyjměte ji z toku stránek podle polohování, protože Reflow v absolutně umístěných prvcích neovlivní zbytek prvků na stránce.

Shrnout:

Při provádění změn rozvržení cílové prvky, které jsou nižší ve stromu DOM
Zvolte absolutně umístěné prvky pro animace měnící rozvržení
Pokud je to možné, vyhněte se animaci vlastností rozvržení

3. Omezte repainty

Repaint odkazuje na kreslení pixelů na obrazovce a je to drahý proces stejně jako Reflow. Repainty mohou být spuštěny pomocí Reflows, rolování stránek, změn vlastností, jako je barva, viditelnost a krytí.

Vyhnout se častým a obrovským překreslením, používat méně vlastností, které způsobují nákladné překreslování jako stíny.

Pokud animujete vlastnosti prvku, který může spustit Repaint přímo nebo nepřímo, bude to velká výhoda pokud je tento prvek ve své vlastní vrstvě zabraňující tomu, aby jeho obrazový obraz ovlivňoval zbytek stránky a spouštěl hardwarovou akceleraci. V hardwarové accelaration, GPU bude trvat na úkolu provádět změny animace ve vrstvě, ukládání CPU extra práci při urychlení procesu.

V některých prohlížečích, neprůhlednost (s hodnotou menší než. \ t 1) a přeměnit (hodnota jiná než. \ t žádný) jsou automaticky povýšeny na nové vrstvy a pro animace a přechody je použita hardwarová akcelerace. Preferování těchto vlastností pro animace je tak dobré.

Chcete-li násilně podporovat prvek do nové vrstvy a jít do hardwarové akcelerace pro animaci existují dvě techniky:

přidat transformace: translate3d (0, 0, 0); k elementu, podvádět prohlížeč ke spuštění hardwarové akcelerace pro animace a přechody.
přidat změní se vlastnost, která informuje prohlížeče o vlastnostech, které se mohou v prvku v budoucnu změnit. PoznámkaSara Soueidan má in-hloubkové a super-užitečné článek na to v Dev.Opera místě.

Shrnout:

Vyhněte se drahým stylům, které způsobují Repaints
Hledejte podporu vrstvy a hardwarovou akceleraci pro robustní animace a přechody.

Vzít na vědomí

(1) Takže až do teď, jsme se nedotkli CSS snížení velikosti souboru. Zmínili jsme se, že snížení pravidel stylu (a prvků DOM) způsobuje výrazné zlepšení výkonu kolik prohlížeče bude muset pracovat méně procesu zpracování stylů. V důsledku této redukce kódu, psaní lepší selektory a vymazání nepoužívaných CSS, velikost souboru se automaticky sníží.

(2) Je také vhodné v JavaScriptu neučiní příliš mnoho následných změn stylů elementu. Místo toho přidejte třídu do elementu (pomocí JavaScriptu), který obsahuje nové styly, které tyto změny provedou - to zabrání zbytečným Reflowům.

(3) Budete chtít vyhnout se rozložení také (nucené synchronní odrazy), které vznikají v důsledku přístupu a úpravy vlastností prvků pomocí JavaScriptu. Přečtěte si více o tom, jak to zabíjí výkon zde.