web-dev-qa-db-ja.com

GoogleマップのJavaScriptで遅延を使用する理由

Googleマップのjavascriptは、DOMの大量の操作を行います。それでも、 すばらしいドキュメント は、deferフラグを使用してロードすることをお勧めします。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

DOM操作を実行するスクリプトにdeferフラグが推奨されるのはなぜですか？ deferフラグとGoogle Maps APIの両方について知りたいと思っています。彼らのしている。

javascriptgoogle-mapsdeferred
13
dotancohen

通常、scriptタグは、HTMLの解析を停止し、スクリプトをフェッチして実行し、その後HTMLの解析を続行するようにブラウザに指示します。これは、スクリプトコードがdocument.writeを使用してHTMLトークンストリームに出力するためです。

asyncとdefer はどちらも、ブラウザにスクリプトファイルのダウンロードと並行してHTMLの解析を続行してもよいことを通知するメカニズムです、そしてすぐにではなく、後でスクリプトファイルを実行します。

ただし、少し異なります。 HTML仕様のWHAT-WGバージョンの _scriptセクション のこの図は、違いを想定するのに役立ちます。

enter image description here

上記のリンクされた仕様の詳細ですが、簡単に言えば、「クラシック」スクリプト（慣れ親しんだ種類ですが、モジュールスクリプトは近日提供予定です！）：

  • asyncとdeferはどちらも、スクリプトのダウンロードを待たずにHTMLの解析を続行できます。
  • deferは、解析が完了するまで、ブラウザにスクリプトの実行を待機させます。
  • asyncは、スクリプトのダウンロードが完了するまでブラウザを待機させます。つまり、ダウンロードが完了するタイミングに応じて、解析が完了する前または後でスクリプトを実行する可能性があります（キャッシュから取得される可能性があることを忘れないでください）。
  • asyncが存在し、ブラウザによってサポートされている場合、deferよりも優先されます。
  • asyncスクリプトは、HTMLでの表示順序に関係なく、任意の順序で実行できます。
  • deferスクリプトは、解析が完了すると、HTMLに表示される順序で実行されます。
  • asyncおよびdeferは、セミモダンブラウザーでも十分にサポートされていますが、IE9以前では適切にサポートされていません。 こちら と こちら 。

DOM操作を実行するスクリプトにdeferフラグが推奨されるのはなぜですか？

2つの理由：

  1. スクリプトがダウンロードされている間、解析を続行できます。
  2. つまり、解析が完了するまでスクリプトは実行されません。

deferを使用せずにscriptタグを最適に配置しなかった場合、deferを使用すると、ブラウザがDOMの構築前にDOMの構築を完了するため、APIスクリプトが適切に動作しますスクリプトはそれを操作しようとします。

多くの人はscriptタグをドキュメントのheadセクションに挿入します。ただし、通常はそれらを配置する最悪の場所ですnless使用するdefer（またはasync）。ほとんどの場合、最適な場所（他に何かする理由がない限り）はendで、終了の</body>タグの直前なので、A）サイトはすばやくレンダリングされます、スクリプトを待たずに; B）DOMは、操作しようとする前に完全に構​​築されています。 deferを推奨することで、scriptタグをHTMLの早い段階で配置する人々のサポートの手間を省くことができます。

25
T.J. Crowder

グーグルマップの例では、asyncフラグとdeferフラグの両方を使用しています。

  • asyncフラグを使用すると、スクリプトはDOM解析と並行してロードし、APIの準備ができ次第実行することができます。
  • deferフラグを使用すると、スクリプトはDOM解析と並行してロードできますが、DOMの解析が完了するまでスクリプトが実行されないことが保証されます。

asyncは最新のHTML5ブラウザーでサポートされていますが、deferのサポートは普遍的です。タグが一緒に使用される場合、deferは古いブラウザの単なるフォールバックであり、asyncがサポートされている場合は無視されます。

これらの単純な例では、asyncまたはdeferのどちらでも機能しますが、どちらも必要ありません。この場合、パフォーマンスのみを目的としています。

参照：
Googleマップ（およびその他すべて）を非同期で延期してスピードアップ
async vs defer attributes-Growing with the Web

2
Yarin