JavaScriptをページの末尾に置くとエラーが発生する

Question

最近、より高速なWebページを読み込むために、JavaScriptリンクを最後に置くことをお勧めします。私はしましたが、参照されたファイルの機能は機能しません。私がページの冒頭にリンクを置くと、すべてが問題ありません。

JavaScriptを最後に置くのは、特定の状況下でのみ機能しますか？

Answer 1

私はこれを使っていくつかのテストを行った。 Javascriptファイルをロードしている場合は、最後に入力する方が速いですが、重要な注意点があります。

最初に、これを行うと、視覚効果が目立つようになることがよくあります。たとえば、jQueryを使用して表をフォーマットしていた場合、表はフォーマットされていない状態になり、コードが実行されて再フォーマットされます。私はこれが良いユーザーエクスペリエンスであるとは思っておらず、むしろページが完成したと思います。

第2に、最後に置くと、機能がまだ存在しないことが多いため、ページにコードを挿入することが難しくなりました。あなたのページにこれがある場合：

$(function() { 
    // ... 
}); 

jQueryオブジェクトが定義されるまでうまくいきません。ページの末尾に定義されている場合、上記のエラーが発生します。

これで、すべてのスタイリングコードを外部ファイルに入れることができますが、それはパフォーマンス上の理由から間違いでしょう。私はプロジェクトでそれをやり始めた後、ページが集中していたすべてのJavascriptを実行するのに1秒かかったことを発見しました。そこで、関連する動作のための関数を作成し、各ページで適切なものを呼び出して、Javascriptの実行時間を50〜200msに短縮しました。

最後に、Javascriptファイルのバージョニングを行い、far-futures Expiresヘッダーを使用することでJavascriptの読み込み時間を最小限に抑えることができます（変更するたびに読み込まれる）それらがファイル内にある場所はほとんど無関係です。

私は、ファイルの最後にJavascriptファイルを置くことが面倒で究極的に不要であることを知っていました。

Answer 2

注文には注意する必要がありますが、JQueryのようなライブラリでは簡単に行うことができます。ページの終わりに、必要なすべての.JSファイルを入れてから、別のファイルまたはページ自体にJquery呼び出しを入れてページの内容に作用させます。

JQはCSSスタイルのセレクタを扱うので、ページの本体にJavascriptを避けることは非常に簡単です。代わりに、IDとクラスにそれらを付加します。 これは

Answer 3

私が最後にほとんどすべてのJavaScriptを持って覚えているすべてのYahooのYUIの例ファイルUnobtrusive Javascriptと呼ばれています。例えばそれは、ヤフーの練習のように見える、

• Simple Event Handling
• Basic Drag and Drop
• JSON: Adding New Object Members During Parsing

は<体の終わりに<体>、アクティブコードの先頭におおよそ」ライブラリのコードがあります>。

注意してくださいが、これは、Flash of Unstyled Contentシンドロームの可能性があります。