Da JavaScript in HTML-Rendering-Blöcken, ist es nicht der Fall mit CSS auch?
https://stackoverflow.com/questions/4026183
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie Sie JavaScript in den Blöcken HTML-Rendering, und es ist eine gute Übung JavaScript unten zu halten, kurz vor dem Body-Tag zu schließen, ist es nicht der Fall mit CSS auch?
Ich weiß, dass wir keine externen CSS außerhalb halten können.
Lösung
CSS blockiert nicht in der gleichen Art und Weise JavaScript tut
Mit Stylesheets, progressive Darstellung blockiert, bis alle Sheets heruntergeladen wurden. Deshalb ist es am besten Sheets auf das Dokument HEAD zu bewegen, so dass sie heruntergeladen bekommen erste und Rendering wird nicht blockiert. Mit Skripten wird eine progressive Darstellung für alle Inhalte blockiert unten das Skript. Verschieben Skripte so niedrig in der Seite wie möglich Mittel mehr Inhalt über dem Skript ist, das früher gemacht wird.
Darüber hinaus, wenn CSS auf den Kopf hinzugefügt wird, wird zunächst analysiert, und die Ergebnisse im HTML-Stil werden auch als es heruntergeladen wird. Dies vermeidet die Flash Of Unstyled Inhalt, was geschieht, wenn Sie Style-Tags am unteren Rande einer großen HTML-Seite platzieren.
Andere Tipps
Nicht nur, dass CSS nicht blockieren den Weg Javascript tut, aber auch werden einige Browser seltsame Dinge tun, wenn Sie CSS überall setzen, aber die <head>, wie es ignorieren oder es unvollständig gelten. HTML5 verbietet eigentlich <style> von außen <head> erscheinen (außer mit der „scoped“ -Funktion, die AFAIK niemand Arbeitsgeräte noch) nicht.
CSS-Stylesheets werden geladen, um das <link> Element verwendet wird, dieses Element nur dann gültig ist, wenn es im Kopf des Dokuments ist. Wie bei CSS HTML-Rendering blockieren, ist dies nicht der Fall, da die CSS angewendet wird, sobald der Browser genau wie die anderen <link> Elemente geladen wird. JS Blöcke HTML, da der Browser die JS übernimmt wollen die Kontrolle zu übernehmen und tatsächlich etwas zu tun, bevor das DOM vollständig geladen, im Grunde JS ausgeführt und dann allein gelassen.
Denken Sie darüber nach, wenn CSS die gleiche wie JS geladen wurde, würde kein Element gestylt werden, weil es sich auf Elemente beziehen würde, noch nicht geladen, daher wird es angewendet danach und nicht blockiert werden geladen.
Nein, CSS auf DOM-Element richtig anzuwenden, nachdem der Browser die CSS lesen.
Bei Javascript können Sie das Skript bei Lesen halten, da Sie es nach allen HTML-Lasten laufen zu lassen, wie:
window.onload = function (){
//here we start
}
JS
Da JS Ihrer Webseite ändern (ändern Sie die DOM) Browser warten, bis alle externen JS (parallel) heruntergeladen werden, interpretiert und ausgeführt, bevor sie mit dem Rest des HTML fort, die nach <script src="..." > kommt
Deshalb ist es eine gute Praxis, alle externen JS am unteren Rande des <body> zu setzen. Auf diese Weise Ihre HTML wird analysiert und gerendert und Ihre Benutzer hat das Gefühl, dass etwas geschieht ...
CSS
CSS auf der anderen Seite kann den DOM ändern, kann keine „schweren“ Änderungen auf der Seite machen und deshalb ist der Browser-Download nicht blockiert, des Restes der HTML-Analyse und eine progressive Darstellung wie Fall mit die JS. Es scheint, dass es die Wiedergabe nicht blockiert, aber es ist immer noch besser ist es an der Spitze zu setzen und vermeiden Sie die lange FOUC . Dabei spielt es keine Download-Block, obwohl
Nun scheint, dass mit dem Aufkommen von mobilen Geräten CSS zu Ihrem HEAD und JS am Boden setzen nicht genug ... Sie das ATF setzen wollen (above the fold) CSS inline und den Rest der riesigen CSS zusammen mit Ihrem JS minimiert - an der Unterseite / defered und async
Werfen Sie einen Blick auf diese: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
Warum wäre es eine gute Praxis der JavaScript am Boden zu halten?
Ich würde sagen, dass es die beste Praxis CSS zu setzen sowie Javascript in separaten Dateien und sie in Ihrem HTML-Dokument des <head> Abschnitt verwendet wird.
