Sagen wir, wir haben eine HTML-Seite mit einem einzigen Stylesheet . Wie übernimmt der Browser die Regeln in diesem Stylesheet und wendet sie auf das HTML an? Ich frage nicht, wie man es schneller machen kann, ich möchte wissen, wie das Rendering selbst gehandhabt wird.
Wendet es jede Regel nacheinander an, während es das Stylesheet analysiert und das Ergebnis progressiv rendert? Oder werden die Inhalte der CSS-Datei vollständig heruntergeladen, dann vollständig ausgewertet und dann auf das HTML auf einmal angewendet? Oder etwas anderes?
Ich frage das, nachdem ich früher eine Antwort auf eine Frage über die Reihenfolge der CSS-Regeln, die die Rendering-Geschwindigkeit beeinflussen gepostet habe, unter der Annahme, dass die Styles während das Stylesheet geladen wurde, angewendet wurden, so dass die ersten Regeln angewendet würden, bevor die letzten, und nicht alle auf einmal. Ich bin mir nicht sicher, woher ich die Idee habe, es ist einfach etwas, was ich immer gedacht habe.
Ich habe ein Demobeispiel auf meinem Server ausprobiert, das so aussah:
Testtest.css Inhalt:
html { background:green }
/* Tausende von Zeilen irrelevanter CSS, um den Download langsam zu machen */
html { background:red }Beim Testen in Firefox 5 erwartete ich zuerst grün zu sehen, dann zu rot zu wechseln. Das ist nicht passiert. Ich habe es mit zwei separaten Stylesheets mit widersprüchlichen Regeln versucht und die gleichen Ergebnisse erhalten. Nach vielen Kombinationen war der einzige Weg, wie ich es zum Laufen gebracht habe, ein Inline-</code> Block im <code><head></code>, wobei die widersprüchlichen Regeln von einem <code><link></code> im <code><body></code> kamen (der <body> selbst war vollständig leer außer dem Link-Tag). Auch bei Verwendung eines Inline-<code>style</code>-Attributs am <code><html></code>-Tag und dann Laden dieses Stylesheets wurde der Blinker, den ich erwartet hatte, nicht erzeugt.</p> <p>Werden Nachmalungen in <em>irgendeiner</em> Weise durch das CSS beeinflusst, oder wird das Endergebnis erst angewendet, nachdem das gesamte Stylesheet heruntergeladen und seine Regeln berechnet wurden, wie das Endergebnis sein sollte? Werden CSS-Dateien parallel mit dem HTML selbst heruntergeladen oder blockieren sie es (wie Skript-Tags)? Wie funktioniert das eigentlich?</p> <p>Ich suche keine Optimierungstipps, sondern nach autoritativen Referenzen zu diesem Thema, damit ich sie in Zukunft zitieren kann. Es war sehr schwierig, diese Informationen zu suchen, ohne tonnenweise nicht zusammenhängendes Material zu finden. Zusammenfassung:</p> <ul> <li>Wird der gesamte CSS-Inhalt heruntergeladen, bevor <em>irgendetwas</em> davon angewendet wird? (Bitte Referenz)</li> <li>Wie wird dies von Dingen wie <code>@import</code>, mehreren <code><link></code>, Inline-Style-Attributen, <code><style></code>-Blöcken im Kopf und verschiedenen Rendering-Engines beeinflusst?</li> <li>Blockiert der Download von CSS-Inhalten den Download des HTML-Dokuments selbst?</li> </ul></x-turndown>
0 Stimmen
Ein Beispiel dafür, warum mir das wichtig ist: Ich erstelle eine minimierte CSS-Datei aus 10-15 kleinen Dateien. Alles ist "namespaced" oder verwendet spezifische Selektoren, bei denen die Reihenfolge in vielen Fällen vertauscht werden kann. Ich habe immer das "weniger relevante" CSS zuletzt eingefügt, in der Annahme, dass die Stile zuletzt angewendet werden und dass sie zuerst stehen würden, damit das wichtigere Zeug (Seitenlayout oder gemeinsame Klassen zum Beispiel) später ausgewertet werden. Ich habe sehr starke Gefühle, dass dies völlig irrelevant ist, suche aber nach Fakten, die das unterstützen. Eine Antwort darauf sollte auch die verlinkte Frage beantworten.