前端页面性能监控和数据上报
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: "u7f51u9875u91cdu5b9au5411u7684u8017u65f6",
value: t.redirectEnd - t.redirectStart
}, {
key: "AppCache",
desc: "u68c0u67e5u672cu5730u7f13u5b58u7684u8017u65f6",
value: t.domainLookupStart - t.fetchStart
}, {
key: "DNS",
desc: "DNSu67e5u8be2u7684u8017u65f6",
value: t.domainLookupEnd - t.domainLookupStart
}, {
key: "TCP",
desc: "TCPu8fdeu63a5u7684u8017u65f6",
value: t.connectEnd - t.connectStart
}, {
key: "Waiting(TTFB)",
desc: "u4eceu5ba2u6237u7aefu53d1u8d77u8bf7u6c42u5230u63a5u6536u5230u54cdu5e94u7684u65f6u95f4 / Time To First Byte",
value: t.responseStart - t.requestStart
}, {
key: "Content Download",
desc: "u4e0bu8f7du670du52a1u7aefu8fd4u56deu6570u636eu7684u65f6u95f4",
value: t.responseEnd - t.responseStart
}, {
key: "HTTP Total Time",
desc: "httpu8bf7u6c42u603bu8017u65f6",
value: t.responseEnd - t.requestStart
}, {
key: "DOMContentLoaded",
desc: "domu52a0u8f7du5b8cu6210u7684u65f6u95f4",
value: t.domContentLoadedEventEnd - r
}, {
key: "Loaded",
desc: "u9875u9762loadu7684u603bu8017u65f6",
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)
});
refs
https://developer.mozilla.org/en-US/docs/Web/API/Performance
https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！