$(document).ready(function(){}); ページ下部のvsスクリプト


回答:


142

それ自体、ごくわずかですが、どちらの方法でも、DOMを操作できるようになります(これをGoogleから読むまで、私は不安になりました)。ページの終わりのトリックを使用する場合、コードは少しだけ、少しだけ早く呼び出される可能性がありますが、重要ではありません。しかし、より重要なこととして、この選択はJavaScriptをページにリンクする場所に関係しています。

scriptタグをに含めてにhead依存しているready場合、ブラウザscriptはユーザーに何かを表示する前にタグを検出します。イベントの通常の過程で、ブラウザーは急停止し、スクリプトをダウンロードしてJavaScriptインタープリターを起動し、スクリプトをそれに渡し、インタープリターがスクリプトを処理する間待機します(その後、jQueryはさまざまな方法で監視します) DOMを準備するため)。(一部のブラウザはタグのasyncまたはdefer属性をサポートしているため、「通常のこと」と言いscriptます。)

要素scriptの最後にタグを含めた場合body、ページの大部分がユーザーに表示されるまで、ブラウザーはそのすべてを行いません。これにより、ページの知覚される読み込み時間が改善されます。

そのため、ロード時間を最適に認識するには、スクリプトをページの下部に配置します。(これはYahooの人々からのガイドラインでもあります。)そして、それを行う場合は、を使用する必要はありませんが、必要でreadyあれば使用することもできます。

ただし、それには代償があります。ユーザーが見ることができるものを操作する準備ができていることを確認する必要があります。ダウンロード時間がページが大きく表示された後に移動することにより、スクリプトが読み込まれる前にユーザーがページを操作し始める可能性が高くなります。これは、scriptタグを最後に置くことに対する反論の1つです。多くの場合それは問題ではありませんが、ページを見て、それが問題であるかどうか、そうである場合はどのように対処するかを確認する必要があります。(これに対処するためにドキュメント全体のイベントハンドラーを設定する小さなインライン script要素をに配置できheadます。これにより、ロード時間が改善されますが 彼らは早すぎることをやろうとするなら、あなたは彼らにそれを伝えるか、彼らがやりたいことをキューに入れて、完全なスクリプトの準備ができたらそれを行うことができます。


17
+1。jsが読み込まれる前に対話を処理する別の方法は、JavaScriptを使用せずにページを機能させることです。すべてのリンクが機能することを確認してください。もちろん、それらはページのリロードをトリガーします。次に、リンクやその他のものをjsでハイジャックし、ajaxまたはその他のベルとホイッスルを追加します:)
Adrian Schmidt

1
アクションのキューイングをどのように処理しますか?これに関して検討できるデザインパターンまたは「一般的な解決策」はありますか?
HC_ 16

@HC_:「アクションをキューに入れる」とはどういう意味ですか?
TJクラウダー2016

@TJCrowder回答の最後の文から:「または、もっといいのは、彼らがやりたいことをキューに入れて、完全なスクリプトの準備ができたらそれを実行することです。」これを行う「最適な」方法があるかどうか疑問に思っていました。これを行うには「いくつかの」方法を理解できると確信しているのですが、そうなると確信しています...関係するすべてのコードを見た。
HC_ 16

2
@HC_:私はそれを行う必要性を感じたことは一度もありませんし、そのための特定の基準も知りません。そして、5年後、「申し訳ありませんが、読み込み中、1秒」をそのまま使用した方がいいようです。(ただし、読み込み遅い場合は、より大きな問題が発生します。)クリック可能なものを見つけてクリックしても何も起こらない場合、天国は次に何をクリックするかしかわかりません。それらをキューに入れ、準備ができたときに再生すると、理想的とは言えません。
TJクラウダー

3

最初に$(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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.