关于javascript:js统计页面加载完成需要的时间

• 次要用到了 Performance API，能够统计页面DOM渲染实现须要的工夫。

Performance 接口能够获取到以后页面中与性能相干的信息。

function getTiming() {  setTimeout(() => {    let t = window.performance.timing;    let performanceInfo = [{      key: "Redirect",      desc: "网页重定向的耗时",      "value(ms)": t.redirectEnd - t.redirectStart    },    {      key: "AppCache",      desc: "查看本地缓存的耗时",      "value(ms)": t.domainLookupStart - t.fetchStart    },    {      key: "DNS",      desc: "DNS查问的耗时",      "value(ms)": t.domainLookupEnd - t.domainLookupStart    },    {      key: "TCP",      desc: "TCP链接的耗时",      "value(ms)": t.connectEnd - t.connectStart    },    {      key: "Waiting(TTFB)",      desc: "从客户端发动申请到接管响应的工夫",      "value(ms)": t.responseStart - t.requestStart    }, {      key: "Content Download",      desc: "下载服务端返回数据的工夫",      "value(ms)": t.responseEnd - t.responseStart    },    {      key: "HTTP Total Time",      desc: "http申请总耗时",      "value(ms)": t.responseEnd - t.requestStart    },    {      key: "First Time",      desc: "首包工夫",      "value(ms)": t.responseStart - t.domainLookupStart    },    {      key: "White screen time",      desc: "白屏工夫",      "value(ms)": t.responseEnd - t.fetchStart    },    {      key: "Time to Interactive(TTI)",      desc: "首次可交互工夫",      "value(ms)": t.domInteractive - t.fetchStart    },    {      key: "DOM Parsing",      desc: "DOM 解析耗时",      "value(ms)": t.domInteractive - t.responseEnd    },    {      key: "DOMContentLoaded",      desc: "DOM 加载实现的工夫",      "value(ms)": t.domInteractive - t.navigationStart    },    {      key: "Loaded",      desc: "页面load的总耗时",      "value(ms)": t.loadEventEnd - t.navigationStart    }]    console.table(performanceInfo);  }, 0)}window.addEventListener('load', getTiming, false)