Der kritische Rendering-Pfad ist die Abfolge von Phasen, die der Browser durchläuft, um HTML, CSS und JavaScript in Pixel auf dem Bildschirm umzuwandeln:
Diese Schritte wirken sich direkt auf die Leistung unserer Website aus, daher müssen wir einige Dinge berücksichtigen, wenn wir diesen Prozess optimieren möchten.
Der Browser erhält den HTML-Code über einen HTTP-Aufruf. Sobald es diese erhält, beginnt es mit dem Aufbau des DOM mit diesen Daten.
Dieses DOM basiert auf Knoten. Jedes HTML-Tag entspricht einem Knoten, und untergeordnete Elemente im HTML wären auch untergeordnete Knoten im DOM-Baum.
Je größer die Anzahl der Knoten, desto länger dauert der Seitenrendering-Vorgang.
Während das DOM alle Informationen über den Inhalt der Seite enthält, enthält das CSSOM alle Informationen darüber, wie dieser Inhalt angezeigt wird.
CSS-Verarbeitung blockiert das Rendern. Das heißt, bis die Verarbeitung vollständig ist, können Sie nicht mit weiteren Schritten fortfahren, um den Inhalt endgültig auf dem Bildschirm anzuzeigen. Dies liegt daran, dass es vorkommen kann, dass in einer CSS-Datei die Stile überschrieben werden, die ein paar Zeilen weiter oben angewendet wurden.
Sobald wir DOM und CSSOM bereit haben, werden diese kombiniert, was zum „Render-Baum“ führt, der alle notwendigen Informationen über die Elemente enthält, die auf dem Bildschirm angezeigt werden. In diesem Baum sind Elemente wie alles, was display: none; und ihre Nachkommen oder alles, was im
-Tag zu finden ist.In der „Layout“-Phase wird die Größe der Renderbaumelemente und ihre Beziehung zu anderen Elementen definiert. Dieser Vorgang hängt vom Bildschirm ab, auf dem die Webseite besucht wird.
Wenn nicht angegeben, werden Elemente standardmäßig auf 100 % der Breite des übergeordneten Elements eingestellt, was in einigen Browsern eine feste Breite ist. Aus diesem Grund ist es notwendig, dieses Element in den
aus unserem Dokument:
<head>
<meta name="viewport" content="width=device-width" />
</head>
Jedes Mal, wenn ein Benutzer sein Mobilgerät dreht, wird der Layout-Prozess erneut ausgeführt, da sich die Elemente und ihre Anordnung auf dem Bildschirm möglicherweise ändern können.
Das Layout kann sich auf die Leistung einer Website auswirken, denn je größer die Anzahl der Knoten, desto länger dauert der Abschluss dieses Prozesses. Ein langsamer Layout-Prozess kann dazu führen, dass einige Animationen nicht gut aussehen und dass die erste Seite langsamer geladen wird.
Das Malen der Pixel auf dem Bildschirm ist der letzte Schritt des Rendervorgangs. Dies ist ein schneller Schritt, da nach dem ersten Laden (Onload) nur die Bereiche der Seite neu gezeichnet werden, die Änderungen unterzogen wurden; Browser sind bereits optimiert, um diesen Vorgang nicht unnötig durchzuführen.
Dieser Prozess kann auf unterschiedliche Weise optimiert werden, aber jeder Fall ist einzigartig und am Ende kommt es darauf an, dass Sie auf Ihr Projekt die Maßnahmen anwenden, die am besten zu ihm passen.
Die Idee ist, dass der Browser Ressourcen wie Bilder, Stile, Skripte usw., die für die Seite wichtig sind, so schnell wie möglich herunterlädt. Daher wäre es ratsam, diese Elemente möglichst weit oben im Auch wenn es sich um Skripte oder kleinere Stile handelt, können sie in Inline-Tags eingefügt werden. Wenn Sie andererseits ein Skript laden, das ein Element des DOM ändert, besteht die Idee darin, es zu laden, sobald der Baum mit allen seinen Knoten erstellt wurde. In solchen Fällen wäre es notwendig, das Skript am Ende im Body-Tag zu laden. Das Aufschieben des Ladens von Skripten, die das DOM nicht verändern, ist eine sehr gute Vorgehensweise, um die Ladezeit der Website zu verkürzen. Dies kann über die Attribute „async“ und „defer“ erfolgen. Wenn Sie ein Skript als asynchron festlegen, wird dieses Skript unabhängig heruntergeladen und ausgeführt, sodass der Rendervorgang nicht blockiert wird und die Ausführungszeit beliebig ist. Ein Skript mit dem Defer-Attribut wird asynchron heruntergeladen, berücksichtigt jedoch die Reihenfolge, in der es sich im Dokument befindet. Es ist auch eine gute Möglichkeit zu steuern, ob ein kleines Skript nach einem größeren Skript ausgeführt wird. Im obigen Beispiel werden die drei Skripte asynchron heruntergeladen. Wir gehen davon aus, dass das letzte Skript zuerst heruntergeladen wird, da es kleiner ist. Das erste Skript wird völlig unabhängig heruntergeladen und ausgeführt, ohne dass es darauf wartet, dass andere Elemente bereit sind, noch den Rendervorgang blockiert. In jedem Fall wird das letzte Skript nach dem zweiten ausgeführt, da das Defer-Attribut die Reihenfolge berücksichtigt. Die Idee wäre, nur die Stile zu laden, die auf dem Bildschirm benötigt werden. Eine Technik, die zur Optimierung der Leistung beitragen könnte, wäre also, die Seitenstile in verschiedene Dateien zu unterteilen, je nachdem, ob sie auf Mobiltelefone angewendet werden sollen , Tablets, Desktop usw. Im HTML würden diese Dateien mit Medienabfragen geladen, wodurch das unnötige Laden von Stilen vermieden wird. Obwohl es albern erscheinen mag, kann das Minimieren von Dateien erheblich dazu beitragen, die Leistung einer Seite zu verbessern, da das Entfernen von Leerzeichen, Kommentaren usw. die Arbeit reduzieren kann, die der Browser zum Erstellen des Renderbaums leisten muss. Dies sind nur einige Dinge, die Sie beachten sollten, um diesen Prozess zu optimieren. Vor diesem Hintergrund ist es sinnvoller, Qualitätscode schreiben zu können, der bereits darauf ausgelegt ist, den kritischen Rendering-Pfad zu optimieren. Das obige ist der detaillierte Inhalt vonWas ist der kritische Rendering-Pfad und wie kann er optimiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
<head>
<meta name="viewport" content="width=device-width" />
</head>
<head>
<style>
.foo {
color: red;
}
</style>
</head>
Laden des Skripts verschieben
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
Trennung von Stilen mit Medienabfragen
<head>
<meta name="viewport" content="width=device-width" />
</head>
Ressourcen minimieren
Schlussfolgerungen
Verwendung anhängen
switch-Anweisung
So konvertieren Sie Ape in WAV
Excel generiert QR-Code
Die Rolle von Pycharm
So betreten Sie die 404-Website
Tutorial zur Konfiguration von Java-Umgebungsvariablen
Wie viele Jahre müssen Sie für die Krankenversicherung bezahlen, um lebenslang krankenversichert zu sein?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
