写一段JavaScript代码,上报当前网页加载相关的性能指标到服务器
时间: 2024-05-12 18:20:42 浏览: 115
网页性能测试
5星 · 资源好评率100%
由于JavaScript无法直接访问浏览器的性能指标,需要使用浏览器提供的API来获取这些数据。以下是一个使用window.performance API上报性能指标的示例代码:
```
// 1. 获取性能指标数据
var perfData = window.performance.timing;
// 2. 计算关键指标
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart; // 页面加载时间
var connectTime = perfData.responseEnd - perfData.requestStart; // 建立连接时间
var ttfbTime = perfData.responseStart - perfData.navigationStart; // 首字节到达时间
// 3. 将数据上报到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/report', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify({
pageLoadTime: pageLoadTime,
connectTime: connectTime,
ttfbTime: ttfbTime
}));
```
在这个示例中,我们首先使用window.performance.timing获取了浏览器性能指标数据,并计算了页面加载时间、建立连接时间和首字节到达时间三个关键指标。然后,我们使用XMLHttpRequest对象将这些指标数据以JSON格式发送到服务器进行上报。在实际使用时,我们可以根据需要扩展这个代码,添加更多的性能指标数据,并根据具体情况选择合适的上报方式。
阅读全文