Verständnis Render CSS Blocking

ich zu verstehen versuche, wie CSS in einer bestimmten Einstellung ausgewertet:Verständnis Render CSS Blocking

Nehmen wir an, ich den folgenden Inhalt in meinem <head>-Tag:

<html><head> 
... 
    <link href="reset.css" type="text/css" rel="stylesheet"> 
    <link href="style.css" type="text/css" rel="stylesheet"> 
    <link href="autocomplete.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
... html ... 
<script type="text/javascript" src="/js/script.js"></script> 
</body></html>

Nun nehmen wir an, reset.css und style.css enthalten einige Regeln, die sich unmittelbar auf den oben genannten Fold-Inhalt oder die Elemente im HTML auswirken. autocomplete.css enthält jedoch nur die verwendete Klasse, die später von JavaScript verwendet wird.

Nehmen wir weiter an, dass der bereits heruntergeladene Browser reset.css und style.css aber autocomplete.css noch aussteht. Ich frage mich, was passieren würde, wenn der Browser es tun würde, trifft das blockierende Skript-Tag am Ende der Seite? Offensichtlich kann es den HTML-Code bis zum Script-Tag rendern, aber wird die Ausführung des Skripts durch die fehlende autocomplete.css blockiert?

Beachten Sie, dass das Skript-Tag keine Synchronisierung ist.

Ich habe gelesen: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

Und da heißt es, dass die Ausführung des JavaScript blockiert wird, bis die CSSOM ist.

Jetzt: 1. Startet die Seite Rendering sogar autocomplete.css ist noch nicht angekommen? und, 2. Ist die Ausführung des script.js Javascript blockiert, bis die autocomplete.css da ist?

Hinweis, ich beziehe mich auf zwei verschiedene Dinge: Rendering und Skriptausführung.

Quelle

2017-03-03 worenga

dies lesen. Nur ein Tipp ** [Render-blockierende CSS entfernen] (https://varvy.com/pagespeed/render-blocking-css.html) ** –

Wenn 'autocomplete.css' fehlt, wird die Seite einen stillen Fehler werfen: ** Laden der Ressource fehlgeschlagen: net :: ERR_FILE_NOT_FOUND **. Aber alles wird weiterhin geladen, einschließlich Ihres Skripts. Wenn die Datei vorhanden ist und es Zeit zum Laden braucht, wird Ihre Seite nicht geladen, da sich Ihr CSS im Kopf befindet und vor dem Laden des Rests der Seite geladen werden muss. –

Alle CSS ist Render-Blockierung. Die einzige Ausnahme von dieser Regel wäre CSS, die Ihre DOM noch nicht kennt (geladen async, gebaut/geladen im laufenden Betrieb über javascript).

Bis Ihr Browser nicht alle CSS durch das Erstellen des CSS-Objektmodells auflöste (oder denkt, dass es gelöst wurde), wird die Seite nicht gerendert und javascript wird nicht ausgeführt. resolve bedeutet jedoch nicht unbedingt load. Es kann zwei Dinge bedeuten:

Last & Parse. Wenn es über 2 k Zeilen Code liegt, werden Sie es bemerken, wenn Sie mit geeigneten Werkzeugen messen. Wenn es über 10 k Zeilen Code ist, können Sie es ohne Verwendung von Tools bemerken. Dies gilt unabhängig davon, ob es Regeln für Elemente oberhalb des Falts enthält oder nicht.
kann nicht laden/analysieren (aufgrund von Netzwerkproblemen oder ungültigen Regeln) - Wenn ein Fehler zurückgegeben wird, wenn CSS geladen/geparst wird, wird es schneller aufgelöst und die resultierenden Unterschiede werden kaum wahrnehmbar sein. Wenn der Server keinen Fehler zurückgibt (und nicht reagiert), blockiert das CSSOM das Erstellen, das Laden der Seite und das Ausführen der Skripts.

Ressourcen:

CSSOM spec des W3C.
der MDN CSSOM Ressourcenseite
What is CSSOM?

Quelle

2017-03-03 14:34:00

Ok, um klar zu sein: Die Ausführung von '/ js/script.js' wird blockiert, aber das Rendering wird nicht? – worenga

Das bringt mich auf den Kern meiner Frage: Lesen https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp es ist die Ausführung der js blockiert, bis der Cssom konstruiert ist (Beachten Sie, dass das Skript nicht asynchron ist). Wird das Skript blockiert, obwohl "autocomplete.css" keine Regeln enthält, die für den Inhalt des HTML gelten? Ich verstehe jetzt, dass das Rendering passieren kann, obwohl einige CSS nicht da sind? – worenga

@worega Ich habe meine Antwort im Lichte dessen, was ich zu diesem Thema finden konnte, aktualisiert. Es sieht so aus, als würde die JavaScript-Ausführung verzögert, bis "CSSOM" erstellt wurde. –

Autovervollständigung ist eine CSS-Datei. Daher fügt es den Klassen, die in html definiert sind, nur Stileigenschaften hinzu. Das Javascript wird weiterhin korrekt ausgeführt, auch wenn das CSS fehlt.

Die einzige Sache, die passieren kann, ist, dass, wenn die js einige CSS-Stile der Klassen ändert, deren Stil in Autocomplete.css definiert ist. Aber selbst dann ist es unwahrscheinlich.

Quelle

2017-03-03 14:29:08

Muss der Browser nicht mit der Ausführung von '/ js/script.js' warten, bis autocomplete.css angekommen ist? – worenga

Die aktuellen Performance-Empfehlungen sind wie folgt:

1) Inline alle CSS in den Header, den der Browser zu machen braucht above the fold-Gehalt . Inhalt, der ohne Scrollen sichtbar ist.

2) Fügen Sie alle anderen CSS unten auf der Seite oder besser Last asynchron mit etwas wie folgt aus: https://github.com/filamentgroup/loadCSS

Quelle

2017-03-27 09:40:06

Verständnis Render CSS Blocking

Antwort

Verwandte Themen