684

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

私のサイトの1つには、現在</body>タグのすぐ上にある2つの外部JavaScriptファイルがあります。1つ目はgoogleから供給されたで、2つ目はローカル外部スクリプトです。

サイトの読み込み速度に関して

  1. asyncページの下部にある2つのスクリプトに追加することに利点はありますか？

  2. async2つのスクリプトにオプションを追加し、それらをページの上部の？に配置することに利点はあり<head>ますか？

  3. これは、ページが読み込まれるときにダウンロードすることを意味しますか？

  4. これによりHTML4ブラウザーの遅延が発生すると思いますが、HTML5ブラウザーのページの読み込みが速くなりますか？

使用する<script defer src=...

  1. <head>属性を使用して2つのスクリプトを内部にロードする とdefer、以前のスクリプトと同じ影響があり</body>ますか？
  2. 繰り返しになりますが、これによりHTML4ブラウザの速度が低下すると思います。

使用する<script async src=...

async有効になっているスクリプトが2つある場合

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

最後に、HTML5がより一般的に使用されるまで、そのままにしておくのが最善ですか？

4

13 に答える 13

1119

このイメージは、通常のスクリプト タグ、async および defer を説明しています

ここに画像の説明を入力

  • 非同期スクリプトは、スクリプトが読み込まれるとすぐに実行されるため、実行順序は保証されません (最後に含めたスクリプトは、最初のスクリプト ファイルの前に実行される場合があります)。

  • Defer スクリプトは、ページに表示される実行順序を保証します。

このリンクを参照してください: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

于 2016-09-26T19:37:39.113 に答える
458

スクリプトは の直前に置いてください</body>。Async は、いくつかの状況でそこにあるスクリプトで使用できます (以下の説明を参照)。DOM の解析作業はすでにほとんど行われているため、Defer はそこにあるスクリプトに大きな違いをもたらすことはありません。

async と defer の違いを説明する記事は次のとおりです: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/。

本文の最後で</body>. したがって、古いブラウザーで読み込み速度を維持するには、それらを他の場所に置きたくありません。

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

スクリプトを<head>タグに入れて設定するdeferと、DOM が解析されるまでスクリプトの読み込みが延期され、延期をサポートする新しいブラウザーで高速にページが表示されますが、まったく役に立ちません。古いブラウザーでは</body>、すべてのブラウザーで機能するスクリプトを直前に配置するよりも実際には高速ではありません。したがって、それらを直前に配置するのが最善である理由がわかります</body>。

非同期は、スクリプトがいつ読み込まれるかを本当に気にせず、そのスクリプトの読み込みに依存するユーザーに依存するものがない場合に便利です。非同期を使用する最もよく引用される例は、Google アナリティクスのような分析スクリプトです。何も待つ必要がなく、すぐに実行する必要がなく、スタンドアロンであるため、他に依存するものは何もありません。

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

于 2012-05-29T23:45:32.923 に答える
245

HTML5: async、defer

HTML5 では、JavaScript コードをいつ実行するかをブラウザに伝えることができます。3 つの可能性があります。

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

  1. または がないasync場合defer、ブラウザは script タグの下にある要素をレンダリングする前に、すぐにスクリプトを実行します。

  2. (非同期) を使用asyncすると、ブラウザーは引き続き HTML ページを読み込んでレンダリングし、同時にブラウザーはスクリプトを読み込んで実行します。

  3. を使用deferすると、ページの解析が終了したときにブラウザがスクリプトを実行します。（すべての画像ファイルをダウンロードし終える必要はありません。これは良いことです。）

于 2013-10-24T03:47:55.660 に答える
43

両方asyncのdeferスクリプトは、パーサーを一時停止せずにすぐにダウンロードを開始し、オプションのonloadハンドラーをサポートして、スクリプトに依存する初期化を実行する一般的なニーズに対処します。

との違いは、スクリプトの実行時asyncにdefer集中します。各asyncスクリプトは、ダウンロードが完了した後、ウィンドウのロード イベントの前に、最初の機会に実行されます。asyncこれは、スクリプトがページ内で発生する順序で実行されない可能性があることを意味します。一方、deferスクリプトは、ページ内で発生した順序で実行されることが保証されています。その実行は、解析が完全に終了した後、ドキュメントのDOMContentLoadedイベントの前に開始されます。

ソースと詳細:こちら.

于 2014-06-12T11:30:43.807 に答える
40

同じ種類の問題に直面し、両方がどのように機能するかを明確に理解しました。この参照リンクが役立つことを願っています...

非同期

script タグに async 属性を追加すると、次のようになります。

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
  1. ファイルをフェッチするための並列リクエストを作成します。
  2. 中断されなかったかのように、ドキュメントの解析を続行します。
  3. ファイルがダウンロードされた瞬間に個々のスクリプトを実行します。

延期する

Defer は async と非常に似ていますが、1 つの大きな違いがあります。ブラウザーが defer 属性を持つスクリプトに遭遇した場合に何が起こるかを次に示します。

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. 個々のファイルを取得するために並列要求を行います。
  2. 中断されなかったかのように、ドキュメントの解析を続行します。
  3. スクリプト ファイルがダウンロードされた場合でも、ドキュメントの解析を終了します。
  4. ドキュメント内で見つかった順序で各スクリプトを実行します。

参考：AsyncとDeferの違い

于 2016-10-12T07:16:14.280 に答える