Google Analytics(分析)asynchronousdevise模式的名称是什么?它在哪里使用?
Google Analytics(分析)asynchronous代码使用非常独特的devise模式来执行JavaScript代码。
代码依赖于库,它不知道库是否已经加载。 如果库没有加载,它只是将所有的命令排队到一个Array对象。 当库加载它时,只会创build_gaq对象,并按照包含的顺序执行所有命令。 然后覆盖推送function,以便将来的命令立即执行。
这个想法是让这些命令在排队时运行得非常快。 代码仅在加载库后才真正评估。
他们还加载了一个参数async=true
的库。 这对于实际的页面加载时间几乎没有影响。
这些命令看起来就像它的同步版本,但第一个string是一个函数名称,下一个参数是该函数参数。 您也可以将函数推入该数组中,函数将按顺序执行,同时使用null上下文。 所以,如果你需要做一些与库同步的东西,你可以推一个函数在_gaq里面做。
我认为这是一个非常聪明的解决scheme,但我从来没有见过。 有没有人知道这个devise模式的名称,或者除了Google Analytics(分析)跟踪代码之外还使用了什么地方?
我曾经把它称为“asynchronousfunction排队”,但它不是一个很吸引人的名字,当然不是devise模式的正式名称。
有趣的是,虽然我之前并没有看到过这种特殊的模式,但是由于谷歌在谷歌分析中采用了这种模式,所以它被不同的平台广泛地采用来寻找asynchronous的果汁(Disqus想起来)。
此博客文章是对我所阅读的asynchronousGoogle Analytics语法的最深入的检查,其中包含相当详细的说明,说明如何复制该模式:
从博客文章:
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);
它还指出,即使没有多less浏览器支持async
属性,所使用的注入方法也会使脚本在大多数浏览器中asynchronous加载,并包含一个有用的图表:
它所做的就是将数据推送到全局数组中
var _qaq = _qaq || []; _qaq.push(stuff);
它基本上允许你在图书馆加载之前缓冲数据来处理。
这个模式用得不多的主要原因是其他库在做任何事情之前一般都需要加载资源。 开始缓冲jQuery命令没有任何意义。
这不是一种模式,它只是将数据存储在全局范围内,并说这是一个工作来处理这个问题,我不在乎你什么时候处理它。
然而,这是一个聪明的方式来处理你不知道何时加载或准备好的事实,常见的select是DOMReady块。
一个很好的javascript加载策略的写法可以在这里http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
据我所知,ga.js的asynchronous语法是由Steve Souders启发的。 你可以看看他的一个项目ControlJS
2014年,Ilya Grigorik写了一篇题为脚本注入的“asynchronous脚本”,被认为是有害的 。 该post链接到这个问题,并使用短语“asynchronousfunction排队”作为谷歌分析使用的devise模式的名称。
asynchronous函数队列不同于更新的devise模式,如Fetch Injection ,它不需要或不需要全局定义的队列。 下面是一个在获取注入模块中实现的获取注入的示例,用于asynchronous下载文档中的资源:
请注意,Fetch Injectiondevise模式能够并行加载JavaScript以外的CSS,消除了CSSOM的阻塞行为和Web Font下载,大大减less了感知的延迟。 使用易于理解的API可以完整地保存脚本执行顺序,从而简化了通过全面的程序控制来加载复杂的资源组。