此处来自source code of the chrome：
//使返回到 window.performance.memory 的值在共享工作线程中更细粒度且更新更及时。如果没有此标志，内存信息仍然可用，但它将被存储桶化且更新频率较低。此标志也适用于工作线程。const char kEnablePreciseMemoryInfo[] =“enable-precise-memory-info”;
因此您需要--enable-precise-memory-info标志来获得更动态、更准确的结果。默认情况下，谷歌浏览器不会通过performance.memory提供精确的信息。你可以在这里看到https://github.com/paulirish/memory-stats.js/tree/master是一个监控内存的好方法。但是，即使你可以控制用户运行“网站”的方式，这也不是一个好的解决方案。我不确定Chrome浏览器会在哪里崩溃，也不知道数据有多准确。
第一个解决方案是创建一个全局的factory pattern来计算所有的新对象，并且每个对象都有一个预定义的大小，当大小达到一定的数量时，你可以提醒用户。注意不要计算绑定的事件。你可以尝试在同一个工厂（或者更好的另一个工厂）中添加事件，但是我不知道这会有多精确。
第二个解决方案，也是更好的解决方案是this example。一个很好的例子，有500，000条记录，响应速度快，内存少。怎么做？很简单，只加载用户看到的数据，其他什么都不加载。当用户滚动时，它会找到正确的数据，而不加载所有其他数据。这是你可以用占用大量内存的东西来做的事情。

我们最近面临同样的问题。
您可以使用Web性能API来检查当前的总内存分配。
window.performance
它允许网页访问某些函数来测量网页的性能，有一个非标准的扩展只对chrome可用，用来记录内存信息。
window.performance.memory
它将返回以下信息。

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

此外，还有一个js库可用于记录内存统计信息。（https://github.com/spite/memory-stats.js）
也请检查一下这个。它可能会对你有帮助。-https://developer.chrome.com/devtools/docs/javascript-memory-profiling

我使用了如下代码（我使用了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>

但是！！！但是这并没有得到全部的RAM使用。我猜这个值只显示JavaScript VM的使用（但这并不准确）。无论如何，在我的例子中，totalJSHeapSize显示180 Mb，但实际的标签RAM使用是2.5 Gb：D