回答:
それ自体、ごくわずかですが、どちらの方法でも、DOMを操作できるようになります(これをGoogleから読むまで、私は不安になりました)。ページの終わりのトリックを使用する場合、コードは少しだけ、少しだけ早く呼び出される可能性がありますが、重要ではありません。しかし、より重要なこととして、この選択はJavaScriptをページにリンクする場所に関係しています。
script
タグをに含めてにhead
依存しているready
場合、ブラウザscript
はユーザーに何かを表示する前にタグを検出します。イベントの通常の過程で、ブラウザーは急停止し、スクリプトをダウンロードしてJavaScriptインタープリターを起動し、スクリプトをそれに渡し、インタープリターがスクリプトを処理する間待機します(その後、jQueryはさまざまな方法で監視します) DOMを準備するため)。(一部のブラウザはタグのasync
またはdefer
属性をサポートしているため、「通常のこと」と言いscript
ます。)
要素script
の最後にタグを含めた場合body
、ページの大部分がユーザーに表示されるまで、ブラウザーはそのすべてを行いません。これにより、ページの知覚される読み込み時間が改善されます。
そのため、ロード時間を最適に認識するには、スクリプトをページの下部に配置します。(これはYahooの人々からのガイドラインでもあります。)そして、それを行う場合は、を使用する必要はありませんが、必要でready
あれば使用することもできます。
ただし、それには代償があります。ユーザーが見ることができるものを操作する準備ができていることを確認する必要があります。ダウンロード時間がページが大きく表示された後に移動することにより、スクリプトが読み込まれる前にユーザーがページを操作し始める可能性が高くなります。これは、script
タグを最後に置くことに対する反論の1つです。多くの場合それは問題ではありませんが、ページを見て、それが問題であるかどうか、そうである場合はどのように対処するかを確認する必要があります。(これに対処するためにドキュメント全体のイベントハンドラーを設定する小さなインライン script
要素をに配置できhead
ます。これにより、ロード時間が改善されますが、 彼らは早すぎることをやろうとするなら、あなたは彼らにそれを伝えるか、彼らがやりたいことをキューに入れて、完全なスクリプトの準備ができたらそれを行うことができます。
最初に$(document).ready()
jQueryを同期的にロードする必要があるため、ページのロードが遅くなります(最後にすべてではなく)DOM全体にスクリプトが分散されます。
$ = jQuery
。したがって$
、最初にjQueryをロードしないと、スクリプトで使用できません。このアプローチでは、ページの先頭近くでjQueryをロードする必要があり、jQueryが完全にダウンロードされるまでページのロードが停止します。
async
多くの場合、$(document).ready()
jQueryが完全に非同期で読み込まれる前にスクリプトが実行され、エラーが発生するため、jQueryを読み込むこともできませ$
ん。これも、まだ定義されていないためです。
そうは言っても、システムをだます方法があります。基本的$
に、関数を$(document).ready()
キュー/配列にプッシュする関数と同等に設定します。次に、ページの下部でjQueryをロードし、キューを反復処理して、$(document).ready()
一度に1つずつ実行します。これにより、jQueryをページの下部に据え置くことができますが、それでも$
DOMでjQueryの上で使用できます。私はこれがどれほどうまく機能するかを個人的にテストしていませんが、理論は確かです。このアイデアはしばらく前から存在していますが、実装されていることはほとんどありません。しかし、それは素晴らしいアイデアのようです:
http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax