如何访问网页中每个资源的性能对象?

问题描述

我可以在 Chrome 开发者工具中看到网页中所有资源的加载时间、从服务器获取特定资源所需的时间以及其他信息.

I can see, in Chrome Developer tools, loading time, time it took to get a particular resource from server and other info, for all of the resources in a webpage.

我想使用 JavaScript 捕获这些统计信息.怎么可能?

I want to capture these stats using JavaScript. How is it possible?

有 window.performance 对象可用，但仅适用于请求的页面，而不适用于页面资源.有没有办法访问所有页面资源的性能对象.

there is window.performance object available, but only for the requested page, not for page resources.Is there any way to access performance object of all of the page resources.

推荐答案

您应该能够使用 window.performance.getEntries() 以获取特定于资源的统计信息:

You should be able to use window.performance.getEntries() to get resource-specific stats:

var resource = window.performance.getEntries()[0];

console.log(resource.entryType);  // "resource"
console.log(resource.duration);   // 39.00000000430737
console.log(resource.startTime);  // 218.0000000007567

来自上述链接的示例:

这篇关于如何访问网页中每个资源的性能对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！