How to find memory used by a chrome tab using javascript

Question

In a web application which loads large amount of data crashes when it exceeds a certain limit. So i want to find the memory used by a chrome tab using javascript ie by code to prevent this sort of problem.

Answer 1

here from the source code of the chrome:

// Make the values returned to window.performance.memory more granular and more up to date in shared worker. Without this flag, the memory information is still available, but it is bucketized and updated less frequently. This flag also applys to workers. const char kEnablePreciseMemoryInfo[] = "enable-precise-memory-info";

So you need the --enable-precise-memory-info flag to get a more dynamic and accurate result. For security reasons, Google Chrome doesn't provide precise information via performance.memory by default. You can see here https://github.com/paulirish/memory-stats.js/tree/master a good way to monitor the memory. But this is not a good solution even if you have control over the way the user runs the "site". You can't be sure where Chrome will crash or how accurate is the data.

A first solution would be to make a global factory pattern that counts all the new objects and have some predefined size for each and when the size reaches a certain number you can alert the user. Be careful in that way you don't count the bound events. You can try and add the events in the same factory (or better another) but I don't know how accurate this will be.

A second solution, and better solution is this example. A great example, with 500,000 records with fast response and low memory. How? Easy, just load the data the user sees and nothing else. When the user scrolls it finds the right data without loading all the rest. That's something you can do with something that take many memory.

Answer 2

We recently faced same problem.
You can use web performance API for to check current total memory allocation.
window.performance

It allows web pages to access to certain functions for measuring the performance of web page. There is a non-standard extension available only for chrome to record memory information.

window.performance.memory

It will return you following information.

• usedJsHeapSize : total amount of memory being used by JS objects including V8 internal objects,
• totalJsHeapSize : current size of the JS heap including free space not occupied by any JS objects

Also there is a js library available for recording memory stats. (https://github.com/spite/memory-stats.js)

Please checkout this as well. It might help you. - https://developer.chrome.com/devtools/docs/javascript-memory-profiling

Answer 3

I used something like this (I used ts-ignore becasue memory is not standardized for performance type ):

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

Then you can use it in your html

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

BUT!!! But this does not get full RAM usage. I guess that's values shows only JavaScript VM usages (but this is not accurate). Anyway, in my case, totalJSHeapSize shows 180 Mb, but realy tab RAM usage is 2,5 Gb :D