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. Achten Sie darauf, dass Ihr CSS möglichst schlank ist, liefern Sie es so schnell wie möglich aus und verwenden Sie Medientypen und Abfragen, um das Rendering zu entsperren.
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. Das HTML ist offensichtlich, da wir ohne das DOM nichts zum Rendern hätten. Die CSS-Anforderung ist jedoch möglicherweise 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 renderblockierende Ressource behandelt.
- 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.
Das vorherige Beispiel, das die Website der New York Times mit und ohne CSS zeigt, zeigt, warum das Rendern 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 Rendern, bis er sowohl das DOM als auch das CSSOM hat.
CSS ist eine Ressource, die das Rendering blockiert. Stellen Sie es so schnell und so schnell wie möglich an den Kunden, um die Zeit bis zum ersten Rendering 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.
CSS-Medientypen und „Medienabfragen“ ermöglichen es uns, folgende Anwendungsfälle zu berücksichtigen:
<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 Style-Sheet-Deklaration liefert eine Medienabfrage, die vom Browser ausgeführt wird: Wenn die Bedingungen übereinstimmen, blockiert der Browser das Rendering, bis das Stylesheet heruntergeladen und verarbeitet wurde.
Mithilfe von Medienabfragen können wir unsere Präsentation auf bestimmte Anwendungsfälle wie Display oder Druck sowie auf dynamische Bedingungen wie Änderungen der Bildschirmausrichtung und Größenänderungsereignisse anpassen. Achten Sie beim Deklarieren Ihrer Stylesheet-Assets auf den Medientyp und die Abfragen. 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 das Blockieren des Renderings und stimmt mit allen Bedingungen überein.
- Die zweite Deklaration ist auch das Blockieren des Renderings:
"all"ist der Standardtyp. Wenn Sie also keinen Typ angeben, wird er implizit auf"all"gesetzt. 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.cssdas 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.
Die Blockierfunktion für das Rendering bezieht sich nur darauf, ob der Browser das erste Rendering der Seite auf dieser Ressource durchführen 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.