63

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

4

4 に答える 4

72

FOUCを防ぐために、 Modernizrをできるだけ早くダウンロードして実行する場合は、<head>

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

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

于 2011-06-07T23:28:30.250 に答える
55

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

昨日これをテストしていて、これはかなり重要であることがわかりました.私が取り組んでいるサイトでは、すでにかなり最適化されていますが、その単一のスクリプトをヘッドに追加すると、IE9 で読み込み時間が最大 100 ミリ秒遅れました.シブの恩恵を受ける！

私のトラフィックの約 90% は HTML5 をネイティブにサポートするブラウザーから来ており、初期レンダリングで modernizr クラスを正しく表示する必要があるコア CSS を持っていないため、html5shiv を条件付きコメントに配置するこのアプローチを使用しています。統合された shim なしで 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>
于 2013-04-18T14:17:04.037 に答える
15

少し異なる方法で 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>

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

コメントで賛否両論を歓迎します。

于 2015-01-26T15:08:55.707 に答える