Measuring used JS heap size in chrome
In this lesson we will see how to measure the used JS heap size in chrome. This can be used for various needs from performance debugging to production monitoring of apps.
Yonatan Kra: [00:00] Part of the Chrome performance API is the memory object. Let's see it in use. We'll create a function measureMemory(). Inside, we can console.log(performance.memory.usedJSHeapSize). I'll refresh the browser and click the measureMemory button. It logged the memory currently used in the JS heap.
[00:23] We are more used to measuring memory in MB units, so let's convert the log to MB. I'll refresh the page and click the button again. We see that we have the same measurement but in MB.
[00:37] I'll add a const of arraySize to be of size 25 Mega. I'll use that const to create an array of 25 million ones. I'll copy the log line below the array creation line, go back to the browser to see the results. We can see the two logs, one of around 1 MB and another of around 100 MB after the array was created.
[01:04] I'll copy the array creation and the log again, change the new array's name, refresh the page and click the button again. We can see the expected result, two increases in memory in about the same size.
[01:20] Let's change the input of one of the arrays from integer to float. We'll refresh the page and repeat the same process. We can see that the integer's array takes half the memory of the float's array.
[01:32] Using Chrome's performance memory, use JS heap size, we are able to measure memory used by our app at any stage. It can be used for performance debugging, experimenting or production monitoring of application.