这里来自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条记录,响应速度快,内存占用低。怎么做?很简单,只加载用户看到的数据,而不加载其他任何数据。当用户滚动时,它会找到正确的数据而不加载所有其他数据。这是您可以使用需要大量内存的东西所能做到的。
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
this.memoryPerformance$ = timer(0, 1000)
// @ts-ignore
.pipe(map(() => window.performance.memory));
但是...这并不能获取完整的RAM使用情况。我猜这些值只显示JavaScript VM的使用情况(但这并不准确)。无论如何,在我的情况下,totalJSHeapSize显示为180 Mb,但实际的标签RAM使用量为2.5 Gb :D - Егор Зенкин我使用类似这样的代码(我使用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