CSS zum Blockieren des Renderings

Ilya Grigorik
Ilya Grigorik
X Startseite

Veröffentlicht: 31. März 2014

Standardmäßig wird CSS als Ressource behandelt, die das Rendering blockiert. verarbeitet der Browser die verarbeiteten Inhalte erst, wenn das CSSOM konstruiert sein. Halten Sie Ihr Preisvergleichsportal schlank und stellen Sie es so schnell wie und mithilfe von Medientypen und Abfragen die Blockierung des Renderings aufheben.

Beim Erstellen des Renderbaums haben wir gesehen, dass der kritische Rendering-Pfad sowohl das DOM als auch das CSSOM zum Erstellen des Renderbaums benötigt. Das hat eine wichtige Leistungsauswirkung: Sowohl HTML als auch CSS sind renderblockierende Ressourcen. HTML ist offensichtlich, da wir ohne das DOM nichts zum Rendern hätten, aber die CSS-Anforderung ist vielleicht weniger offensichtlich. Was würde passieren, wenn wir versuchen, eine typische Seite zu rendern, ohne das Rendering in CSS zu blockieren?

Zusammenfassung

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

Das vorherige Beispiel mit der Website der New York Times mit und ohne CSS veranschaulicht, warum das Rendering blockiert wird, bis CSS verfügbar ist. Ohne CSS ist die Seite relativ unbrauchbar. Der Inhalt auf der rechten Seite wird oft als Flash of Unstyled Content (FOUC) bezeichnet. Der Browser blockiert das Rendering, bis sowohl das DOM als auch das CSSOM vorhanden sind.

CSS ist eine Ressource, die das Rendering blockiert. Senden Sie die Daten so schnell wie möglich an den Client, um die Zeit bis zum ersten Rendern zu optimieren.

Was ist aber, wenn einige CSS-Stile nur unter bestimmten Bedingungen verwendet werden, z. B. wenn die Seite gedruckt oder auf einen großen Monitor projiziert wird? Es wäre schön, wenn wir das Rendering für diese Ressourcen nicht blockieren müssten.

Mit CSS-Medientypen und -abfragen können wir folgende Anwendungsfälle angehen:

<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 mehreren Ausdrücken, die die Bedingungen bestimmter Medienfunktionen prüfen. Unsere erste Stylesheet-Deklaration enthält beispielsweise keinen Medientyp oder eine Medienabfrage und gilt daher in allen Fällen. das heißt, es wird immer das Rendering blockiert. Andererseits wird die zweite Stylesheet-Deklaration nur angewendet, wenn der Inhalt gedruckt wird – vielleicht möchten Sie das Layout neu anordnen, die Schriftarten ändern und andere wichtige Designüberlegungen für den Druck vornehmen. Daher muss diese Stylesheet-Deklaration das Rendern der Seite beim ersten Laden nicht blockieren. Die letzte Stylesheet-Deklaration enthält schließlich eine „Mediaabfrage“, die vom Browser ausgeführt wird: Wenn die Bedingungen erfüllt sind, blockiert der Browser das Rendering, bis das Stylesheet heruntergeladen und verarbeitet wurde.

Mithilfe von Medienabfragen können wir unsere Präsentation an bestimmte Anwendungsfälle anpassen, z. B. Display- und Printwerbung, aber auch an dynamische Bedingungen wie Änderungen der Bildschirmausrichtung, Größenänderungsereignisse usw. Achten Sie bei der Deklaration Ihrer Stylesheet-Assets genau auf den Medientyp und die Suchanfragen. sie wirken sich stark auf die Leistung des kritischen Rendering-Pfads aus.

Betrachten Sie diese Beispiele:

<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" />
  • Die erste Deklaration ist renderblockierend und stimmt in allen Bedingungen überein.
  • Die zweite Deklaration ist ebenfalls renderblockierend: "all" ist der Standardtyp. Wenn Sie also keinen Typ angeben, wird er implizit auf "all" festgelegt. Daher sind die erste und zweite Deklaration eigentlich gleichwertig.
  • Die dritte Deklaration enthält eine dynamische Medienabfrage, die beim Laden der Seite ausgewertet wird. Je nach Ausrichtung des Geräts während des Ladens der Seite kann portrait.css das Rendering blockieren oder nicht.
  • Die letzte Deklaration wird nur angewendet, wenn die Seite gedruckt wird ("print"), sodass sie beim ersten Laden der Seite im Browser nicht blockiert wird.

Hinweis: „Renderblockierung“ bezieht sich nur darauf, ob der Browser das erste Rendern der Seite auf dieser Ressource ausführen muss. In beiden Fällen lädt der Browser das CSS-Asset herunter, jedoch mit einer niedrigeren Priorität als nicht blockierende Ressourcen.

Feedback