Sollte CSS immer Vorrang vor JavaScript haben?
Konventionelle Weisheit:
Eine gängige Empfehlung besteht seit langem aus folgenden Gründen darin, CSS vor JavaScript zu setzen:
- Rendering Der Thread muss gerendert werden um alle Stilinformationen für die Seite darzustellen.
- Wenn JavaScript zuvor enthalten ist, muss die JavaScript-Engine alles analysieren, bevor sie mit dem nächsten Ressourcensatz fortfahren kann.
- Das bedeutet, dass der Rendering-Thread die Seite nicht vollständig anzeigen kann, da sie nicht über alle benötigten Stile verfügt.
Tatsächliche Tests:
Tatsächliche Tests zeigten jedoch sehr unterschiedliche Ergebnisse:
- JavaScript wird nicht ausgeführt, bis alle CSS wird heruntergeladen.
- Daher erscheint es effizienter, das JavaScript vorne einzubinden, da der JavaScript-Thread länger laufen kann.
Fazit:
-
Für Desktop-Browser: Setzen Sie in modernen Browsern CSS vor JavaScriptwird nicht Leistungsverbesserungen bringen. In einigen Fällen kann es sogar zu Leistungseinbußen kommen (z. B. wenn CSS verzögert ist). Daher sollten Sie nach dem JavaScript ** auf das externe Stylesheet ** verlinken.
-
Für mobile Browser: Es gibt Hinweise darauf, dass einige mobile Browser (z. B. WebKit für Android) immer noch kein prädiktives Parsen durchführen. Bei solchen Browsern kann die Platzierung von Skripten vor CSS zu Leistungseinbußen führen.
Technische Erklärung:
- Historische Browser stoppen das Parsen von HTML, wenn sie auf das
