如何使用 performance.measureMemory() API 实现前端可观察性?

How do I use performance.measureMemory() API for frontend observability?

我希望在固定时间间隔内跟踪我们的应用程序/网页在不同客户端上的内存消耗。我的团队希望观察此指标,以了解任何新功能的推出是否会对应用程序消耗的内存产生重大影响,并在出现这种情况时回滚该功能。

我已经阅读了这些来源:

  1. https://web.dev/monitor-total-page-memory-usage/
  2. https://trackjs.com/blog/monitoring-javascript-memory/
  3. https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
  4. https://wicg.github.io/performance-measure-memory/
  5. https://github.com/WICG/performance-measure-memory

首先,如果我们看一下旧的 API:window.performance 用户必须通过使用“--enable-precise-memory-info”标志启动 Chrome 来启用准确的内存监控。对我来说,期望我们的用户使用此标志 运行 Chrome 似乎不合理。

我还读到这个 ​​API 可能会高估或低估内存消耗,因为它衡量 JavaScript 堆的大小,如果有 iframe 或服务工作者启动一个不同的堆,或者是否有任何大型网页位于同一堆上。

由于这两个原因,对于生产中真实客户端的前端可观察性目标,此选项不是有效选项 (imo)。

其次,如果我们看一下新的API:performance.measureMemory()

在 2021 年 1 月之前只能通过原始试用获得(根据我注册令牌时表格告诉我的内容)。

除了在开发机器上进行本地分析之外,这似乎是目前实现上述目标的唯一选择(或者我的假设有误?)。

关于 API 的用法,我有两个问题:

  1. 我们在 2021 年 1 月之后是否有任何替代方案(这将在 1 月之后不可用)?
  2. 我可以通过启用标志 #enable-experimental-web-platform-features 在我的本地进行测试,没有任何问题。我有一个原始试用令牌,如果我将它作为元标记添加到我的 index.html,我的用户是否需要在他们的浏览器上启用任何标志以便我们观察到它?

我联系了 measure memory API w3c specification 的编辑,他非常友善地回复了我。

我现在将通过电子邮件收到的答案发布在这里,以防其他人来找这个:

  1. 我们在 2021 年 1 月之后是否有任何替代方案(这将在 1 月之后不可用)?

我们计划在 Chrome89 发货。出于安全原因,它将由 self.crossOriginIsolated 看守。当前在原始试用版中发布的版本不需要跨域隔离。

  1. 我可以通过启用标志在本地进行测试:#enable-experimental-web-platform-features 没有任何问题。我有一个原始试用令牌,如果我将它作为元标记添加到我的 index.html,我的用户是否需要在他们的浏览器上启用任何标志以便我们观察到它?

如果添加元标记,则用户不需要任何标志。请注意,如果没有 --enable-blink-features='ForceEagerMeasureMemory' ,则可能需要一段时间(最多 20 秒)才能解决带有结果的承诺。那是因为 API 等到下一次垃圾回收执行测量。