長所と短所：JavaScriptを頭に入れ、体を閉じる直前に置く

Question 1

javascriptとWeb開発の本/記事のほとんどは、CSSをheadタグに、javascriptをページの下部に配置する必要があると述べています。

しかし、この1つのstackoverflowなどの有名なWebサイトのhtmlソースを開くと、headタグにいくつかのjsファイルが含まれていることがわかります。

両方のアプローチの長所と短所は何ですか？いつどちらを使用するのですか？

同じ問題について別の質問が見つかりました： ページで使用されているJavaScriptファイルをどこで宣言する必要がありますか？<head> </ head>または</ body>の近くですか？

Question 2

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

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

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

したがって、一般的には、それらを一番下に配置することが好ましい。ただし、常に可能であるとは限りません。また、とにかくそれほど大きな違いはないことがよくあります。

Question 3

他の人が言っているように、JavaScriptを頭に入れると、スクリプトが読み込まれるまでページのレンダリングが遅れます。つまり、特に大きなスクリプトファイルをダウンロードしている場合は、ページの読み込みに時間がかかることがあります。

スクリプトタグをページの最後に移動すると、スクリプトタグの前にブラウザが画像とスタイルシートをダウンロードし、スクリプトの実行が開始される前にページがレンダリングされるように見えるようになります。これは、スクリプトの一部の機能に依存している場合、ページがユーザーに表示されてから少し経つまで利用できないことも意味します。

スタイルや要素を追加する場合（たとえば、何らかの形式のよりリッチなエディターでテキストフィールドを切り替える場合）、これはちらつきとしてユーザーに表示されます。

要素にクリックイベントを追加する場合、要素自体が表示されてから少し経つまでクリックできません。

これらの問題では、スクリプトを頭に置く必要がある場合もあれば、スクリプトを下に貼り付けることで問題がない場合もあります。

IMHO（YSlowや多くの賢い人々に対して完全に反対）では、スクリプトをheadタグに保持し、ほとんどの場合、スクリプトがキャッシュされることに依存する必要があります。

Question 4

一般に、スクリプト参照はページの下部に配置する必要があります。スクリプトはダウンロードする必要があるだけでなく、ブロックが解放されてページがレンダリングプロセスに進む前に、評価および実行する必要があります。Modernizrのようなものは、いくつかの機能検出と、おそらく必要になるHTML5シムを実行するため、一番上に配置する必要があります。

ページの下部にスクリプトを配置しようとするもう1つの理由は、単一障害点またはSPOFです。これは、スクリプト呼び出しがタイムアウトするか、その他の理由でページの実行をブロックする場所です。これは、サードパーティの広告ライブラリなどで多く発生する可能性があります。

はい、アプリケーションをどのように設計するかについてもう少し考えなければならないかもしれませんが、私にとっては非常にすぐに自然になることがわかりました。私は過去4年間で、スクリプトを下部に配置して何百ものWebアプリを構築してきましたが、違いがわかります。私は500msかもしれませんそれは5000msかもしれませんがそれはすべて重要です。

Question 5

それは本当にあなたのウェブサイトに依存します。本文内でJavaScript関数にアクセスして呼び出す場合は、ヘッダーで参照してロードする必要があります。それ以外の場合、ドキュメント全体がロードされたときにのみJavaScriptを呼び出す場合は、JavaScriptを本文の最後に配置することをお勧めします。最後に.JSファイルを配置すると、ページ全体が読み込まれ、.JSファイルがフェッチされます。このようにして、ユーザーはページをすばやく表示でき、ページに慣れるまでに.JSファイルが既にダウンロードされています。

Question 6

ヘッド内のJavaScriptは、ページが読み込まれる前に評価されます。つまり、ページの読み込みに時間がかかるように感じます。すべてのJavaScriptが最後にある場合、イベントを正しく機能させるのは少し難しいですが、jQueryはこの問題をほぼ解決します。