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

Question

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

我想使用JavaScript捕获这些统计数据。这是否可能？

虽然有window.performance对象可用于请求的页面，但无法用于页面资源。 是否有办法访问所有页面资源的性能对象。

- srikant

---

我认为大部分性能信息都保存在后台。我建议向Google请教一下。 - Shawn31313

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

以下是来自上述链接的示例：

（注：此文本为中英混排，请确认可读性）

- Jonathan Lonowski

---

我尝试了这个，但总是得到以下错误TypeError: Object #<Performance> has no method 'getEntries'，我正在使用Chrome版本22.0.1229.94和Firefox 22.0。 - srikant

@user989512 相关规范仍在变化中，并于五月份进行了更改。不过，Chrome 28似乎支持它。 - Jonathan Lonowski

谢谢Jonathan，我已经升级到Chrome 28版本了，现在可以正常工作了 :-) - srikant

Jonathan，希望你能回到这个帖子。我想知道“duration”究竟代表什么。它是资源的实际“加载时间”。对我来说不太清楚，就像你上面的示例中getEntries（）[0] - 它实际上需要39ms才能加载吗？ - james emanon

如果您想获取资源，应该使用 getEntriesByType('resource')，因为其他类型都会被跟踪（render、composite、mark等）。 - Rudie

@JonathanLonowski 你好！问题能否请您看一下，因为这在Vue.js上不起作用。 - Mohammad Basit

Answer 2

最新版本的chrome - 29.0.1547.76 m仍存在一个错误。当您发起xmlhttprequest请求时，比如下载图片，您可以在网络选项卡中看到该资源以状态码200 OK下载，但是performance.getEntries()或performance.getEntriesByName(resourceUrl)没有列出该资源条目。当页面加载完成并在控制台中评估performance.getEntriesByName(resourceUrl)时，它会正确地列出。因此，在Chrome中填充性能条目时存在延迟？在IE10中，这完全正常。

- Mandar Katre

---

Chrome的Bug现在似乎已经修复了... :) - rogerdpack

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)

- Алексей Голубчик

---

参见 https://dev59.com/KoPba4cB1Zd3GeqPxMtK，虽然该方法似乎会在没有访问刚填满的条目的情况下触发 resourcetimingbufferfull，因此它将丢失数据，并且随着更多的条目被丢弃在地面上，事件会不断触发... - rogerdpack