PerformanceResourceTiming: fetchStart 属性
注意:此功能在 Web Workers 中可用。
fetchStart 只读属性表示在浏览器开始获取资源之前的 timestamp。
如果存在 HTTP 重定向,该属性将返回用户代理开始获取重定向链中最终资源的之前的时间。
与许多其他 PerformanceResourceTiming 属性不同,fetchStart 属性对于跨域请求是可用的,无需 Timing-Allow-Origin HTTP 响应头。
值
在浏览器开始获取资源之前的 DOMHighResTimeStamp。
示例
测量获取时间(不含重定向)
fetchStart 和 responseEnd 属性可用于测量获取最终资源(不含重定向)的总时间。如果你想包含重定向,获取总时间将在 duration 属性中提供。
js
const timeToFetch = entry.responseEnd - entry.fetchStart;
使用 PerformanceObserver 的示例,它会在浏览器性能时间线中记录新的 resource 性能条目时通知。使用 buffered 选项可以访问观察者创建之前的条目。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
});
observer.observe({ type: "resource", buffered: true });
使用 Performance.getEntriesByType() 的示例,它只显示在调用此方法时浏览器性能时间线中存在的 resource 性能条目
js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const timeToFetch = entry.responseEnd - entry.fetchStart;
if (timeToFetch > 0) {
console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
}
});
规范
| 规范 |
|---|
| 资源时序 # dom-performanceresourcetiming-fetchstart |
浏览器兼容性
加载中…