BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] スクリプトタグ - 非同期と遅延

2022-03-15 20:15:25

質問

属性についていくつか質問があります。 async &です。 defer には <script> タグは、私の理解では、HTML5 ブラウザでのみ機能します。

私のサイトの1つには、2つの外部JavaScriptファイルがあり、現在、そのファイルは </body> タグで、1つ目は jquery はgoogleから、2番目はローカルの外部スクリプトからソースされています。

サイトの読み込み速度について

  1. を追加するメリットはありますか？ async を、ページ下部の2つのスクリプトに追加してください。

  2. を追加するメリットはあるのでしょうか？ async オプションを 2 つのスクリプトに追加して、ページの一番上にある <head> ?

  3. ページの読み込みと同時にダウンロードされるということでしょうか？

  4. HTML4ブラウザでは遅延が発生すると思いますが、HTML5ブラウザではページの読み込みが速くなるのでしょうか？

使用方法 <script defer src=...

  1. の中にある2つのスクリプトを読み込むと <head> という属性で defer の前にスクリプトを置いたのと同じ効果が得られます。 </body> ?
  2. もう一度言いますが、これはHTML4ブラウザの速度を低下させると推測されます。

使用方法 <script async src=...

という2つのスクリプトがある場合 async を有効にします。

  1. 同時にダウンロードされるのでしょうか？
  2. それとも、ページの残りの部分と一緒に1つずつ？
  3. その時、スクリプトの順番が問題になるのでしょうか？たとえば、あるスクリプトが他のスクリプトに依存しているため、一方のダウンロードが速くなると、2番目のスクリプトが正しく実行されない可能性があるなどです。

最後に、HTML5がもっと一般的に使われるようになるまで、このままにしておくのがベストでしょうか？

解決方法は？

スクリプトを直前まで </body> . Async はそこにあるスクリプトに対して、いくつかの状況で使用することができます (以下の議論を参照してください)。 DOM のパース処理はほとんど終わっているので、そこにあるスクリプトに遅延はあまり効果がありません。

asyncとdeferの違いを説明した記事はこちらです。 http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ .

古いブラウザでは、スクリプトを本文の最後に置くと、HTMLが早く表示されます。 </body> . ですから、古いブラウザでの読み込み速度を維持するために、他の場所には配置しないようにします。

2 番目のスクリプトが最初のスクリプトに依存している場合 (たとえば、2 番目のスクリプトが最初のスクリプトで読み込まれた jQuery を使用する場合)、実行順序を制御するコードを追加しなければ非同期にすることはできませんが、defer スクリプトはドキュメントがパースされるまで実行されないだけで、順序は変わらないので、defer にすることができます。 そのコードがあり、スクリプトをすぐに実行する必要がない場合は、非同期または遅延にすることができます。

スクリプトを <head> タグに設定し defer を実行すると、DOM が解析されるまでスクリプトの読み込みが延期されます。これは defer をサポートする新しいブラウザではページの表示を高速化しますが、古いブラウザではまったく役に立ちませんし、スクリプトを単に </body> これはすべてのブラウザーで動作します。 というわけで、なぜこのように </body> .

非同期は、スクリプトがいつロードされるかを本当に気にせず、そのスクリプトのロードに依存するユーザが他に何もいない場合に便利です。 非同期を使用する例としてよく挙げられるのは、Google Analyticsのような分析スクリプトで、何も待たせる必要がなく、すぐに実行する緊急性もなく、単独で動作するため他に依存するものがない場合です。

通常、jQueryライブラリは他のスクリプトに依存しているため、非同期には適していません。また、イベントハンドラをインストールして、ページがユーザーイベントに反応するようにしたい場合、ページの初期状態を確立するためにjQueryベースの初期化コードを実行する必要がある場合があります。 これは非同期で使用できますが、他のスクリプトはjQueryがロードされるまで実行されないようにコード化する必要があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します