javascript Google Analytics 异步设计模式的名称是什么？它在哪里使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6963779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the name of Google Analytics async design pattern and where is it used?
提问by Eduardo
Google Analytics asynccode uses a very distinct design pattern for javascript code execution.
Google Analytics 异步代码使用非常独特的设计模式来执行 javascript 代码。
The code depends on a library and it doesn't know if the library has loaded or not. If the library didn't load yet it just queues all the commands into an Array object. When the library loads it just creates the _gaq object and executes all commands in the sequence it was included. It then overwrites the push function so future commands are executed right away.
代码依赖于一个库，它不知道该库是否已加载。如果库还没有加载，它只是将所有命令排队到一个 Array 对象中。当库加载时，它只创建 _gaq 对象并按照包含的顺序执行所有命令。然后它会覆盖推送功能，以便立即执行未来的命令。
The idea is to make the commands run very fast when they are queued. The code is only really evaluated later when the library is loaded.
这个想法是让命令在排队时运行得非常快。只有在加载库时才真正评估代码。
They also load the library with a parameters async=true. This causes almost no impact on the actual page loading time.
他们还使用参数加载库async=true。这对实际页面加载时间几乎没有影响。
The commands look just like the sync versions of it, but the first string is a function name and the next parameters are that function parameters. You can also push functions into this array and the functions will be executed in sequence as well with a null context. So if you need to do something synchronous with the library you can push a function to do this inside _gaq.
命令看起来就像它的同步版本，但第一个字符串是函数名称，下一个参数是该函数参数。您还可以将函数推入此数组，这些函数也将在空上下文中按顺序执行。因此，如果您需要与库同步执行某些操作，则可以在 _gaq 中推送一个函数来执行此操作。
I think this is a very clever solution but I have never seen it before. Does anyone know the name of this design pattern or where it's used besides the Google Analytics tracking code?
我认为这是一个非常聪明的解决方案，但我以前从未见过。有谁知道这种设计模式的名称或它除了 Google Analytics 跟踪代码之外的其他用途？
采纳答案by Yahel
I've referred to it as "asynchronous function queuing", but its not quite a catchy name, and certainly not the formal name of the design pattern.
我把它称为“异步函数排队”，但它不是一个吸引人的名字，当然也不是设计模式的正式名称。
What's interesting is that, though I hadn't seen this particular pattern used before, since Google adopted it for Google Analytics, its been adopted widely by different platforms looking to nab the asynchronous juice (Disqus comes to mind.)
有趣的是，虽然我以前从未见过使用过这种特殊模式，但自从 Google 将其用于 Google Analytics（分析）以来，它已被不同平台广泛采用以获取异步果汁（想到 Disqus。）
This blog postis the most in-depth examination of the async Google Analytics syntax I've read, and includes a fairly detailed explanation of how the one can replicate the pattern:
这篇博文是我读过的对异步 Google Analytics 语法最深入的研究，包括对如何复制模式的相当详细的解释：
From the blog post:
来自博客文章：
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);
It also notes that, even though not many browsers support the asyncattribute, the method of injection used makes the script load asynchronously in most browsers, and includes a helpful chart:
它还指出，尽管没有多少浏览器支持该async属性，但所使用的注入方法使脚本在大多数浏览器中异步加载，并包含一个有用的图表：
回答by Open SEO
A good writeup of javascript loading stratgies is available here http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
这里有一篇关于 javascript 加载策略的好文章 http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
And as far as I recall, ga.js async syntax has been inspired by Steve Souders. You can look at ControlJS, one of his projects
据我所知，ga.js 异步语法的灵感来自Steve Souders。你可以看看ControlJS，他的项目之一
回答by Raynos
All it's doing is pushing data into a global array
它所做的只是将数据推送到全局数组中
var _qaq = _qaq || [];
_qaq.push(stuff);
It basically allows you to buffer up data to deal with before the library has loaded.
它基本上允许您在库加载之前缓冲要处理的数据。
The main reason this pattern isn't used much is that other libraries generally need the resources to load before they can do anything. It wouldn't make any sense to start buffering jQuery commands.
这种模式使用不多的主要原因是其他库通常需要加载资源才能做任何事情。开始缓冲 jQuery 命令没有任何意义。
It's not a pattern it's simply storing data in global scope and saying it's some-one elses job to process this, I don't care when you process it.
这不是一种模式，它只是将数据存储在全局范围内，并说处理这个是别人的工作，我不在乎你什么时候处理它。
However it is a clever way to deal with the fact you don't know when something is loaded or ready, the common alternative is a DOMReady block.
然而，这是处理您不知道某些东西何时加载或准备好这一事实的聪明方法，常见的替代方法是 DOMReady 块。
回答by Josh Habdas
In 2014 Ilya Grigorik wrote a post titled Script-injected "async scripts" considered harmful. That post links to this question and uses the phrase "asynchronous function queuing" as the name of the design pattern used by Google Analytics.
2014 年，Ilya Grigorik 写了一篇题为“脚本注入的“异步脚本”被认为有害的帖子。该帖子链接到此问题，并使用短语“异步函数排队”作为 Google Analytics 使用的设计模式的名称。
Async function queuing differs from more recent design patterns like Fetch Injection, which don't require or need a globally defined queue. Here's an example of Fetch Injection implemented in the Fetch Inject moduleand used to asynchronously download resources in a document:
异步函数队列不同于最近的设计模式，如Fetch Injection，后者不需要或不需要全局定义的队列。这是在Fetch Inject 模块中实现的 Fetch Injection 示例，用于异步下载文档中的资源：
Notice the Fetch Injection design pattern is capable of loading CSS in addition to JavaScript in parallel, eliminating the blocking behavior of CSSOM and the Web Font download, greatly reducing perceived latency. Script execution order is fully preserved using an easy-to-understand API, making it simple to manage loading complex groups of resources with total programmatic control.
请注意，Fetch Injection 设计模式能够并行加载除 JavaScript 之外的 CSS，消除 CSSOM 和 Web 字体下载的阻塞行为，大大降低了感知延迟。使用易于理解的 API 完全保留脚本执行顺序，从而通过完全编程控制轻松管理加载复杂的资源组。
