前端页面性能监控和数据上报

window.performance

performance.timing

PerformanceTiming

// PerformanceTiming
connectEnd: 1599835202768
connectStart: 1599835202768
domComplete: 1599835226639
domContentLoadedEventEnd: 1599835203416
domContentLoadedEventStart: 1599835203401
domInteractive: 1599835203195
domLoading: 1599835202832
domainLookupEnd: 1599835202768
domainLookupStart: 1599835202768
fetchStart: 1599835202768
loadEventEnd: 1599835226639
loadEventStart: 1599835226639
navigationStart: 1599835198744
redirectEnd: 1599835202768
redirectStart: 1599835198747
requestStart: 1599835202771
responseEnd: 1599835203191
responseStart: 1599835202818
secureConnectionStart: 0
unloadEventEnd: 0
unloadEventStart: 0
__proto__: PerformanceTiming

PerformanceNavigation

window.performance.navigation;

window.performance.navigation.timing;
// undefined

PerformanceNavigationTiming


window.performance.getEntriesByType("navigation")[0];

// PerformanceNavigationTiming 
connectEnd: 594.6899999999005
connectStart: 594.6899999999005
decodedBodySize: 2461
domComplete: 0
domContentLoadedEventEnd: 1192.8049999996801
domContentLoadedEventStart: 1192.5099999998565
domInteractive: 1036.4799999997558
domainLookupEnd: 594.6899999999005
domainLookupStart: 594.6899999999005
duration: 0
encodedBodySize: 1196
entryType: "navigation"
fetchStart: 594.6899999999005
initiatorType: "navigation"
loadEventEnd: 0
loadEventStart: 0
name: "https://i.cnblogs.com/posts/edit;postId=13654839"
nextHopProtocol: "h2"
redirectCount: 1
redirectEnd: 594.6899999999005
redirectStart: 3.3249999996769475
requestStart: 598.229999999603
responseEnd: 972.3399999998037
responseStart: 969.0349999996215
secureConnectionStart: 594.6899999999005
serverTiming: []
startTime: 0
transferSize: 1592
type: "navigate"
unloadEventEnd: 0
unloadEventStart: 0
workerStart: 0
__proto__: PerformanceNavigationTiming

demo

https://cdn2.jianshu.io/shakespeare/_next/static/runtime/main-15804b7e5271485fa737.js

    blG5: function(e, t, r) {
        "use strict";
        r.r(t);
        r("DpIS"),
        r("Wr5T"),
        r("KKXr");
        var n = r("vN+2")
          , a = r.n(n)
          , s = r("vDqi")
          , o = r.n(s);
        window.addEventListener("load", function() {
            setTimeout(function() {
                var e = window.performance;
                if (e) {
                    var t = e.getEntriesByType("navigation")[0]
                      , r = 0;
                    t || (r = (t = e.timing).navigationStart);
                    var n = [{
                        key: "Redirect",
                        desc: "\u7f51\u9875\u91cd\u5b9a\u5411\u7684\u8017\u65f6",
                        value: t.redirectEnd - t.redirectStart
                    }, {
                        key: "AppCache",
                        desc: "\u68c0\u67e5\u672c\u5730\u7f13\u5b58\u7684\u8017\u65f6",
                        value: t.domainLookupStart - t.fetchStart
                    }, {
                        key: "DNS",
                        desc: "DNS\u67e5\u8be2\u7684\u8017\u65f6",
                        value: t.domainLookupEnd - t.domainLookupStart
                    }, {
                        key: "TCP",
                        desc: "TCP\u8fde\u63a5\u7684\u8017\u65f6",
                        value: t.connectEnd - t.connectStart
                    }, {
                        key: "Waiting(TTFB)",
                        desc: "\u4ece\u5ba2\u6237\u7aef\u53d1\u8d77\u8bf7\u6c42\u5230\u63a5\u6536\u5230\u54cd\u5e94\u7684\u65f6\u95f4 / Time To First Byte",
                        value: t.responseStart - t.requestStart
                    }, {
                        key: "Content Download",
                        desc: "\u4e0b\u8f7d\u670d\u52a1\u7aef\u8fd4\u56de\u6570\u636e\u7684\u65f6\u95f4",
                        value: t.responseEnd - t.responseStart
                    }, {
                        key: "HTTP Total Time",
                        desc: "http\u8bf7\u6c42\u603b\u8017\u65f6",
                        value: t.responseEnd - t.requestStart
                    }, {
                        key: "DOMContentLoaded",
                        desc: "dom\u52a0\u8f7d\u5b8c\u6210\u7684\u65f6\u95f4",
                        value: t.domContentLoadedEventEnd - r
                    }, {
                        key: "Loaded",
                        desc: "\u9875\u9762load\u7684\u603b\u8017\u65f6",
                        value: t.loadEventEnd - r
                    }];
                    if (Math.random() > .75) {
                        var s = window.location
                          , i = s.href
                          , c = s.pathname
                          , u = navigator.userAgent
                          , d = i.split("?")[0];
                        o.a.post("https://tr.jianshu.com/fe/1/mon/atf", {
                            app: "shakespeare-performance",
                            url: d,
                            ua: u,
                            path: c,
                            stats_ttfb: t.responseStart - t.requestStart,
                            stats_domLoaded: t.domContentLoadedEventEnd - r,
                            stats_loaded: t.loadEventEnd - r
                        }).then(a.a).catch(a.a)
                    }
                    console && console.log && console.log(n)
                }
            }, 0)
        });