• 主要用到了 Performance API，可以統(tǒng)計(jì)頁(yè)面DOM渲染完成需要的時(shí)間。

Performance 接口可以獲取到當(dāng)前頁(yè)面中與性能相關(guān)的信息。

function getTiming() {
  setTimeout(() => {
    let t = window.performance.timing;
    let performanceInfo = [{
      key: "Redirect",
      desc: "網(wǎng)頁(yè)重定向的耗時(shí)",
      "value(ms)": t.redirectEnd - t.redirectStart
    },
    {
      key: "AppCache",
      desc: "檢查本地緩存的耗時(shí)",
      "value(ms)": t.domainLookupStart - t.fetchStart
    },
    {
      key: "DNS",
      desc: "DNS查詢的耗時(shí)",
      "value(ms)": t.domainLookupEnd - t.domainLookupStart
    },
    {
      key: "TCP",
      desc: "TCP鏈接的耗時(shí)",
      "value(ms)": t.connectEnd - t.connectStart
    },
    {
      key: "Waiting(TTFB)",
      desc: "從客戶端發(fā)起請(qǐng)求到接收響應(yīng)的時(shí)間",
      "value(ms)": t.responseStart - t.requestStart
    }, {
      key: "Content Download",
      desc: "下載服務(wù)端返回?cái)?shù)據(jù)的時(shí)間",
      "value(ms)": t.responseEnd - t.responseStart
    },
    {
      key: "HTTP Total Time",
      desc: "http請(qǐng)求總耗時(shí)",
      "value(ms)": t.responseEnd - t.requestStart
    },
    {
      key: "First Time",
      desc: "首包時(shí)間",
      "value(ms)": t.responseStart - t.domainLookupStart
    },
    {
      key: "White screen time",
      desc: "白屏?xí)r間",
      "value(ms)": t.responseEnd - t.fetchStart
    },
    {
      key: "Time to Interactive(TTI)",
      desc: "首次可交互時(shí)間",
      "value(ms)": t.domInteractive - t.fetchStart
    },
    {
      key: "DOM Parsing",
      desc: "DOM 解析耗時(shí)",
      "value(ms)": t.domInteractive - t.responseEnd
    },
    {
      key: "DOMContentLoaded",
      desc: "DOM 加載完成的時(shí)間",
      "value(ms)": t.domInteractive - t.navigationStart
    },
    {
      key: "Loaded",
      desc: "頁(yè)面load的總耗時(shí)",
      "value(ms)": t.loadEventEnd - t.navigationStart
    }]

    console.table(performanceInfo);
  }, 0)
}

window.addEventListener('load', getTiming, false)

• 瀏覽器兼容性
  主流瀏覽器都已經(jīng)支持，詳見(jiàn)瀏覽器兼容性