页面加载时间统计

0x5c0f 收录于类别 Linux 解决方案和系列运维记事

2023-11-13 2023-11-15 约 870 字预计阅读 2 分钟次阅读条评论 CC BY-NC-SA 4.0

注意

本文最后更新于 2023-11-15，文中内容可能已过时。

js 组件

直接保存为文件,插入到 html 末尾即可(<script src="js/pcheck.js"></script>), 用来统计当前页面的各类加载时间然后推送到远端

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120


// 发送性能数据的方法
function sendPerformanceData(method, data) {
  let apiUrl = "https://webhook.site/7ad141ad-8852-4b31-84bf-e37c2127231b";

  if (method === "POST") {
    // 获取用户所在的ip信息
    // fetch("https://api.myip.la")
    //   .then((response) => response.text())
    //   .then((ipData) => {
    //     let dataToSend = {
    //       performanceData: data,
    //       userIP: ipData,
    //     };
    //     fetch(apiUrl, {
    //       method: "POST",
    //       headers: {
    //         "Content-Type": "application/json",
    //       },
    //       body: JSON.stringify(dataToSend),
    //     })
    //       .then((response) => console.log("Performance data sent:", response)) // 成功发送性能数据后的处理
    //       .catch((error) =>
    //         console.error("Error sending performance data:", error)
    //       ); // 发送性能数据失败时的处理
    //   })
    //   .catch((ipError) => console.error("Error fetching user IP:", ipError));

    fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((response) => console.log("Performance data sent:", response)) // 成功发送性能数据后的处理
      .catch((error) =>
        console.error("Error sending performance data:", error)
      ); // 发送性能数据失败时的处理
  } else if (method === "GET") {
    // 构建带有性能数据的GET请求URL
    let queryString = Object.keys(data)
      .map(
        (key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key].value)}`
      )
      .join("&");
    let getUrl = apiUrl + "?" + queryString;

    fetch(getUrl, {
      method: "GET",
    })
      .then((response) => console.log("Performance data sent:", response)) // 成功发送性能数据后的处理
      .catch((error) =>
        console.error("Error sending performance data:", error)
      ); // 发送性能数据失败时的处理
  }
}

// 当页面加载完成后执行
window.addEventListener("load", function () {
  // 延迟执行以确保获取准确的时间戳
  setTimeout(function () {
    // 获取页面加载性能数据
    let perfData = window.performance.timing;
    // 计算页面完全加载所需时间
    let pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

    // 构建需要发送的性能数据对象
    let performanceData = {
      dnsTime: {
        value: perfData.domainLookupEnd - perfData.domainLookupStart,
        description: "DNS查询时间",
      },
      redirectTime: {
        value: perfData.redirectEnd - perfData.redirectStart,
        description: "重定向时间",
      },
      domLoadTime: {
        value: perfData.domComplete - perfData.domLoading,
        description: "DOM结构解析时间",
      },
      frontendPerformance: {
        value: pageLoadTime,
        description: "页面完全加载时间",
      },
      ttfbTime: {
        value: perfData.responseStart - perfData.navigationStart,
        description: "读取页面第一个字节时间",
      },
      contentLoadTime: {
        value: perfData.loadEventEnd - perfData.responseEnd,
        description: "内容加载时间",
      },
      onLoadCallbackTime: {
        value: perfData.loadEventEnd - perfData.loadEventStart,
        description: "执行onload回调函数时间",
      },
      dnsCacheTime: {
        value: perfData.domainLookupStart - perfData.fetchStart,
        description: "DNS缓存时间",
      },
      unloadTime: {
        value: perfData.unloadEventEnd - perfData.unloadEventStart,
        description: "卸载页面时间",
      },
      tcpHandshakeTime: {
        value: perfData.connectEnd - perfData.connectStart,
        description: "TCP握手时间",
      },
      domain: {
        value: window.location.hostname,
        description: "当前站点",
      },
    };

    // 调用发送性能数据的方法，传入 'POST' 作为参数
    sendPerformanceData("POST", performanceData);
    // 调用发送性能数据的方法，传入 'GET' 作为参数
    // sendPerformanceData("GET", performanceData);
  }, 0);
});