如何使用JavaScript查找Chrome标签页使用的内存

Question

在一个加载大量数据的 Web 应用程序中，当超过一定限制时会崩溃。因此，我想使用 JavaScript 代码查找 Chrome 标签所使用的内存，以防止这种问题的发生。

- SHANib

---

在一个加载大量数据的Web应用程序中，当超过一定限制时会崩溃。这些数据是如何加载到文档中的？ - guest271314

@guest271314 我们正在从屏幕后面获取来自不同来源的实时数据... 通过 JavaScript / Ajax。 - SHANib

是的，但为什么浏览器标签会崩溃？是因为循环中的ajax请求吗？ - guest271314

@guest271314 不是在循环中，但数据正在增长。 - SHANib

Answer 1

这里来自Chrome源代码：

// 使共享 Worker 中返回给 window.performance.memory 的值更加细致和实时。如果没有此标志，内存信息仍然可用，但是会分成桶并且更新频率较低。此标志也适用于 worker。const char kEnablePreciseMemoryInfo[] = "enable-precise-memory-info";

因此，您需要使用--enable-precise-memory-info标志以获得更动态和准确的结果。出于安全原因，Google Chrome默认情况下不通过performance.memory提供精确信息。您可以在这里https://github.com/paulirish/memory-stats.js/tree/master看到一个很好的监视内存的方法。但即使您控制用户运行“站点”的方式，这也不是一个好的解决方案。您无法确定Chrome将在何处崩溃或数据有多准确。

第一种解决方案是创建一个全局的工厂模式，计算所有新对象的数量，并为每个对象定义一些预定义大小。当大小达到一定数量时，您可以向用户发出警报。请注意，这种方式不会计算绑定事件。您可以尝试在同一工厂（或更好的其他工厂）中添加事件，但我不知道这样做的准确性如何。

第二种解决方案，也是更好的解决方案是这个示例。一个很好的例子，有500,000条记录，响应速度快，内存占用低。怎么做？很简单，只加载用户看到的数据，而不加载其他任何数据。当用户滚动时，它会找到正确的数据而不加载所有其他数据。这是您可以使用需要大量内存的东西所能做到的。

- Thomas Karachristos

Answer 2

我们最近遇到了同样的问题。
您可以使用Web性能API来检查当前的总内存分配。
window.performance

它允许网页访问某些功能，以测量网页的性能。只有Chrome浏览器才有一个非标准扩展可用于记录内存信息。

window.performance.memory

它将返回以下信息。

• usedJsHeapSize：JS对象使用的总内存量，包括V8内部对象，
• totalJsHeapSize：JS堆的当前大小，包括未被任何JS对象占用的空闲空间

还有一个可用于记录内存统计信息的js库。（https://github.com/spite/memory-stats.js）

请查看此内容。它可能会对您有所帮助。 - https://developer.chrome.com/devtools/docs/javascript-memory-profiling

- Ketan

---

谢谢你的回答...我已经尝试过window.performance.memory，但它的值没有实时变化...还有什么需要做的吗？ - SHANib

@SHANib：只是想正确理解问题。您的Web应用程序是否在页面加载时崩溃？如果是，则应查看在页面加载时创建的对象数量（包括类型）。如果不是，则应尝试使用window.performance.memory记录堆内存分配，直到它崩溃为止。这将为您提供有关js内存分配的更好图片。 - Ketan

我的应用程序在页面加载时没有崩溃。许多活动/操作在该页面中进行，这会导致崩溃。因此，我希望定期检查浏览器是否达到其容量，并通知用户。这不是为了调试，而是向用户发出警报。 - SHANib

@SHANib 你可以这样写（我使用了ts-ignore，因为内存不是性能类型的标准）：this.memoryPerformance$ = timer(0, 1000) // @ts-ignore .pipe(map(() => window.performance.memory));但是...这并不能获取完整的RAM使用情况。我猜这些值只显示JavaScript VM的使用情况（但这并不准确）。无论如何，在我的情况下，totalJSHeapSize显示为180 Mb，但实际的标签RAM使用量为2.5 Gb :D - Егор Зенкин

Answer 3

我使用类似这样的代码（我使用ts-ignore是因为内存性能类型不够标准）：

this.memoryPerformance$ = timer(0, 1000)
      // @ts-ignore
      .pipe(map(() => window.performance.memory));

然后你可以在你的HTML中使用它

<div *ngIf="memoryPerformance$ | async as memoryPerformance">
    total: {{ memoryPerformance?.totalJSHeapSize | humanizeBytes }}<br />
    used: {{ memoryPerformance?.usedJSHeapSize | humanizeBytes }}
  </div>

BUT!!! 但是这并没有充分利用RAM。我猜这些值只显示JavaScript VM的使用情况（但这不准确）。无论如何，在我的情况下，totalJSHeapSize显示为180 Mb，但实际标签RAM使用量为2.5 Gb :D

- Егор Зенкин