CSS zum Blockieren des Renderings

Ilya Grigorik
Ilya Grigorik

Standardmäßig wird CSS als Ressource behandelt, die das Rendering blockiert. Das bedeutet, dass der Browser keine verarbeiteten Inhalte rendert, bis das CSSOM erstellt wurde. Halten Sie Ihr CSS schlank, stellen Sie es so schnell wie möglich bereit und verwenden Sie Medientypen und Abfragen, um die Blockierung des Renderings aufzuheben.

Bei der Konstruktion der Rendering-Baumstruktur haben wir gesehen, dass für den kritischen Rendering-Pfad sowohl das DOM als auch das CSSOM erforderlich sind, um die Rendering-Struktur zu erstellen. Dies hat eine wichtige Leistungsbeeinträchtigung zur Folge: sowohl HTML als auch CSS sind Ressourcen, die das Rendering blockieren. Der HTML-Code ist offensichtlich, da wir ohne das DOM nichts zum Rendern hätten, aber die CSS-Anforderung könnte weniger offensichtlich sein. Was würde passieren, wenn wir versuchen, eine typische Seite zu rendern, ohne das Rendering auf CSS zu blockieren?

Zusammenfassung

  • CSS wird standardmäßig als Ressource behandelt, die das Rendering blockiert.
  • Mithilfe von Medientypen und Medienabfragen können einige CSS-Ressourcen als Blockierung ohne Rendering markiert werden.
  • Der Browser lädt alle CSS-Ressourcen herunter, unabhängig davon, ob das Verhalten blockiert oder nicht blockiert wird.
NYTimes mit CSS
The New York Times with CSS
NYTimes ohne CSS
The New York Times without CSS (FOUC)

Das obige Beispiel, in dem die NYTimes-Website mit und ohne CSS gezeigt wird, zeigt, warum das Rendern blockiert ist, bis CSS verfügbar ist. Ohne CSS wäre die Seite relativ unbrauchbar. Das Erlebnis auf der rechten Seite wird oft als „Flash of Unstyled Content“ (FOUC) bezeichnet. Der Browser blockiert das Rendering, bis er sowohl das DOM als auch das CSSOM enthält.

CSS ist eine Ressource, die das Rendering blockiert. Sie sollten sie so schnell und so schnell wie möglich an den Kunden senden, um die Zeit bis zum ersten Rendering zu optimieren.

Was ist jedoch, wenn es einige CSS-Stile gibt, die nur unter bestimmten Bedingungen verwendet werden, z. B. beim Drucken der Seite oder beim Projizieren auf einen großen Bildschirm? Es wäre schön, wenn wir das Rendering dieser Ressourcen nicht blockieren müssten.

Mit den CSS- „Mediatypen“ und „Medienabfragen“ können folgende Anwendungsfälle berücksichtigt werden:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Eine Medienabfrage besteht aus einem Medientyp und null oder mehr Ausdrücken, die die Bedingungen bestimmter Medienfunktionen prüfen. Unsere erste Stylesheet-Deklaration enthält beispielsweise keinen Medientyp oder -abfrage. Sie gilt also in allen Fällen, d. h., es wird immer eine Blockierung für das Rendering vorgenommen. Andererseits gilt die zweite Stylesheet-Deklaration nur, wenn der Inhalt gedruckt wird. Vielleicht möchten Sie z. B. das Layout neu anordnen oder die Schriftarten ändern. Daher muss diese Stylesheet-Deklaration die Darstellung der Seite beim ersten Laden nicht blockieren. Die letzte Stylesheet-Deklaration stellt eine „Medienabfrage“ bereit, die vom Browser ausgeführt wird: Wenn die Bedingungen übereinstimmen, blockiert der Browser das Rendern, bis das Stylesheet heruntergeladen und verarbeitet wurde.

Mithilfe von Medienabfragen können wir unsere Präsentation an bestimmte Anwendungsfälle anpassen, z. B. Anzeige oder Druck, aber auch an dynamische Bedingungen, z. B. Änderungen der Bildschirmausrichtung oder Größenänderung. Achten Sie bei der Deklaration Ihrer Stylesheet-Assets genau auf den Medientyp und die Abfragen, da sie sich stark auf die Leistung kritischer Rendering-Pfade auswirken.

Sehen wir uns einige praktische Beispiele an:

<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" />
  • Bei der ersten Deklaration wird das Rendering blockiert und es wird unter allen Bedingungen eine Übereinstimmung gefunden.
  • Die zweite Deklaration ist ebenfalls eine Blockierung des Renderings: „all“ ist der Standardtyp. Wenn Sie also keinen Typ angeben, wird implizit „all“ festgelegt. Daher sind die erste und die zweite Deklaration tatsächlich äquivalent.
  • Die dritte Deklaration enthält eine dynamische Medienabfrage, die beim Laden der Seite ausgewertet wird. Je nach Geräteausrichtung beim Laden der Seite wird das Rendering von „portrait.css“ möglicherweise blockiert.
  • Die letzte Deklaration wird nur angewendet, wenn die Seite gedruckt wird, sodass sie nicht beim ersten Laden der Seite im Browser blockiert wird.

Beachten Sie schließlich, dass sich die "Rendering-Blockierung" nur darauf bezieht, ob der Browser das anfängliche Rendering der Seite für diese Ressource beibehalten muss. In beiden Fällen lädt der Browser das CSS-Asset weiterhin herunter, allerdings mit einer niedrigeren Priorität für nicht blockierende Ressourcen.

Feedback