Javascript：计算传输的总字节数和渲染页面的总请求数？答案

【问题标题】：Javascript: compute total bytes transferred and total requests to render page?Javascript：计算传输的总字节数和渲染页面的总请求数？
【发布时间】：2016-01-06 15:57:29
【问题描述】：

我想跟踪传输的总字节数和总请求数，以在 javascript 中呈现页面。我想从“野外”的真实用户那里收集这些数字，以将它们用于性能监控和报告，因此 YSlow 或 Chrome 的开发工具等工具不适用于此应用程序。

是否有一种“已知的好”方法可以在 javascript 中收集这些数据？我意识到可能存在限制（例如，有关 iframe 在不同域上传输的数据的任何信息都是不透明的）；我可以忍受。

【问题讨论】：

你见过像YSlow这样的东西吗？
请求的确切数量似乎是一个棘手的问题。您至少可以使用 Navigation Timing API 来确定 DOMLoaded、Loaded 的时间，尽管请求的数量仍有待商榷。当然，在隔离环境中，您可以使用浏览器的 F12 开发人员工具进行测试。（不过，这不会让您衡量随机用户 Bob Smith 的表现）
一些内置的浏览器开发工具都有性能工具，包括最新版本的 IE、Firefox 开发版（其他版本不确定）和 Chrome。前面提到的 YSlow 也可以作为插件使用，但即使没有它，也有很多。至少 Chrome 中的网络选项卡在底部有一个摘要，其中包含总请求和传输的字节数，以及面板主体中的请求细分。如果您需要分析 javascript，我实际上更喜欢 IE11 的工具，尽管 Chrome/FF 也可以。
对问题进行了澄清：这是针对“现实世界”监控的，因此需要在实际脚本中进行，以便我可以提交数据（例如通过 navigator.sendBeacon）进行整理服务器。

标签： javascript performance monitoring

【解决方案1】：

您正在寻找浏览器的Performance API，它的创建正是为了完成您感兴趣的事情。
具体来说，您将能够为每个获取的资源获取一个PerformanceResourceTiming 对象，其中还包括number of transferred bytes。

【讨论】：

MDN 将这些 api 标记为已弃用，但不链接到任何现代替代品
@Ferrybig 我没有看到我提到的任何 API 在 MDN 上被标记为已弃用？你具体指的是什么？
在您第一个指向 [Performance API](Performance API) 的链接之后，每个属性后都会显示一个拇指向下图标，并将其悬停会显示“不应再使用此已弃用的 API，但可能仍然有效。 ”。然后它显示了 2 个尚未标准化的属性
@Ferrybig 但它的方法不是，那些是what should be used to get PerformanceResourceTiming entries。

【解决方案2】：

如果你想跟踪ajax请求的数量可以使用ajaxStart，但是对于其他请求图像等JavaScript中没有适当的api，你可以使用浏览器扩展来检测它，但对于web应用程序来说很难

Google 正在开发 octane 和其他一些可用的性能工具，但它不会检测到请求的数量

【讨论】：