使用 JavaScript 获取资源的传输大小答案

【问题标题】：Get transferred size of a resource using JavaScript使用 JavaScript 获取资源的传输大小
【发布时间】：2016-01-26 16:55:10
【问题描述】：

我正在尝试衡量真实网站用户的页面加载性能。为了更好地理解数据，我想根据缓存是否已启动来对数据进行分段。

所以我不需要在加载资源之前知道它是否在缓存中。事后衡量就足够了。

至少在 Chrome 和 Firefox 中，开发工具的“网络”选项卡有一个显示传输大小的列。是否可以使用 JavaScript 获取此信息？

Resource Timing API 似乎有针对这种情况的规定（“如果在本地检索资源，transferSize 必须返回 0”），但 no browser has implemented it yet。

开发工具显示此信息的事实让我想知道它是否可以通过某种方式访问。有什么想法吗？

【问题讨论】：

仅仅因为某些特定浏览器的 DevTools 中可用，这并不意味着这些信息可以通过 JavaScript 获得。但是，在资源计时 API 的情况下，almost all modern browsers 似乎完全支持这一点。因此，您应该能够检索此信息。如果您在使用此 API 时遇到问题，请发布一个最小（非）工作示例，我们可以尝试帮助您解决特定问题。否则这个问题可能会被关闭。
ResourceTiming API 工作正常。我可以为我加载的任何资源获取 PerformanceResourceTiming 实例。但是没有定义属性“transferSize”。这反映在我链接的 MDN 文章中，所有浏览器都被列为“不支持”
好的，那么看起来可以更新 caniuse 以反映这一点。仅供参考，这里似乎是Firefox 和Chromium 的两个相关错误。
感谢 Bugtracker 链接，这很有用。 Firefox 似乎已修复并计划与 Firefox 45 一起发布。我使用 Firefox 开发版对其进行了测试，它的工作原理与宣传的一样。在此功能可用并广泛使用之前，我将继续进行数据分段。如果您想在答案中发布这些链接，我会将其标记为已接受的答案。

【解决方案1】：

虽然 most modern browsers 支持 Resource Timing API，但最近对 Resource Timing API 规范的更改（例如 transferSize 属性）尚未实现。

以下是报告 Firefox 和 Chromium 的相关错误。

正如问题的 cmets 中所提到的，这似乎已在 Firefox 中得到解决，并将在 Firefox 45 中发布。我已确认 transferSize 目前在 Firefox 开发人员版 (v45.0a2) 中可用。

【讨论】：