web-dev-qa-db-ja.com

HTML WebページのどこにCSSとJavascriptコードを置くべきですか？

Webページの設計中に、次のコードをどこに配置すればよいですか？

<link rel=stylesheet type="text/css" href="css/layout.css">

<head>に入れるべきですか、それとも<body>に入れるべきですか？次の質問を明確にしてください。

  1. <head>またはHTMLコードの周囲に配置すると、どのような違いが生じますか？
  2. 2つのCSS（またはJavascript）ファイルがある場合はどうなりますか？ 1つのファイルのみを別のファイルの前に含めることができるため、WebブラウザーがWebページを表示するために使用するファイルはどれですか？
javascripthtmlcsscss3
58
Sumit Gupta

私の意見では、ベストプラクティスはCSSファイルをヘッダーに配置することです

<head>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

終了</body>タグの前のJavascriptファイル

  <script type="text/javascript" src="script.js"></script>
</body>

また、お持ちの場合は、2つのCSSファイルを言ったように。ブラウザは両方を使用します。セレクターがあった場合、すなわち。両方のCSSファイルで同じ.content {}を使用すると、ブラウザは最初のプロパティと同様のプロパティを2番目のプロパティで上書きします。それが理にかなっている場合。

74
brenjt

上部にスタイルシートを置くディスカッションへのリンク

Yahoo!でパフォーマンスを調査しているときに、スタイルシートをドキュメントに移動すると、HEADによりページの読み込みが速くなるように見えます。これはHEADページを段階的に表示できます。

パフォーマンスを重視するフロントエンドエンジニアは、ページを段階的に読み込むことを望んでいます。つまり、ブラウザにコンテンツをできるだけ早く表示するようにします。これは、コンテンツが多いページやインターネット接続が遅いユーザーにとって特に重要です。進行状況インジケーターなどの視覚的なフィードバックをユーザーに提供することの重要性は、十分に調査され、文書化されています。私たちの場合、HTMLページは進行状況インジケーターです！ブラウザがページをプログレッシブにロードすると、ヘッダー、ナビゲーションバー、上部のロゴなどがすべて、ページを待っているユーザーへの視覚的なフィードバックとして機能します。これにより、全体的なユーザーエクスペリエンスが向上します。

ドキュメントの下部にスタイルシートを配置することの問題は、Internet Explorerを含む多くのブラウザーでプログレッシブレンダリングが禁止されることです。これらのブラウザはレンダリングをブロックして、スタイルが変更された場合にページの要素を再描画する必要を回避します。ユーザーは、空白の白いページの表示で立ち往生しています。

HTML仕様では、スタイルシートをページのHEADに含めることを明確に規定しています。「Aとは異なり、[LINK]はHEADセクション空白の白い画面またはスタイルが設定されていないコンテンツのフラッシュは、リスクに見合うだけの価値はありません。最適な解決策は、HTML仕様に従ってスタイルシートをドキュメントに読み込むことです。頭。

下部にスクリプトを置く

スクリプトによって引き起こされる問題は、並行ダウンロードをブロックすることです。 HTTP/1.1仕様では、ブラウザはホスト名ごとに2つ以下のコンポーネントを並行してダウンロードすることを提案しています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して実行できます。ただし、スクリプトのダウンロード中は、異なるホスト名であっても、ブラウザーは他のダウンロードを開始しません。

状況によっては、スクリプトを下に移動するのは簡単ではありません。たとえば、スクリプトがdocument.writeを使用してページのコンテンツの一部を挿入する場合、ページの下に移動することはできません。スコーピングの問題もあるかもしれません。多くの場合、これらの状況を回避する方法があります。

しばしば出てくる別の提案は、遅延スクリプトを使用することです。 DEFER属性は、スクリプトにdocument.writeが含まれていないことを示しており、ブラウザーがレンダリングを続行できることを示しています。残念ながら、FirefoxはDEFER属性をサポートしていません。 Internet Explorerでは、スクリプトは延期される場合がありますが、必要なほどではありません。スクリプトを延期できる場合は、ページの下部に移動することもできます。これにより、Webページの読み込みが速くなります。

19
Joe
  1. スタイルシートのリンクとjavascript <script> の中に <head>、それはフォーマットによって決定されます。ただし、javascript <script>sが本文の下部にあるため、<script>、ただし、スクリプトの実行は他のリソースがロードされるまで遅延されるため、これはトレードオフです。
  2. CSSは、リンクされた順序（逆順）で優先されます。最初は2番目にオーバーライドされ、3番目にオーバーライドされます。
8
shelhamer

<head>にCSSを配置する必要があります。これは、仕様で指定されていることだからです。

複数のCSSファイルがある場合は、コードに配置した順序で読み込まれます。 2番目のCSSファイルにスタイルがある場合は、最初のCSSファイルのスタイルを上書きします。それは設計上起こります。したがって、カスケードスタイルシート。

ほとんどのブラウザは、CSSファイルを効果的にレンダリングしますが、コードは意味的に正しくありません。

ドキュメントの任意の場所でJavaScriptファイルリンクを使用できます。 <head>で使用する理由と、ページの他の場所で使用する理由はさまざまです。 （たとえば、Google分析コードは下部に配置するように指示されています。）

5
Michael Irigoyen

私の意見では最善の方法は1）ヘッドタグの間にヘッダー部分にCSSファイルを配置する理由は、CSSが必要なビューを表示する最初のページです2）すべてのjsファイルはボディ終了タグの前に配置する必要があります。理由は、すべてのコンポーネント表示jsが適用可能になった後です

4
Saloni shah

<head>に配置する必要があります。通常、スタイル参照をJSの上に置き、一部が他に依存している場合はJSを上から下に並べますが、ページがレンダリングされる前にすべての参照がロードされると信じています。

2
Glenn Ferrie

CSSインクルードは、headスクリプトインクルードの前にjsに入れる必要があります。 Javascriptはどこにでも行くことができますが、実際にはファイルの機能が場所を決定できます。ページコンテンツを構築する場合は、頭に置きます。イベントまたは追跡に使用する場合は、</body>の前に配置できます

2
zeal

<link />および<style />に関しては、選択肢はありません。それらはmust<head />セクションにあります（ を参照） one および two ）。

<script /> itについてcanは<head />と<body />の両方に表示されます（ three を参照）、通常は<head />に入れるのがベストプラクティスです。これらは実際には「コンテンツ」ではないため（「コンテンツ」はユーザーが画面上で見るものです）、「コンテンツ」に「作用する」ものです。

W3Cの HTML4仕様 FTW！

1
Albireo

Cssでの私の研究によると、常に.like：

 <head>
  <link href="css/grid.css" rel="stylesheet" />
 </head>

そして、スクリプトのためにその依存：-

  1. スクリプトドキュメント内の場合。プレゼントを書くと、それはヘッドタグになります。
  2. スクリプトにDEFER属性が含まれている場合、延期されたすべてが並行してダウンロードされるため
0
Neha Sinha

呼び出す複数の.cssまたは.jsファイルがある場合は、それらを次々にインクルードするか、または：

<head>

<link href="css/grid.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>

</head>
0
Adam