4

重複の可能性:
JSファイルをWebページの下部に配置することは実際に良いですか?

<script src="xxx">開発者がドキュメントの下部にタグを配置するHTMLドキュメントを見たことがあり、その理由を疑問に思っています。

スクリプトタグに関するHTML4仕様を読みました。スクリプトをいつどのようにロードするかについては何も述べていません。したがって、適切と思われる場合にそれを処理するのはWebブラウザ次第です。

ブラウザの作成者は、スクリプトを同期的にロードするか、ドキュメントのレンダリングを妨げる他の方法でブラウジングエクスペリエンスに影響を与えることを認識しておく必要があると考えるのは合理的ではありませんか?

<head>つまり、私たちはWeb開発者として、スクリプトをタグに入れるほうがよいのではないでしょうか。

4

4 に答える 4

3

ドキュメントの上部にスクリプトタグを配置すると、ページの残りの部分の読み込みがブロックされる可能性があります。これは特にバナー広告スクリプトに当てはまります。サードパーティのスクリプトの読み込みに時間がかかる場合、その後のDOM要素は遅延し、リクエストがタイムアウトするか、コンテンツが最終的に読み込まれるまで、空白または不正な形式のページが表示されます。

于 2012-10-08T11:58:30.020 に答える
3

スクリプトには解釈が必要であり(比較的コストがかかる可能性があります)、オプションで別のHTTPリクエストを介した取得が必要になる場合があります。それらをドキュメントの最後に配置すると、ページの残りの部分を最初にロードできます。

非同期または延期属性のないスクリプトは、ブラウザがページの解析を続行する前に、すぐにフェッチされて実行されます。

https://developer.mozilla.org/en-US/docs/HTML/Element/script

http://dev.w3.org/html5/spec/the-script-element.htmlも参照してください。具体的には、準備/ブロックの周辺で詳細に説明されています。これは流動的な編集者のドラフトであることに注意してください。これらのルールの一部は、最終仕様に含まれていないか、すべてのユーザーエージェントによって適用されていない可能性があります。

ちなみに、このブロッキング動作は悪い/間違ったものではありません。に属するModernizrようなライブラリを考えてみてくださいhead。CSSを正しく適用できるようにDOMを変更します。並行して実行した場合、結果は正しくありません。

于 2012-10-08T12:01:43.180 に答える
0

このようにして、JavaScriptコードが開始される前に、ドキュメントが完全に表示されます。スクリプトに時間がかかるか、機能しないか、到達できない場合でも、ユーザーが空白のページの前に座ったままになることはありません。

また、body要素が完全にロードされる前にDOM操作を実行すると、エラーIEが生成される可能性があります。

于 2012-10-08T11:59:55.447 に答える
0
  1. JSスクリプトは、ページの読み込み時に発生した時点で実行されます。ページの上部にある場合、実行時にページの残りの部分は読み込まれません。つまり、ページ内のどの要素にもアクセスできなくなります。

  2. スクリプトの実行に時間がかかる場合(たとえば、スクリプトのループが遅い、alert()ボックスをスローする、または実行をブロックするその他の処理を行う)、残りのページの読み込みは終了するまで遅延します。スクリプトがにある場合、スクリプトが実行し<head>ている間、ユーザーに空白のページが表示される可能性があります。

于 2012-10-08T12:03:41.087 に答える