Googleアナリティクスの非同期デザインパターンの名前とその使用場所を教えてください。

Question

Google Analytics asyncコードは、javascriptコードの実行に非常に異なるデザインパターンを使用します。

コードはライブラリによって異なり、ライブラリがロードされているかどうかはわかりません。ライブラリがまだロードされていない場合は、すべてのコマンドがArrayオブジェクトに格納されます。ライブラリがロードされると、_gaqオブジェクトが作成され、含まれているシーケンス内のすべてのコマンドが実行されます。その後、プッシュ機能が上書きされ、今後のコマンドがすぐに実行されます。

考えられるのは、コマンドがキューに入れられたときに非常に高速に実行されるようにすることです。このコードは、ライブラリがロードされたときに実際に評価されます。

また、ライブラリにはパラメータasync=trueをロードします。これは、実際のページ読み込み時間にほとんど影響を与えません。

コマンドはちょうどそれの同期バージョンのように見えますが、最初の文字列は、関数名で、次のパラメータがその関数のパラメータです。また、この配列に関数をプッシュすることもできます。関数はヌルコンテキストでも順番に実行されます。だから、ライブラリと同期する何かをする必要があれば、_gaqの中でこれを行う関数をプッシュすることができます。

これは非常に巧妙な解決策だと思いますが、以前は見たことがありません。このデザインパターンの名前や、Googleアナリティクスのトラッキングコードの他に誰が使用されているのかを知っている人はいますか？

Answer 1

私はデザインパターンの正式名称を「非同期機能キューイング」としてそれに言及するが、そのない、非常にキャッチーな名前、そして確かにいませんでした。

Googleアナリティクスに採用されて以来、これまで使用されていたこの特定のパターンは見ていませんでしたが、非同期のジュースを入れようとしているさまざまなプラットフォームで幅広く採用されています（Disqusが気になります）。）

このblog postは私が読んだ非同期Googleアナリティクスの構文のほとんどで、深さ試験であり、もう1つは、パターン複製することができる方法のかなり詳細な説明は含まれています。ブログの記事から

を：

var GoogleAnalyticsQueue = function() { 

    this.push = function() { 
     for (var i = 0; i < arguments.length; i++) try { 
      if (typeof arguments[i] === "function") arguments[i](); 
      else { 
       // get tracker function from arguments[i][0] 
       // get tracker function arguments from arguments[i].slice(1) 
       // call it! trackers[arguments[i][0]].apply(trackers, arguments[i].slice(1)); 
      } 
     } catch (e) {} 
    } 

    // more code here… 
}; 

// get the existing _gaq array 
var _old_gaq = window._gaq; 

// create a new _gaq object 
window._gaq = new GoogleAnalyticsQueue(); 

// execute all of the queued up events - apply() turns the array entries into individual arguments 
window._gaq.push.apply(window._gaq, _old_gaq); 

また、多くのないブラウザはasync属性をサポートしていても、使用した注入の方法は、ほとんどのブラウザで非同期スクリプトの負荷を行い、有用なチャートを含み、と述べている：

Answer 2

それはやっているすべては、グローバル配列

var _qaq = _qaq || []; 
_qaq.push(stuff); 

にデータを推進しているそれは基本的にあなたは、ライブラリがロードされる前に対処するためにデータをバッファリングすることができます。

このパターンはあまり使用されていない主な理由は、他のライブラリは、一般的に、彼らが何かを行うことができます前にロードするためのリソースを必要とすることです。 jQueryコマンドのバッファリングを開始するのは意味がありません。

それは単にグローバルスコープのデータを格納し、それがこれを処理するために、いくつかの-1よそ仕事だあなたがそれを処理するとき、私は気にしない言っているパターンではありません。

それは何かがロードされたか、準備ができたとき、あなたは知っていないという事実に対処するための巧妙な方法ですが、一般的な選択肢はDOMReadyブロックです。

Answer 3

javascriptのロードstratgiesの良い過去記事はこちら http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

利用可能であり、私の知る限りリコールとして、非同期構文はSteve Soudersに触発されたのga.js。あなたは彼のプロジェクトの1つであるControlJSを見ることができます

Answer 4

2014年にIlya GrigorikはScript-injected "async scripts" considered harmfulというタイトルの投稿を投稿しました。その投稿はこの質問にリンクし、Googleアナリティクスで使用されるデザインパターンの名前として「非同期関数キューイング」というフレーズを使用します。

非同期機能のキューイングは、グローバルに定義されたキューを必要としない、または必要としない、Fetch Injectionのような最近のデザインパターンとは異なります。ここインジェクションFetch Inject moduleに実装し、非同期にドキュメント内のリソースをダウンロードするために使用を取得する例です：フェッチ・インジェクションデザインパターンは、ブロッキングを回避する、並行してJavaScriptに加えて、負荷CSSが可能である

お知らせCSSOMの動作とWeb Fontのダウンロードにより、知覚される待ち時間が大幅に短縮されます。スクリプトの実行順序は理解しやすいAPIを使用して完全に保持されるため、複雑なリソースグループのロードをプログラム全体の制御で簡単に管理できます。