javascript 记录从chrome.loadTimes（Chrome / Opera，IE11）到Google Analytics的第一个绘制时间

Posted 2021-05-03

(function ($) {
    'use strict';

    function recordTimeToFirstPaint() {
        // Use Chrome's loadTimes or IE 9+'s msFirstPaint to record the time to render in milliseconds:
        var firstPaintTime, timingSource;

        if ('chrome' in window && $.isFunction(window.chrome.loadTimes)) {
            var loadTimes = window.chrome.loadTimes();

            // A small percentage of traffic from Chrome in the wild returns impossibly large values – 2+
            // days! – which need to be filtered out:

            firstPaintTime = loadTimes.firstPaintTime - loadTimes.startLoadTime;

            if (firstPaintTime > 3600) {
                Raven.captureMessage('chrome.loadTimes() reported impossible values',
                                     {extra: {loadTimes: loadTimes}});
                return;
            }

            // Convert from seconds to milliseconds:
            firstPaintTime = Math.round(firstPaintTime * 1000);
            timingSource = 'chrome.loadTimes';
        } else if ('performance' in window) {
            var navTiming = window.performance.timing;

            if (navTiming.navigationStart === 0) {
                return; // IE9 bug - see below
            }

            // See http://msdn.microsoft.com/ff974719
            firstPaintTime = navTiming.msFirstPaint - navTiming.navigationStart;
            timingSource = 'msFirstPaint';
        }

        if (typeof firstPaintTime == 'number' && firstPaintTime > 0) {
            ga('send', {
                hitType: 'timing',
                transport: 'beacon',
                timingCategory: 'RUM',
                timingVar: 'First Paint (ms)',
                timingValue: firstPaintTime,
                timingLabel: timingSource
            });
        }
    }

    // Defer collecting data until after the load event has finished to avoid an IE9
    // bug where navigationStart will be 0 until after the browser updates the
    // performance.timing data structure:
    $(window).on('load', function () {
        setTimeout(recordTimeToFirstPaint);
    });
})(jQuery);