Measuring used JS heap size in chrome

Yonatan Kra
InstructorYonatan Kra
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 4 years ago

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.

egghead
egghead
~ 11 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today