30

フッター側など<link>、タグ外のcssファイルにtoを入れてもよろしいでしょうか？<head/>

これの悪い結果と良い結果はどちらですか?

私はこれを尋ねます.実際には、何もスタイルを設定せず、いくつかのcss3アニメーションを私のWebサイトにもたらすcssファイルがあるため、パフォーマンス上の理由から、それをhtmlの最後に配置したいと思います...

ありがとう

4

7 に答える 7

31

スタイル シートは でリンクされている<head>ため、ブラウザは HTML のスタイルを設定し、そのままレンダリングできます。ドキュメントの下部にスタイル情報を配置すると、ブラウザーはスタイルを変更して、ドキュメント全体を上部から再度レンダリングする必要があります。

これは第一に、時間がかかり、第二に、非常に見苦しくなります。

これは、含まれているスクリプトとは異なります。スクリプトは完了するまでロードをブロックするため、プロセスのできるだけ遅い段階でロードします。

于 2013-08-22T23:40:43.910 に答える
20

W3 仕様によると、<link>タグは次の<head>セクションにのみ入れることになっています。

参考文献

HTML 4.01 の場合: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

HTML5 の場合: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

検証の問題: 2017 年 10 月 27 日更新

2013 年には、HTML ドキュメントlink内にタグを配置すると、HTML 4.01 に基づくルールでvalidate.w3.orgを使用して検証されませんでした。body

( https://validator.nuで HTML 4.01 と HTML 5.0 の検証を試すことができます)

最初に読んだとき、HTML 5.0 仕様ドキュメントは、 がドキュメントの要素にlinkのみ表示されるべきであることを暗示しているようです。headただし、HTML 5.0 バリデーターを使用して検証するlinkと、フロー コンテンツに があっても、ドキュメントは正常に表示されます。

この不一致の最良の説明は次のとおりです。

linkエントリ ( MDN リンク エントリ)の MDN ドキュメントを読むと、link要素にitemprop属性がある場合、linkがフローおよびフレージング コンテンツに表示されることがわかりますbody。

itempropこれが、属性が存在しない場合でも HTML 5.0 バリデーターが警告を発行しない理由である可能性があります。

これitempropは microdata 仕様の一部であり、比較的新しく ( HTML Microdata について読んでください)、読む価値があります。

現時点では、link内のスタイルシートに を追加できますbodyが、その利点が何であるかは明確ではありません。

于 2013-08-22T23:41:03.313 に答える
2

WHATWG HTML 標準では、指定された非常に多くのケース<link>で本文を使用できます。

<link>の前に配置することの「合理性」については</body>、最近、ギャラリーに大きな画像をプリロードするために使用しました。

<link rel="preload" href="images/big/01.jpg" as="image">

そのため、ユーザーがサムネイルをクリックしたときに、画像がブラウザーのキャッシュに既に読み込まれているため、通常、サーバーの応答を待つ必要はありませんでした。

于 2018-05-02T19:32:40.723 に答える