Im Gegensatz zu unserem reinen HTML-Beispiel müssen wir zur Erstellung des CSSOM nun zusätzlich die CSS-Datei abrufen und parsen. Außerdem wissen wir, dass wir sowohl das DOM als auch das CSSOM zur Erstellung der Renderstruktur benötigen.
Unlike our plain HTML example, we also need to fetch and parse the CSS file to construct the CSSOM, and we need both the DOM and CSSOM to build the render tree.
domContentLoaded markiert typischerweise den Zeitpunkt, zu dem sowohl das DOM als auch das CSSOM einsatzbereit sind.
domContentLoaded typically marks when both the DOM and CSSOM are ready.
Warum besitzt das CSSOM eine Baumstruktur?
Was passiert, wenn wir unser Skript ausführen möchten und der Browser das CSSOM noch nicht vollständig heruntergeladen und erstellt hat?
What if the browser hasn't finished downloading and building the CSSOM when we want to run our script?
Die Antwort ist einfach und schlecht für die Leistung: Der Browser verzögert die Skriptausführung, bis das CSSOM vollständig heruntergeladen und erstellt wurde.
CSS wird standardmäßig als rendering-blockierende Ressource behandelt, d. h., der Browser hält das Rendering der verarbeiteten Inhalte zurück, bis das CSSOM erstellt wurde.
By default, CSS is treated as a render blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed.
Deshalb blockiert der Browser das Rendern, bis sowohl das DOM als auch das CSSOM vorliegen.
The browser blocks rendering until it has both the DOM and the CSSOM.
Nun ja, wir wissen, dass es keine Rolle spielt, ob JavaScript inline oder extern bereitgestellt wird, weil der Browser, sobald er auf das Skript-Tag trifft, blockiert wird und wartet, bis das CSSOM erstellt wurde.
Why? Well, we know that it doesn't matter if the JavaScript is inlined or external, because as soon as the browser hits the script tag it blocks and waits until the CSSOM is constructed.
JavaScript, das den Parser blockiert, zwingt den Browser, auf das CSSOM zu warten und hält die Erstellung des DOM auf, was wiederum das erste Rendern erheblich verzögern kann.
Parser blocking JavaScript forces the browser to wait for the CSSOM and pauses construction of the DOM, which in turn can significantly delay the time to first render.
Die Ausführung von JavaScript erfolgt erst, wenn das CSSOM fertig ist.
JavaScript execution pauses until the CSSOM is ready.
Die Ausführung von JavaScript blockiert das CSSOM.
JavaScript execution blocks on the CSSOM.
Schlimmer noch: Zum Ausführen der JavaScript-Datei müssen wir auch das CSSOM blockieren und darauf warten. Noch einmal zur Erinnerung: JavaScript kann das CSSOM abfragen, wodurch der Browser solange pausiert, bis style.css heruntergeladen und das CSSOM erstellt wurde.
Worse, in order to execute the JavaScript file we have to block and wait for CSSOM; recall that JavaScript can query the CSSOM and hence the browser pauses until style.css is downloaded and CSSOM is constructed.
Als Nächstes wollen wir uns mit der Rendering-Baumstruktur befassen, die das DOM und das CSSOM miteinander verknüpft.
Next, lets talk about the render tree that links the DOM and CSSOM together.
