Googleマップのjavascriptは、DOM操作をいくらか重視しています。そうであっても、the fine docsはdeferフラグを使用して、それをロードすることをお勧め：GoogleマップのJavascriptを使用する理由
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
なぜdeferフラグは、DOM操作を実行するスクリプトのために提案されるのでしょうか？ defer旗について学び、GoogleマップAPIについて知りたいのですが、そのうちの1つについて何か誤解があるようです。
通常、scriptタグは、HTMLの解析、スクリプトのフェッチ、実行、およびHTMLの解析を続行するようブラウザに指示します。これは、スクリプトコードがdocument.writeを使用してHTMLトークンストリームに出力できるためです。
async and deferは、ブラウザに、スクリプトファイルのダウンロードと並行してHTMLの解析を続け、後でスクリプトファイルをすぐに実行するように指示するメカニズムです。
少し違いますが、 HTMLの仕様のWHAT-WGのバージョンのthe script sectionから、この図は、違いを想定するのに便利です：
上記のリンク仕様ではなく、簡潔で、「古典」のスクリプト（一種のための完全な詳細をあなたが使用している、しかし、モジュールのスクリプトがすぐに来ている）：！
asyncとdeferどちらも、HTMLの構文解析をダウンロードするためのスクリプトを待たずに継続することができます。deferは、解析が完了するまでスクリプトの実行を待機します。asyncは、スクリプトのダウンロードが完了するまでブラウザーを待機させるだけです。つまり、ダウンロードが完了した時点（またはキャッシュからのものである可能性があることに注意してください）に応じて、解析が完了するか後で実行されます。asyncが存在し、ブラウザでサポートされている場合は、deferよりも優先されます。asyncスクリプトは、HTMLに表示される順序に関係なく、任意の順序で実行できます。deferスクリプトは、解析が完了すると、HTMLに表示される順序で実行されます。asyncとdeferは半近代のブラウザでも十分にサポートされていますが、IE9以前では適切にサポートされていません。hereとhereを参照してください。なぜ
deferフラグは、DOM操作を実行するスクリプトのために提案されるのでしょうか？
- それはスクリプトがダウンロードされている間、解析を継続することを可能にし、
- これは、解析が完了するまで実行されていないスクリプトを意味します
つの理由。
あなたがdeferを使用していないとあなたはdeferは、APIスクリプトがスクリプトはそれを操作しようとする前に、DOMを構築し、ブラウザの仕上げをさせることにより、適切に振る舞うことができます使用して、非最適にごscriptタグを配置した場合。
多くの人々はまだそれは通常、あなたがdefer（またはasync）を使用ない限り、彼らにを置くために最悪の場所だにも関わらず、文書のheadセクションにscriptタグを置きます。ほとんどの場合、他の何かをする理由がない限り、最良の場所はエンドの</body>タグの直前です。A）あなたのサイトはスクリプトを待たずにすばやくレンダリングされます。 B）DOMは操作する前に完全に構築されています。 deferを推奨すると、scriptタグをHTMLに挿入するのが早すぎる人からのサポートの手間を省ける可能性があります。
Googleマップの例では、asyncとdeferフラグが使用されています。
asyncフラグは、スクリプトがDOM 構文解析と並行してロードするために、およびAPIの準備ができ次第、実行することができます。deferフラグを使用すると、スクリプトはDOM の解析と並行して読み込まれますが、 DOMの解析が完了するまでスクリプトは実行されません。asyncは現代のHTML5ブラウザでサポートされていますが、deferは普遍的なサポートです。タグを一緒に使用すると、deferは古いブラウザでは単なる後退に過ぎず、asyncがサポートされている場合は無視されます。
これらの簡単な例では、いずれも必要ではありませんが、asyncまたはdeferのいずれかが動作します。この場合、それはパフォーマンスのためだけです。
参考文献：
Speed up Google Maps(and everything else) with async & defer
async vs defer attributes - Growing with the Web
私は私が見ていると思います。だから、私は遅延属性と非同期属性を理解するために読む[記事]（http://www.sitepoint.com/non-blocking-async-defer/）は**まったく間違っています**、**仕様**と矛盾します。それはGoogle上で（https://google.com/?q=javascript+defer+async）非常に高い評価を受けています。 – dotancohen
@dotancohen：いいえ、正解です。「...にはdocument.writeやDOMの変更の不自然さは含まれていません：」と少し曖昧です。 * *は、 "...パーサーでインラインで実行するためのdocument.writeやDOMの変更は含まれていません。" （あなたのスクリプトを実行するのを待っているパーサーに依存する 'document.write'だけでなく、あなたができることが他にもあるので）。**すべての** DOMの修正が表から外れているという印象を与えてはなりません。 –