Muss JavaScript für eine optimale Seitendarstellung vor CSS stehen?

Sollte CSS immer vor JavaScript stehen?

Frage:
Online-Empfehlungen raten häufig dazu, CSS vor JavaScript zu platzieren, was darauf hindeutet, dass der Rendering-Thread dies erfordert Alle notwendigen Stilinformationen, bevor die Seite angezeigt wird. Ist diese Empfehlung noch gültig?

Antwort:

Um diese Behauptung zu untersuchen, wurden verschiedene Tests mit einem Ruby-Skript durchgeführt, das willkürliche Verzögerungen beim JavaScript- und CSS-Abruf zuließ. Die Ergebnisse zeigten, dass sich die Leistung moderner Desktop-Browser tatsächlich verbessert, wenn JavaScript-Einbindungen an erster Stelle stehen:

• CSS First: Das Rendern der Seite dauert 1,5 Sekunden.
• JavaScript First:Das Rendern der Seite dauert 1,4 Sekunden.

Ähnliche Ergebnisse wurden in Chrome, Firefox und Internet Explorer beobachtet. Opera zeigte jedoch keinen Unterschied in der Renderzeit.

Erklärung:
Moderne Browser implementieren spekulatives Parsen, bei dem sie mit dem Abrufen und Ausführen von Skripten beginnen, bevor sie auf ein stoßen. Etikett. Aus diesem Grund wartet der Browser darauf, dass JavaScript geladen und ausgeführt wird, bevor er CSS herunterlädt, wodurch alle Vorteile der vorherigen Einbindung von CSS zunichte gemacht werden.

Schlussfolgerungen:
Basierend auf den Testergebnissen ist dies der Fall Optimal ist es, externe Stylesheets nach externen Skripten in den einzubinden. Tag, insbesondere für Desktop-Browser mit einem Marktanteil von über 85 %. Diese Reihenfolge gewährleistet paralleles Herunterladen und verbessert die Leistung für die Mehrheit der Benutzer.

Ausnahmen:
Beachten Sie, dass die oben genannten Schlussfolgerungen für Desktop-Browser gelten und möglicherweise nicht für mobile Browser gelten, wie es bei einigen der Fall ist unterstützen derzeit kein spekulatives Parsen. Daher ist es immer noch ratsam, die Auswirkungen auf die Leistung auf Ihr spezifisches Publikum zu testen und zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonMuss JavaScript für eine optimale Seitendarstellung vor CSS stehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!