Opublikowano: 31 marca 2014 r.
Domyślnie kod CSS jest traktowany jako zasób blokujący renderowanie, co oznacza, że przeglądarka nie będzie renderować żadnych przetworzonych treści, dopóki nie zostanie utworzony obiekt CSSOM. Zadbaj o elastyczność kodu CSS, przesyłaj go jak najszybciej i korzystaj z typów multimediów oraz zapytań, aby odblokować renderowanie.
W konstrukcji drzewa renderowania zauważyliśmy, że ścieżka krytycznego renderowania wymaga użycia zarówno DOM, jak i CSSOM. Ma to ważne konsekwencje dla wydajności: 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 CSS jest traktowany jako zasób blokujący renderowanie.
- Typy multimediów i zapytania dotyczące multimediów umożliwiają nam oznaczanie niektórych zasobów CSS jako nieblokujących renderowania.
- Przeglądarka pobiera wszystkie zasoby CSS niezależnie od tego, czy blokują renderowanie czy nie.
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. Element po prawej stronie jest często nazywany błyskiem niesformatowanych treści (FOUC). Przeglądarka blokuje renderowanie, dopóki nie otrzyma zarówno DOM, jak i CSSOM.
CSS jest zasobem blokującym renderowanie. Prześlij go do klienta tak szybko, jak to możliwe, aby zoptymalizować czas 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? Chcielibyśmy uniknąć blokowania renderowania tych zasobów.
„Typy mediów” i „Zapytania o media” w CSS umożliwiają nam realizację tych zastosowań:
<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 nasza pierwsza deklaracja arkusza stylów nie zawiera informacji o typie multimediów ani zapytaniu, więc ma zastosowanie we wszystkich przypadkach, czyli zawsze blokuje renderowanie. Druga deklaracja arkusza stylów ma zastosowanie tylko wtedy, gdy treści są drukowane. Możesz wtedy zmienić układ, czcionki i inne ważne elementy projektu na potrzeby druku. 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.
Weźmy pod uwagę te 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 to blokowanie renderowania i dopasowanie do wszystkich warunków.
- Druga deklaracja również blokuje renderowanie:
"all"to domyślny typ, więc jeśli nie określisz typu, zostanie on domyślnie ustawiony na"all". Dlatego pierwsza i druga deklaracja są równoważne. - Trzecia deklaracja zawiera zapytanie o multimedia dynamiczne, które jest oceniane podczas wczytywania strony. W zależności od orientacji urządzenia podczas wczytywania strony element
portrait.cssmoże blokować renderowanie lub nie. - Ostatnia deklaracja jest stosowana tylko podczas drukowania strony (
"print"), więc nie blokuje renderowania podczas pierwszego wczytywania strony w przeglądarce.
Pamiętaj też, że „blokowanie renderowania” odnosi się tylko do tego, czy przeglądarka musi wstrzymać wstępne wyrenderowanie strony danego zasobu. W obu przypadkach przeglądarka nadal pobiera zasób CSS, ale z niższym priorytetem niż zasoby nieblokujące.