私は、新しいWebプロジェクトに着手しようと私は次のスキームを使用して、頭の中で、エンド体の前に私のJS-スクリプトを置くことを計画：のUXために不可欠である<head>のJavaScriptまたは</body>の直前のJavaScript？
スクリプトページが頭の中に入ります。私が拾ったのは、ページが読み込まれる前に頭の中のスクリプトが読み込まれているため、そこにユーザエクスペリエンスに不可欠なスクリプトを置くことは意味があります。
ページのデザインやUX（Googleアナリティクススクリプトなど）に不可欠ではないスクリプトは、</body>より前になります。
これは合理的なアプローチですか？
もう一つのアプローチは、すべてのスクリプトを<head>に入れて、必須ではないスクリプトにdefer属性を追加することです。しかしFFの古いバージョンでは、defer属性が選択されていないことがわかりました。
多くの開発者は、すべての要素がレンダリングされた後に実行されるように、</body>の直前にjavascriptを実行すると思います。
ただし、コードを正しく整理すると、ページ上の位置は問題になりません。
のjQueryを使用している場合たとえば、あなたは、コードがページまで走っておらず、その要素が完全に次のようにしてレンダリングされていることを確認することができます
$(document).ready(function(){
//Code here
});
次にスクリプト参照をに入れることができるがheadタグ。
更新 - スクリプトタグは、</body>の直前で参照する必要があります。これにより、スクリプトが読み込まれている間にレンダリングのブロックが防止され、サイトの認識速度がはるかに向上します。
この手法を使用する際には目障りなjavascriptを使用しないでください。
スクリプトを一番下に移動すると、コンテンツがより高速に読み込まれることを忘れないでください。ページのデフォルトのコンテンツを読み込むためにajaxが使用されていないと仮定します。 – daveyfaherty
位置はDOMReadyを使用している場合でも非常に重要です。多くの開発者は、すべてのスクリプトが**同期的に**読み込まれて実行されるため、 '
（Piling on ...）ページの最下部にSCRIPTを置く主な理由は、DOMがロードされていることを確認することではなく（重要な理由ですが）、ページをRESPONSIVEと表示することです。ページの上部にスクリプトを読み込むと、ブラウザが最初にダウンロードし、ダウンロードされるまでコンテンツが待機します。これにより、ページAPPEARの読み込み速度が遅くなり、ユーザーが不快になることがあります。 – kingdango
私はそれが完全に賢明だと思います。あなたが言ったように、重要なスクリプト（例えば、jQuery、Modernizrなど）を<head>から移動しない限り、問題はないはずです。
重要でないスクリプトをページの下部に移動すると、認識される読み込み速度（それを最小化/連結するスクリプト）に役立ちます。
Javascriptを別のファイルに入れて、HTMLの頭の部分にそのリンクを配置します。
「essential for UX」の意味に依存します。私は、例えば、モダニズムを早めに出すことに同意しますが、すべてをすぐにロードする必要はありません。あなたが無秩序なテキスト（FOUT）のフラッシュを避けようとしているなら、それは良い理由です。同様に、ユーザーが何もしないうちにページがどのように見えるかに影響を与えるスクリプトがある場合は、それらを早めに読み込む必要があります。
速度はUXの一部です。ユーザーがまだ適用されているコンテンツを見ることができないときに実行する準備ができているjqueryインタラクションを持つことに利点はありません。最後までのスクリプトの読み込みの違いは数秒です。ページを最初に読み込ませる場合、ユーザーはその秒を使ってページを取得し、スクリプトを目立たずに読み込むことができます。
スクリプトをページの最下部に移動するとページが高速に読み込まれ、最近のページャーアークとの違いになります。
また、スクリプトが参照する要素が読み込まれる前にスクリプトを実行しようとすると、IEの一部のバージョンでエラーが発生します。
Edと同様に、スクリプトは別のファイルに保存し、できるだけファイルに保存する必要があります。
Javascriptは、ページ要素の並列読み込みを遅延させないように、ドキュメントの末尾に配置する必要があります。これは、jsが特定の方法で書かれていることを要求しますが、ページの読み込み速度を向上させます。
また、理想的には、このような参照を別の（サブ）ドメインでホストすることができます。 jqueryへの参照は、GoogleのCDNにも指摘されるべきです。
詳細については、http://developer.yahoo.com/performance/rules.htmlを参照してください。
</body>の前にスクリプトを挿入する理由の1つは、ユーザーが操作しなくてもDOMを操作する場合です。そのため、操作するためにDOMをロードする必要があります。これを行う別の方法は、ページがロードされたときにイベントリスナーを追加してスクリプトを実行することですが、追加のコードが必要になります。スクリプトがたくさんあると複雑になる可能性があります。ページの終わりにそれらを置くと、ページの読み込みが高速になりますが、DOMを操作するスクリプトではそれほど美味しくない結果が得られるかもしれません。
答えに「
私はこれも知りたいです。 –
私はそれが完全に容認できるアプローチだと思います。私はどこかで、 'defer'が多くのブラウザで動作しないと読んでいますが、私は間違いなく間違っている可能性があります。 – Bojangles
私はそれがすべての味についてだと思います。 私は個人的にbodyタグの前に（頭の中に）追加し、必要に応じてページ内に小さなスニペットを追加します。 – ikromm