Parser-Blockierung und Render-Blockierung

Question

Ich habe die Google Developers-Dokumentation zur Optimierung der Webleistung gelesen. Ich bin ein wenig verwirrt mit der dort verwendeten Terminologie. Sowohl CSS- als auch JavaScript-Dateien blockieren die DOM-Konstruktion. Aber CSS heißt Render-Blocking, während JavaScript Parser-Blockierung genannt wird. Was ist der Unterschied zwischen den Begriffen "Parser-Blockierung" und "Render-Blockierung"? Oder sind sie gleich und die Terminologie wird nur synonym verwendet?

Answer 1

Stellen Sie sich vor eine HTML-Seite hat zwei <script src="..."> Elemente. Der Parser sieht den ersten. Es muss aufhören * zu analysieren, während es abruft und dann das Javascript ausführt, weil es document.write() Methodenaufrufe enthalten kann, die grundlegend ändern, wie das nachfolgende Markup analysiert werden soll. Das Holen von Ressourcen über das Internet ist vergleichsweise viel langsamer als die anderen Dinge, die der Browser tut, also wartet er darauf, dass nichts zu tun ist. Irgendwann kommt der JS an, wird ausgeführt und der Parser kann weitergehen. Es sieht dann das zweite <script src="...">-Tag und muss den gesamten Prozess des Wartens darauf durchlaufen, dass die Ressource erneut geladen wird. Es ist ein sequentieller Prozess, und das ist Parser-Blockierung.

CSS-Ressourcen sind unterschiedlich. Wenn der Parser ein zu ladendes Stylesheet sieht, gibt er die Anforderung an den Server aus und geht weiter. Wenn andere Ressourcen geladen werden müssen, können diese alle parallel abgerufen werden (abhängig von einigen HTTP-Einschränkungen). Aber nur wenn die CSS-Ressourcen geladen und bereit sind, kann die Seite auf dem Bildschirm angezeigt werden. Das ist Render-Blocking, und weil die Fetches parallel sind, ist es eine weniger ernste Verlangsamung.

---

* Parser-Blockierung ist nicht ganz so einfach wie in einigen modernen Browsern. Sie haben die Fähigkeit, den folgenden HTML-Code versuchsweise zu analysieren, in der Hoffnung, dass das Skript beim Laden und Ausführen nichts unternimmt, um das nachfolgende Parsing zu durcheinander bringen zu können, oder dass es immer noch erforderlich ist, dieselben Ressourcen zu laden . Aber sie können immer noch die Arbeit zurücknehmen müssen, wenn das Skript etwas Unbeholfenes tut.