performance.timing
performance.timing 是 Web 性能 API 的一部分，用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能，找出潜在的瓶颈。performance.timing 返回一个 PerformanceTiming 对象，该对象包含了多个属性，每个属性代表页面加载过程中的某个特定事件的时间戳。
以下是一些常用的 performance.timing 属性及其含义：
navigationStart: 页面导航开始的时间戳。unloadEventStart: 卸载前一个页面的事件开始时间。unloadEventEnd: 卸载前一个页面的事件结束时间。redirectStart: 第一个重定向开始的时间。redirectEnd: 最后一个重定向结束的时间。fetchStart: 浏览器开始获取文档的时间。domainLookupStart: DNS 查询开始的时间。domainLookupEnd: DNS 查询结束的时间。connectStart: TCP 连接开始的时间。connectEnd: TCP 连接结束的时间。secureConnectionStart: 安全连接开始的时间（仅 HTTPS）。requestStart: 浏览器向服务器发送请求的时间。responseStart: 浏览器从服务器接收第一个字节的时间。responseEnd: 浏览器从服务器接收最后一个字节的时间。domLoading: 解析器开始解析 DOM 的时间。domInteractive: DOM 解析完成，但资源（如图片、样式表）可能仍在加载的时间。domContentLoadedEventStart:DOMContentLoaded事件开始的时间。domContentLoadedEventEnd:DOMContentLoaded事件结束的时间。domComplete: DOM 和所有子资源都已完全加载的时间。loadEventStart:load事件开始的时间。loadEventEnd:load事件结束的时间。
示例代码
以下是一个简单的示例，展示如何使用 performance.timing 获取页面加载时间：
// 获取 PerformanceTiming 对象
const timing = performance.timing;
// 计算页面加载时间
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`Page load time: ${loadTime} ms`);
// 计算 DNS 查找时间
const dnsLookupTime = timing.domainLookupEnd - timing.domainLookupStart;
console.log(`DNS lookup time: ${dnsLookupTime} ms`);
// 计算 TCP 连接时间
const tcpConnectTime = timing.connectEnd - timing.connectStart;
console.log(`TCP connect time: ${tcpConnectTime} ms`);
// 计算请求响应时间
const responseTime = timing.responseEnd - timing.requestStart;
console.log(`Response time: ${responseTime} ms`);
// 计算 DOMContentLoaded 事件时间
const domContentLoadedTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
console.log(`DOMContentLoaded event time: ${domContentLoadedTime} ms`);注意事项
- 兼容性:
performance.timing在大多数现代浏览器中都是支持的，但在一些较旧的浏览器中可能不可用。 - 隐私: 由于
performance.timing可以用于精确测量网络请求的时间，可能会引发隐私问题。因此，某些浏览器可能会限制或修改这些时间戳，以防止指纹识别攻击。 - 废弃警告:
performance.timing的某些属性在未来的浏览器版本中可能会被废弃，建议使用PerformanceNavigationTiming接口来获取更详细的性能数据。
替代方案
如果你需要更详细和准确的性能数据，可以考虑使用 PerformanceObserver 和 PerformanceNavigationTiming 接口：
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(entry.name, entry.startTime, entry.duration);
});
}).observe({ entryTypes: ['navigation'] });这将提供更丰富的性能数据，并且更加符合现代 Web 性能测量的最佳实践。