Data publikacji: 31 marca 2014 r.
Domyślnie CSS jest traktowany jako zasób blokujący renderowanie, co oznacza, że przeglądarka nie wyrenderuje żadnej przetworzonej treści, dopóki kod CSSOM nie zostanie i całego świata. Pamiętaj o usprawnieniu kodu CSS i prześlij go jak najszybciej i używać typów multimediów oraz zapytań, aby odblokować renderowanie.
W konstrukcji drzewa renderowania zauważyliśmy, że krytyczna ścieżka renderowania wymaga zarówno DOM, jak i CSSOM do utworzenia drzewa renderowania. Znacznie wpływa to na wydajność: zarówno HTML, jak i CSS są zasobami blokującymi renderowanie. Kod HTML jest oczywisty, ponieważ bez modelu DOM nie mielibyśmy nic do renderowania, ale wymagania dotyczące kodu CSS mogą być mniej oczywiste. Co się stanie, jeśli spróbujemy wyrenderować typową stronę bez blokowania renderowania w CSS?
Podsumowanie
- Domyślnie pliki CSS są traktowane jako zasoby blokujące renderowanie.
- Typy multimediów i zapytania o multimedia umożliwiają oznaczenie niektórych zasobów CSS jako blokujących renderowanie.
- Przeglądarka pobiera wszystkie zasoby CSS niezależnie od ustawień blokowania czy nieblokowania.
Poprzedni przykład, w którym porównujemy witrynę New York Times z włączonym i wyłączonym kodem CSS, pokazuje, dlaczego renderowanie jest blokowane do czasu, aż kod CSS będzie dostępny. Bez kodu CSS strona jest stosunkowo nieprzydatna. Obszar po prawej stronie jest często określany jako Flash of Unstyled Content (FOUC). Przeglądarka blokuje renderowanie, dopóki nie znajdzie zarówno DOM, jak i CSSOM.
CSS jest zasobem blokującym renderowanie. Dostarcz je klientowi jak najszybciej, aby zoptymalizować czas do pierwszego renderowania.
Co jednak, jeśli mamy style CSS, które są używane tylko w określonych warunkach, np. gdy strona jest drukowana lub wyświetlana na dużym monitorze? Byłoby miło, gdyby nie trzeba było blokować renderowania w tych zasobach.
„Typy multimediów” CSS i „zapytania o multimedia” które pozwalają nam uwzględniać takie przypadki 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 nie większej liczby wyrażeń sprawdzających warunki konkretnych funkcji multimedialnych. Na przykład pierwsza deklaracja arkusza stylów nie zawiera typu multimediów ani zapytania, więc ma zastosowanie we wszystkich przypadkach, co oznacza, że zawsze blokuje renderowanie. Druga deklaracja arkusza stylów ma zastosowanie tylko wtedy, gdy treść jest drukowana – na przykład gdy chcesz zmienić kolejność układu, czcionki lub zastosować inne ważne kwestie związane z projektowaniem w materiałach drukowanych. Dlatego deklaracja arkusza stylów nie musi blokować renderowania strony podczas jej pierwszego wczytania. Ostatnia deklaracja arkusza stylów zawiera „zapytanie o multimedia”, które jest wykonywane przez przeglądarkę: jeśli warunki są zgodne, przeglądarka blokuje renderowanie, dopóki arkusz stylów nie zostanie pobrany i przetworzony.
Za pomocą zapytań o multimedia możemy dostosować prezentację do konkretnych zastosowań, np. wyświetlania lub drukowania, a także do warunków dynamicznych, takich jak zmiany orientacji ekranu czy zdarzenia zmiany rozmiaru. Podczas deklarowania zasobów arkuszy stylów zwracaj szczególną uwagę na typ multimediów i zapytania, ponieważ mają one duży wpływ na wydajność ścieżki renderowania.
Oto przykłady:
<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 blokuje renderowanie i pasuje we wszystkich warunkach.
- Druga deklaracja dotyczy też blokowania renderowania. Domyślnym typem jest
"all", więc jeśli nie określisz typu, zostanie domyślnie ustawiona wartość"all". Dlatego pierwsza i druga deklaracja są w istocie 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
portrait.cssmoże blokować renderowanie. - Ostatnia deklaracja jest stosowana tylko podczas drukowania strony (
"print"), więc nie blokuje renderowania po pierwszym wczytaniu strony w przeglądarce.
Pamiętaj też, że „blokowanie renderowania” wskazuje jedynie, czy przeglądarka musi wstrzymać początkowe wyrenderowanie strony danego zasobu. W obu przypadkach przeglądarka pobiera zasób CSS, ale ma niższy priorytet dla zasobów nieblokujących.