长治网站建设龙采科技技术支持,上海最近的新闻大事10条,建设银行大厂支行网站,专业做包包的网站performance.timing 是 Web 性能 API 的一部分#xff0c;用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能#xff0c;找出潜在的瓶颈。performance.timing 返回一个 PerformanceTiming 对象#xff0c;该对象包含了多个属性#xff0c;每个…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 性能测量的最佳实践。
