关于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)