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`);

注意事项

1. 兼容性: performance.timing 在大多数现代浏览器中都是支持的，但在一些较旧的浏览器中可能不可用。
2. 隐私: 由于 performance.timing 可以用于精确测量网络请求的时间，可能会引发隐私问题。因此，某些浏览器可能会限制或修改这些时间戳，以防止指纹识别攻击。
3. 废弃警告: performance.timing 的某些属性在未来的浏览器版本中可能会被废弃，建议使用 PerformanceNavigationTiming 接口来获取更详细的性能数据。

替代方案

如果你需要更详细和准确的性能数据，可以考虑使用 PerformanceObserver 和 PerformanceNavigationTiming 接口：

new PerformanceObserver((list) => {list.getEntries().forEach((entry) => {console.log(entry.name, entry.startTime, entry.duration);});
}).observe({ entryTypes: ['navigation'] });

这将提供更丰富的性能数据，并且更加符合现代 Web 性能测量的最佳实践。