Какое название шаблона асинхронизации Google Analytics и где оно используется?

В коде Google Analytics async используется очень четкий шаблон проектирования для выполнения кода javascript.

Код зависит от библиотеки, и он не знает, загружена ли библиотека или нет. Если библиотека еще не загрузилась, она просто ставит в очередь все команды в объект Array. Когда библиотека загружается, он просто создает объект _gaq и выполняет все команды в последовательности, в которую он был включен. Затем он перезаписывает функцию push, поэтому будущие команды выполняются сразу же.

Идея состоит в том, чтобы заставить команды работать очень быстро, когда они поставлены в очередь. Код действительно оценивается только после загрузки библиотеки.

Они также загружают библиотеку с параметрами async=true. Это практически не влияет на фактическое время загрузки страницы.

Команды выглядят так же, как и версии синхронизации, но первая строка - это имя функции, а следующие параметры - это параметры функции. Вы также можете вставлять функции в этот массив, и функции будут выполняться в последовательности, а также с нулевым контекстом. Поэтому, если вам нужно что-то сделать синхронно с библиотекой, вы можете нажать функцию, чтобы сделать это внутри _gaq.

Я думаю, что это очень умное решение, но я никогда не видел его раньше. Кто-нибудь знает имя этого шаблона проектирования или где он используется помимо кода отслеживания Google Analytics?

Ответ 1

Я назвал его "очередностью асинхронных функций", но это не совсем запоминающееся имя и, конечно, не формальное имя шаблона проектирования.

Интересно то, что, хотя раньше я не видел эту конкретную модель, поскольку Google принял ее для Google Analytics, ее широко применяли разные платформы, стремящиеся набить асинхронный сок (Disqus приходит на ум.)

Этот пост в блоге является самым глубоким рассмотрением синтаксиса асинхронной Google 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);

Он также отмечает, что, хотя не многие браузеры поддерживают атрибут async, используемый метод впрыска делает асинхронно загрузку script в большинстве браузеров и включает полезную диаграмму:

Ответ 2

Все, что он делает, - это толкание данных в глобальный массив

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

В основном это позволяет вам накапливать данные для работы до загрузки библиотеки.

Основная причина, по которой этот шаблон не используется, заключается в том, что другим библиотекам обычно нужны ресурсы для загрузки, прежде чем они смогут что-либо сделать. Не было бы смысла начинать буферизацию команд jQuery.

Это не шаблон, который просто хранит данные в глобальной области действия и говорит, что это некоторая работа elses для обработки этого, мне все равно, когда вы его обрабатываете.

Однако это умный способ справиться с тем фактом, что вы не знаете, когда что-то загружено или готово, обычной альтернативой является блок DOMReady.

Ответ 3

Хорошая запись скриптов загрузки javascript доступна здесь http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

И насколько я помню, синтаксис ga.js async был вдохновлен Steve Souders. Вы можете посмотреть ControlJS, один из его проектов

Ответ 4

В 2014 году Илья Григорик написал сообщение под названием Script -injected "async scripts" , который считается вредным. Этот пост ссылается на этот вопрос и использует фразу "асинхронная очередь функций" как имя шаблона проектирования, используемого в Google Analytics.

Очередь функций Async отличается от более поздних шаблонов проектирования, таких как Fetch Injection, для которых не требуется или требуется глобально определенная очередь. Здесь приведен пример внедрения Fetch Injection, реализованный в Fetch Inject module и используемый для асинхронной загрузки ресурсов в документе:

Обратите внимание: шаблон проектирования Fetch Injection способен загружать CSS в дополнение к JavaScript параллельно, устраняя поведение блокировки CSSOM и загрузку веб-шрифта, что значительно снижает воспринимаемую задержку. Script порядок выполнения полностью сохраняется с помощью простого в использовании API, что упрощает управление загрузкой сложных групп ресурсов с полным программным управлением.