如何收集常见的前端性能信息

前端性能指标，大多有TTFB ，首屏，首次可交互时间等

相关的文章已经有很多，细节这里就不多说了，可参考文末资料

总体来说，需要知道浏览器（新的）给我们提供了 Performance API，使用这个属性，我们可以得到一系列跟性能相关的数据

结合各个时间点的意义，我们可以计算出关键的耗时指标

看看下面这张图

经过简单的计算，可以获取到这样的信息

与DevTools 的Network来比较，数据是差不多的，应该能作为参考

简单上报一下

那么，这些个指标是怎末计算的呢，且看代码部分，看看注释应该就知道了

如何计算这些时间点，因人而异，各人有不同的版本，只要觉得合理，其实都是可以的

<script>
    ;(function(window, undefined) {
        function addEvent(type, fn) {
            if (window.addEventListener) {
                window.addEventListener(type, fn, false);
            } else {
                window.attachEvent('on' + type, fn);
            }
        }

        // load 事件触发猴再收集相关数据
        addEvent('load', getTiming);

        // 快捷入口
        window.getTiming = getTiming;

        function getTiming() {
            // 浏览器支持的API
            var performance = window.performance;

            if (!performance || !performance.timing) {
                console.log('当前浏览器不支持Performance Time API');
                return;
            }

            var timing = performance.timing,
                timings = {
                    page: [],
                    pageReport: []
                };

            // 设置某一项耗时统计
            function setPageTiming(name, text, time) {
                timings.page.push({
                    name: name,
                    text: text,
                    time: time + ' ms'
                });

                timings.pageReport.push({
                    name: name,
                    time: time + ' ms'
                });
            }

            // 页面加载仍未完成，loadEventEnd值可能为0，需要延迟处理
            if (timing.loadEventEnd - timing.navigationStart < 0) {
                console.log('getTiming delay');
                setTimeout(getTiming, 1000);
                return;
            }

            setPageTiming('redirect', '重定向', timing.redirectEnd - timing.redirectStart);
            setPageTiming('dns', 'DNS解析', timing.domainLookupEnd - timing.domainLookupStart);
            setPageTiming('tcp', 'TCP连接', timing.connectEnd - timing.connectStart);
            setPageTiming('ssl', 'TCP-SSL连接', !timing.secureConnectionStart ? 0 : timing.connectEnd - timing.secureConnectionStart);
            setPageTiming('ttfb', 'TTFB服务器返回首个字节', timing.responseStart - timing.requestStart);
            setPageTiming('download', 'DOM资源下载', timing.responseEnd - timing.responseStart);
            setPageTiming('before-parse-html', 'DOM解析前耗时', timing.responseEnd - timing.navigationStart);
            setPageTiming('html-parsed', 'DOM解析完成', timing.domInteractive - timing.domLoading);
            setPageTiming('dom-loaded', 'DOM加载完成', timing.domComplete - timing.domLoading);
            setPageTiming('dom-content-load', 'DOMContentLoaded事件开始', timing.domContentLoadedEventStart - timing.navigationStart);
            setPageTiming('dom-content-loaded', 'DOMContentLoaded事件结束', timing.domContentLoadedEventEnd - timing.navigationStart);
            setPageTiming('load', 'Load事件开始', timing.loadEventStart - timing.navigationStart);
            setPageTiming('loaded', 'Load事件结束', timing.loadEventEnd - timing.navigationStart);

            // 以下两项可以直接获取
            var paintTiming = {
                'first-paint': '首屏（首次绘制）',
                'first-contentful-paint': '首屏（首次内容绘制）'
            };

            performance.getEntriesByType('paint').forEach(function(entry) {
                if (paintTiming[entry.name]) {
                    setPageTiming(entry.name, paintTiming[entry.name], entry.startTime + entry.duration);
                }
            });

            // 以下两项指标与需求有关，需要根据业务要求在代码中打点统计
            // setPageTiming('first-meaningful-paint', '首屏（首次有效绘制）', timing.domInteractive - timing.navigationStart);
            // setPageTiming('time-to-interactive', '可交互时间', timing.domInteractive - timing.navigationStart);

            // 简易版统计上报
            if (requestIdleCallback) {
                requestIdleCallback(function() {
                    report(timings.pageReport);
                });
            } else {
                setTimeout(function() {
                    report(timings.pageReport);
                });
            }

            function report(data) {
                data = data || [];

                if (!data.length) {
                    return;
                }

                (new Image()).src = 'https://a.b.c/d/e?t=' + (new Date())
                    + '&l=' + location.href
                    + '&p=' + navigator.platform
                    + '&net=' + navigator.connection.effectiveType
                    + '&u=' + navigator.userAgent
                    + '&times=' + JSON.stringify(data);
            }

            console.table(timings.page);
            console.log(performance.timing);
        }
    })(window);
</script>

参考资料：

以用户为中心的性能指标

2018你应该知道的前端性能信息采集指南

Speed Matters

前端性能监控