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

Question

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

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

有可用的 window.performance 对象，但仅适用于请求的页面，不适用于页面资源。有什么方法可以访问所有页面资源的性能对象。

Answer 1

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

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

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

来自上述链接的示例：

Answer 2

最新版本的 chrome 仍然存在一个错误 - 29.0.1547.76 m 当您提出 xmlhttprequest 时，假设在下载图像时，您可以在网络选项卡中看到资源已下载，状态码为 200 OK，但 performance.getEntries () 或 performance.getEntriesByName(resourceUrl) 没有列出资源条目。当页面加载完成并且您在控制台中评估 performance.getEntriesByName(resourceUrl) 时，它会正确列出。那么，在性能条目中填充资源条目时，chrome 会出现延迟吗？在 IE10 中，这工作得非常好。

Answer 3

window.performance.getEntries() 可能不会返回所有资源。在缓冲后一些记录消失后需要在它发生之前检查它

---

头部代码部分

var storedEntries = [];
var updateStoredEntries = p => {
  storedEntries.concat(
    p.getEntries().filter(rec => /yourRegExp/.test(rec.name))
  )
};
performance.addEventListener('resourcetimingbufferfull', e => {
  updateStoredEntries(e.target)
});

...后面的部分

updateStoredEntries(performance)