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. Zadbaj o to, aby kod CSS był zwięzły, dostarczany tak szybko, jak to możliwe, i wykorzystywany do odblokowywania renderowania.
W konstrukcji drzewa renderowania zauważyliśmy, że ścieżka krytycznego renderowania wymaga użycia zarówno DOM, jak i CSSOM. 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 co renderować, 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 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 ustawień blokowania czy nieblokowania.
Poprzedni przykład pokazujący witrynę New York Timesa zarówno z użyciem kodu CSS, jak i bez niego, pokazuje, dlaczego renderowanie jest blokowane do czasu udostępnienia usługi porównywania cen – bez CSS strona jest względnie bezużyteczna. Element po prawej stronie jest często nazywany błyskiem niesformatowanych treści (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? Chcielibyśmy uniknąć blokowania renderowania tych zasobów.
„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 nasza pierwsza deklaracja arkusza stylów nie zawiera typu mediów ani zapytania, więc ma zastosowanie we wszystkich przypadkach. czyli zawsze blokowanie renderowania. 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. Dzięki temu ta deklaracja arkusza stylów nie musi blokować renderowania strony przy jej pierwszym wczytaniu. 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. Przy deklarowaniu zasobów z arkusza stylów zwróć szczególną uwagę na typ mediów i zapytania. mają one znaczny wpływ na krytyczną 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 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 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 po pierwszym wczytaniu strony w przeglądarce.
Pamiętaj, że „blokowanie renderowania” odnosi się tylko do tego, czy przeglądarka musi wstrzymać początkowe renderowanie strony na tym zasobie. W obu przypadkach przeglądarka nadal pobiera zasób CSS, ale z niższym priorytetem niż zasoby nieblokujące.