web-dev-qa-db-ja.com

Modernizrファイルは頭に置くべきですか？

Modernizr JavaScriptファイルへの参照はページの先頭にあるべきですか？私は常にすべてのスクリプトをページの下部に配置しようとしますが、これを保持したいと思います。そして、それが頭の中にある必要がある場合、なぜですか？

javascriptmodernizrhtml-head
61
amateur

[〜＃〜] fouc [〜＃〜] を防ぐために Modernizr をできるだけ早くダウンロードして実行する場合は、<head>に入れます

インストールガイド から：

HTMLの<head>にスクリプトタグをドロップします。最高のパフォーマンスを得るには、スタイルシートの参照後にそれらに従う必要があります。 Modernizrを頭に配置することをお勧めする理由は2つあります。HTML5Shiv（IEでHTML5要素を有効にする）は<body>の前に実行する必要があり、Modernizrが追加するCSSクラスのいずれかを使用している場合、 FOUCを防ぐ必要があります。

71
Wesley Murch

<head>に配置するすべてのスクリプトは、レンダリングとさらなるスクリプト実行をブロックします。 Modernizrが<head>でmustを行う唯一のことは、統合された html5shiv です。これはHTML5タグのサポートをInternet Explorer 8以前にハッキングします。

I 昨日これをテストしていました これはかなり重要であることがわかりました-私が作業しているサイトでは、すでにかなり最適化されており、その単一のスクリプトを頭に追加すると、ロード時間が〜100ms遅れましたIE9、これはshivの恩恵さえ受けません！

トラフィックの約90％がHTML5をネイティブにサポートするブラウザーから来ており、初期レンダリングで正しく表示するためにmodernizrクラスを必要とするコアCSSがないため、html5shivを条件付きコメントに配置するこのアプローチを使用しています。統合されたシムなしでmodernizrをロードします。

<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は現在、75％を超えるサイトについて、Modernizrをheadに配置してもメリットがないことを示唆しています。

Modernizrを一番下に移動する

予期しない状況が発生する可能性は高くなりますが、ユーザーが頭の中でスクリプトをまったく持たない方がはるかに優れています。

75％を超えるサイトが頭の中でそれを必要としていないことに間違いはありません。これらのすべてのサイトの速度が低下するので、このデフォルトを変更し、視聴するよりも25％を教育したいと思います。

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

34
David Murdoch

IE条件を少し異なる方法で使用するのはどうですか？誰もがこのソリューションについてどう思いますか：

<head></head>タグ内：

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

</body>タグの終了前：

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

これにより、IE8以前の場合はModernizrがヘッドにロードされ、他のブラウザーの場合はボディの前にロードされます。

コメントで賛否両論に関する公開討論を歓迎します。

15
redfox05