Domyślnie kod CSS jest traktowany jako zasób blokujący renderowanie, co oznacza, że przeglądarka nie wyrenderuje żadnej przetworzonej treści do czasu skonstruowania CSSOM. Zadbaj o to, by CSS był zwięzły, dostarczał go jak najszybciej i używał typów mediów oraz zapytań do odblokowania renderowania.
Podczas konstrukcji drzewa renderowania zauważyliśmy, że krytyczna ścieżka renderowania wymaga zarówno DOM, jak i CSSOM do utworzenia drzewa renderowania. Ma to ważny wpływ na wydajność: HTML i CSS stanowią zasoby blokujące renderowanie. Kod HTML jest oczywisty, ponieważ bez DOM nie mielibyśmy niczego do wyrenderowania, ale wymagania CSS mogą być mniej oczywiste. Co się stanie, jeśli spróbujemy wyrenderować typową stronę bez blokowania renderowania w CSS?
Podsumowanie
- Domyślnie CSS jest traktowany jako zasób blokujący renderowanie.
- Typy mediów i zapytania o media umożliwiają nam oznaczenie niektórych zasobów CSS jako blokujących renderowanie.
- Przeglądarka pobiera wszystkie zasoby CSS, niezależnie od działania blokującego lub nieblokującego.
Powyższy przykład, pokazujący witrynę NYTimes z kodem CSS i bez niego, pokazuje, dlaczego renderowanie jest blokowane, dopóki nie będzie dostępny CSS – bez CSS strona jest stosunkowo bezużyteczna. Element po prawej stronie często określa się jako „Flash of Unstyled Content” (przebłysk treści bez stylu). Przeglądarka blokuje renderowanie, dopóki nie będzie mieć zarówno elementu DOM, jak i CSSOM.
CSS to zasób blokujący renderowanie. Przekaż klientowi jak najszybciej i jak najszybciej, aby zoptymalizować czas pierwszego renderowania.
Co jednak w sytuacji, gdy mamy style CSS, które są używane tylko w określonych warunkach, na przykład podczas drukowania strony lub wyświetlania jej na dużym monitorze? Dobrze byłoby nie blokować renderowania tych zasobów.
„Typy mediów” i „zapytania o media” w CSS umożliwiają nam obsługę takich przypadków użycia:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Zapytanie o media składa się z typu mediów i 0 lub większej liczby wyrażeń sprawdzających warunki konkretnych funkcji multimediów. Na przykład pierwsza deklaracja arkusza stylów nie zawiera typu mediów ani zapytania, więc obowiązuje we wszystkich przypadkach, czyli zawsze blokuje renderowanie. Z drugiej strony druga deklaracja arkusza stylów jest stosowana tylko podczas drukowania treści – być może chcesz zmienić układ strony, czcionki itd., więc ta deklaracja arkusza stylów nie musi blokować renderowania strony przy jej pierwszym wczytaniu. Ostatnia deklaracja arkusza stylów zawiera „zapytanie o media”, które jest wykonywane przez przeglądarkę: po spełnieniu warunków przeglądarka blokuje renderowanie do czasu pobrania i przetworzenia arkusza stylów.
Korzystając z zapytań o multimedia, możemy dostosowywać naszą prezentację do konkretnych zastosowań, takich jak wyświetlanie i drukowanie, oraz dynamicznych warunków, takich jak zmiany orientacji ekranu, zmiany rozmiaru ekranu itp. Podczas deklarowania zasobów w arkuszu stylów zwróć szczególną uwagę na typ mediów i zapytania, ponieważ mają one znaczny wpływ na wydajność krytycznej ścieżki renderowania.
Przyjrzyjmy się kilku przykładom praktycznym:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- Pierwsza deklaracja dotyczy blokowania renderowania i dopasowania we wszystkich warunkach.
- Druga deklaracja również służy do blokowania renderowania: domyślnym typem jest „all” (wszystko), więc jeśli nie określisz żadnego typu, domyślnie ustawiona będzie wartość „all”. Dlatego pierwsza i druga deklaracja są faktycznie równoważne.
- Trzecia deklaracja zawiera zapytanie o media dynamiczne, które jest oceniane podczas wczytywania strony. W zależności od orientacji urządzenia podczas wczytywania strony plik portrait.css może nie blokować renderowania.
- Ostatnia deklaracja jest stosowana tylko podczas drukowania strony, więc przy pierwszym wczytywaniu strony w przeglądarce nie powoduje zablokowania.
Pamiętaj też, że „blokowanie renderowania” odnosi się tylko do tego, czy przeglądarka musi wstrzymać wstępne renderowanie strony na tym zasobie. W obu przypadkach przeglądarka nadal pobiera zasób CSS, ale ma niższy priorytet dla zasobów nieblokujących.