it-swarm.com.de

Soll die Modernizr-Datei in den Kopf gestellt werden?

Sollte sich der Verweis auf die Modernizr-JavaScript-Datei im Kopf der Seite befinden? Ich versuche immer, alle Skripte am Ende der Seite zu platzieren und möchte dies beibehalten. Und wenn es im Kopf sein muss, warum?

61
amateur

Wenn Sie möchten, dass Modernizr so schnell wie möglich heruntergeladen und ausgeführt wird, um ein FOUC zu verhindern, setzen Sie es in das <head>

Aus ihrer Installationsanleitung :

Löschen Sie die Skript-Tags in der <head> Ihres HTML. Um eine optimale Leistung zu erzielen, sollten Sie sie nach Ihren Stylesheet-Referenzen einhalten. Der Grund, warum wir empfehlen, Modernizr im Kopf zu platzieren, ist zweifach: Das HTML5-Shiv (das HTML5-Elemente im IE aktiviert) muss ausgeführt werden, bevor <body>, und wenn Sie eine der von Modernizr hinzugefügten CSS-Klassen verwenden, möchten Sie einen FOUC verhindern.

71
Wesley Murch

Ich würde nein argumentieren: Jedes Skript, das Sie in den <head> einfügen, blockiert das Rendern und die weitere Skriptausführung. Das einzige, was Modernizr muss im <head> tut, ist das integrierte html5shiv , das die HTML5-Tag-Unterstützung in Internet Explorer 8 und früher hackt.

Ich habe dies gestern getestet und fand dies ziemlich bedeutend - auf der Site, an der ich arbeite, die bereits ziemlich gut optimiert ist, hat das Hinzufügen dieses einzelnen Skripts zum Kopf meine Ladezeit um ~ 100 ms verzögert IE9, das nicht einmal vom Shiv profitiert!

Da rund 90% meines Datenverkehrs von Browsern stammt, die HTML5 nativ unterstützen, und ich kein Kern-CSS habe, für das die modernizr-Klassen beim anfänglichen Rendern korrekt angezeigt werden müssen, verwende ich diesen Ansatz, bei dem das HTML5Shiv in einen bedingten Kommentar und versetzt wird lädt modernizr ohne das integrierte shim:

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>
54
Chris Adams

Paul Irish schlägt jetzt vor, dass es für> 75% der Websites keinen Vorteil bringt, Modernizr in head zu platzieren.

Bewegen Sie Modernizr nach unten

Es hat mehr Potenzial für unerwartete Situationen, jedoch ist es für den Benutzer viel besser, überhaupt keine Skripte im Kopf zu haben.

Ich wette,> 75% der Websites benötigen es nicht im Kopf. Ich möchte diese Standardeinstellung lieber ändern und die 25% aufklären, als zuzusehen, wie wir all diese Websites verlangsamen.

https://github.com/h5bp/html5-boilerplate/issues/1605

34
David Murdoch

Wie wäre es, wenn Sie IE conditionals auf eine etwas andere Art und Weise verwenden? Was denken alle über diese Lösung:

Innerhalb der <head></head> Stichworte:

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

Vor dem Ende des </body> Etikett:

<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>

Dies würde dazu führen, dass Modernizr im Kopf für IE8 und darunter geladen wird und für alle anderen Browser vor dem Hauptteil.

Offene Diskussion über Vor- und Nachteile in den Kommentaren willkommen.

15
redfox05