3

グーグルマップを非同期的にロードする試みで、私はグーグルの非同期ページを見ました

基本的に、私はAPIでdocument.writeに代わるものを探しています。このグーグルグループの投稿の一部のユーザーによると、非同期バージョンを使用すると、このシナリオが処理されます。

私の質問は、なぜこのスクリプトを使用するのかということです。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>

次のものとは異なります。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);

最初と2番目の両方が明らかにdocument.writeを含む同じjsファイルを呼び出すとき？また、書き込みが一般的にコンテンツセキュリティポリシーに違反する場合、更新されたAPIがdocument.write over appendの使用を検討するのはなぜですか？

ちょっとした背景情報として、私はGoogleのパッケージ化されたアプリを試していますが、それらのcspではdocument.writeが許可されていません。

4

4 に答える 4

4

スクリプト（または他のリソース）を非同期的/動的にロードする主な利点の1つは、ページのロード時間を大幅に短縮できることです。

Googleの開発者のベストプラクティスから：

https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

ブラウザが従来のスクリプトタグを解析する場合、スクリプトがダウンロード、解析、実行されるのを待ってから、その後に続くHTMLをレンダリングする必要があります。ただし、非同期スクリプトを使用すると、ブラウザーは、非同期スクリプトが完了するのを待たずに、非同期スクリプトの後に続くHTMLの解析とレンダリングを続行できます。スクリプトが非同期で読み込まれると、スクリプトはできるだけ早くフェッチされますが、ブラウザのUIスレッドがWebページのレンダリングなどの他の処理でビジー状態になるまで、スクリプトの実行は延期されます。

スクリプト（Google Maps APIなど）を非同期で読み込むかどうかを決定するために使用するもう1つのトリックは、「ユーザーが読み込まれた結果を表示したり、メリットを得たり、操作したりできない可能性はありますか？脚本？"。答えが「はい」の場合、通常、スクリプトのロードを何らかのDOMイベント（ボタンのクリックなど）に関連付けます。

言い換えれば、ユーザーが私のGoogleマップを表示するために私のWebページのボタンをクリックする必要がある場合。ユーザーがそれを見ることさえできない可能性があるのに、なぜその余分なスクリプトをすべてロードするのをわざわざするのですか？代わりに、ボタンがクリックされたときにスクリプトを非同期でロードしてから、マップをロードします。

于 2013-02-02T06:09:08.207 に答える
1

実際、maps.googleapis.com / maps / api/jsにあるjavascriptファイルは動的なものです。サーバーは、さまざまなパラメーターに対してさまざまなjsファイルで応答します。違いを知るには、ブラウザのアドレスバーから次のファイルをロードするだけです。

https://maps.googleapis.com/maps/api/js?v=3.exp および https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize

以下に引用されているように、最初のjsファイルに「document.write」があることに気付くでしょう。

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

一方、2番目のケースには次のようにdocument.createElementがあります

  function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

違いは、スクリプトが同期的に読み込まれると、ブラウザはスクリプトが完全に読み込まれるのを待ち、スクリプトがdocument.writeを呼び出すと、読み込まれるドキュメントにテキストが追加されることです。ただし、ドキュメントが完全に読み込まれると、非同期呼び出しが行われます。その結果、document.writeは既存のドキュメントを置き換えるため、ブラウザーは非同期でロードされたスクリプトからのそのような呼び出しを無視します。「callback=initialize」を使用してjsをロードすると、自己実行関数には、初期化するためのコールバックと、さらにスクリプトを非同期でロードできる変更された関数がすでに含まれています。

于 2014-06-14T11:38:11.787 に答える
0

マップスクリプトがロードされた後に実行されるコールバックを設定するだけです。

次に、アプリのメイン.jsファイルで、コールバックを定義します。

window.myCallbackFuction = function() {
  return console.log("Loaded Google Maps!");
  // the rest of the maps initialization goes here, per the docs
};

トリッキーな部分は、コードをリファクタリングして、が実行されたことを確認するまでマップ関連のコードが実行されないようにすることですmyCallbacFuction()。

于 2014-12-17T15:12:04.653 に答える
-1

Googleマップを非同期でロードする方法の例があります。基本的な考え方は、あなたが行ったようにスクリプトタグを作成し、この関数をオンロードで実行させることです。

于 2012-09-14T07:55:00.507 に答える