JS スクリプトが通常ドキュメントのヘッダーに配置されるのはなぜですか? それは標準で義務付けられているのでしょうか、それとも特別な理由のない慣習的なものですか?
3 に答える
10
http://developer.yahoo.com/performance/rules.html#js_bottomを参照してください
これまでの慣例では、スクリプトやスタイル（など）を一元化するためにヘッダーに配置することがよくありましたが、ページの残りの部分の読み込み速度を向上させるために、スクリプトを下部に配置することをお勧めします。
引用するには：
スクリプトによって引き起こされる問題は、スクリプトが並列ダウンロードをブロックすることです。HTTP / 1.1仕様では、ブラウザがホスト名ごとに並行してダウンロードするコンポーネントは2つ以下であることが推奨されています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して実行できます。ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザは他のダウンロードを開始しません。
状況によっては、スクリプトを一番下に移動するのは簡単ではありません。たとえば、スクリプトがdocument.writeを使用してページのコンテンツの一部を挿入する場合、ページの下部に移動することはできません。スコーピングの問題もあるかもしれません。多くの場合、これらの状況を回避する方法があります。
よく出てくる別の提案は、遅延スクリプトを使用することです。DEFER属性は、スクリプトにdocument.writeが含まれていないことを示し、ブラウザーがレンダリングを続行できるようにするための手がかりになります。残念ながら、FirefoxはDEFER属性をサポートしていません。Internet Explorerでは、スクリプトは延期される場合がありますが、希望するほどではありません。スクリプトを延期できる場合は、ページの下部に移動することもできます。これにより、Webページの読み込みが速くなります。
于 2009-10-18T23:53:19.967 に答える
3
A
<script src="url"></script>は、スクリプトがフェッチ、コンパイル、および実行されるまで、他のページコンポーネントのダウンロードをブロックします。画像やその他のコンポーネントの読み込みが遅れないように、できるだけ遅くスクリプトを呼び出すことをお勧めします。
スクリプトが何をしているかによります。コードがonLoadイベントでラップされている場合は、ほとんどすぐに返され、ブロックされないため、問題ではありません。そうでない場合は、配置が重要であるため、適切な場所にコードを配置する必要があります。
最後に置くことに関しては、それはユーザーがページを見始めるのに少し余分な時間を与えます。自分自身に質問してください-私のサイトはjavascriptなしで動作しますか？そうでない場合、私の意見では、onLoadコードはDOMが完全にロードされたときにのみ実行されるため（画像などのバイナリコンテンツを含む）、どこに配置しても問題ありません。javascriptなしで使用できる場合は、画像をより速くロードできるように、最後に配置してください。
また、ほとんどのJSライブラリは、onLoadの問題を回避する特別なコードを使用し、DOMが読み込まれると発生し、バイナリデータを待機しないカスタムイベントを使用することにも注意してください。
それをすべて書いたので、私は自分自身の質問を受けました。たとえばjQueryを使用していますか
$(document).ready(function () {});
スクリプトタグをページの最後に配置することは、onLoadイベントを使用して最初に配置することと同じですか？リストの最後のスクリプトをロードする前にブラウザがすべての画像をロードするため、これは同じである必要があります。答えがわかっている場合はコメントを残してください（私は怠惰すぎて、ATMをテストするには遅すぎます）。
于 2009-10-18T23:53:25.310 に答える
1
それはただのコンベンションです。スクリプトを読み込む前にページを表示できるように、通常はスクリプトを本文の最後に配置することをお勧めします。これは常にプラスです。また、document.bodyドキュメントが読み込まれるまで、または本文にスクリプトを配置するまで使用できません。
于 2009-10-18T23:46:45.913 に答える