Opublikowano: 31 marca 2014 r.
Domyślnie CSS jest traktowany jako zasób blokujący renderowanie, co oznacza, że przeglądarka nie będzie renderować przetworzonych treści, dopóki nie zostanie utworzony model CSSOM. Zadbaj o to, aby CSS był jak najprostszy, dostarczaj go jak najszybciej i używaj typów i zapytań o media, aby odblokować renderowanie.
Podczas tworzenia drzewa renderowania zauważyliśmy, że ścieżka krytycznego renderowania wymaga zarówno modelu DOM, jak i CSSOM. Ma to ważne konsekwencje dla wydajności: zarówno HTML, jak i CSS są zasobami blokującymi renderowanie. W przypadku HTML jest to oczywiste, ponieważ bez modelu DOM nie mielibyśmy czego renderować, ale wymaganie CSS może być mniej oczywiste. Co się stanie, jeśli spróbujemy renderować typową stronę bez blokowania renderowania przez CSS?
Podsumowanie
- Domyślnie CSS jest traktowany jako zasób blokujący renderowanie.
- Typy i zapytania o media pozwalają oznaczyć niektóre zasoby CSS jako nieblokujące renderowania.
- Przeglądarka pobiera wszystkie zasoby CSS, niezależnie od tego, czy blokują one renderowanie.
Powyższy przykład, który pokazuje witrynę New York Times z CSS i bez niego, pokazuje, dlaczego renderowanie jest blokowane, dopóki CSS nie jest dostępny – bez CSS strona jest stosunkowo bezużyteczna. Efekt po prawej stronie jest często określany jako Flash of Unstyled Content (FOUC). Przeglądarka blokuje renderowanie, dopóki nie ma zarówno modelu DOM, jak i CSSOM.
CSS to zasób blokujący renderowanie. Aby zoptymalizować czas do pierwszego renderowania, dostarcz go do klienta jak najszybciej.
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? Dobrze byłoby, gdybyśmy nie musieli blokować renderowania tych zasobów.
Typy mediów i zapytania o media CSS pozwalają nam rozwiązać te 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 co najmniej 1 wyrażenia, które sprawdzają warunki określonych cech mediów. Na przykład nasza pierwsza deklaracja arkusza stylów nie zawiera typu ani zapytania o media, dlatego ma zastosowanie we wszystkich przypadkach, czyli zawsze blokuje renderowanie. Z drugiej strony druga deklaracja arkusza stylów ma zastosowanie tylko wtedy, gdy treść jest drukowana – być może chcesz zmienić układ, czcionki i inne ważne aspekty projektu do druku. Dlatego ta deklaracja arkusza stylów nie musi blokować renderowania strony podczas pierwszego wczytywania. Na koniec ostatnia deklaracja arkusza stylów zawiera „zapytanie o media”, które jest wykonywane przez przeglądarkę: jeśli warunki są spełnione, przeglądarka blokuje renderowanie, dopóki arkusz stylów nie zostanie pobrany i przetworzony.
Dzięki zapytaniom o media możemy dostosować prezentację do konkretnych przypadków użycia, np. wyświetlania i drukowania, a także do warunków dynamicznych, takich jak zmiany orientacji ekranu, zdarzenia zmiany rozmiaru itp. Deklarując zasoby arkusza stylów, zwróć szczególną uwagę na typ i zapytania o media. Mają one duży wpływ na wydajność ścieżki krytycznego renderowania.
Oto kilka przykładów:
<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 do wszystkich warunków.
- Druga deklaracja również blokuje renderowanie:
"all"to typ domyślny, więc jeśli nie określisz typu, zostanie on ustawiony na"all". Dlatego pierwsza i druga deklaracja są równoważne. - Trzecia deklaracja zawiera dynamiczne zapytanie o media, które jest oceniane podczas wczytywania strony. W zależności od orientacji urządzenia podczas wczytywania strony
portrait.cssmoże blokować renderowanie lub nie. - Ostatnia deklaracja jest stosowana tylko wtedy, gdy strona jest drukowana (
"print"), więc nie blokuje renderowania, gdy strona jest wczytywana w przeglądarce.
Pamiętaj, że „blokowanie renderowania” odnosi się tylko do tego, czy przeglądarka musi wstrzymać początkowe renderowanie strony na podstawie tego zasobu. W obu przypadkach przeglądarka nadal pobiera zasób CSS, ale z niższym priorytetem w przypadku zasobów nieblokujących.