8

We need to implement undo functionality for a web editor and want to test how deep the undo history could reasonably go.

The undo data model is a JavaScript array containing 1+ jQuery objects, each of which could contain multiple Base64 images.

How can you measure memory usage of JavaScript objects? Is it possible to monitor memory usage from Chrome?

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 6
    https://developers.google.com/web/tools/chrome-devtools/memory-problems/ – Dom Mar 28 '19 at 21:28
  • @Dom this is an awesome link. Could you post as an answer so you can receive credit? – Crashalot Mar 28 '19 at 23:33
  • Thanks. Sure, I'll follow up in the morning. I recommend also taking a look at this post as well. In particular, the memory metrics section: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#memory – Dom Mar 29 '19 at 06:24
  • 2
    To add up , Here below is the link which has details about the views which would help you in heap profiling and also uncover memory leaks in an application. https://developer.chrome.com/devtools/docs/heap-profiling – redhatvicky Apr 02 '19 at 21:53
  • 3
    Not really an answer to the current question but, don't store as base64 (34% bigger than binary), always use Blobs and if you need to store a lot, then consider using [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), even if it's for a short time only. This will save on disk rather than in memory. – Kaiido Apr 03 '19 at 14:10
  • @Kaiido you're awesome, thanks for the great tip! – Crashalot Apr 04 '19 at 06:26
  • @Dom friendly reminder if you want the bounty! it ends soon! – Crashalot Apr 04 '19 at 06:27
  • @Kaiido it seems IndexedDB browser support is quite good: https://caniuse.com/#feat=indexeddb. so this does seem like a much better solution for the core problem of implementing undo. thanks again! – Crashalot Apr 04 '19 at 23:18
  • @Crashalot unfortunately I'm not able to write up an answer in time, so feel free to award someone else! Hopefully you found the answer you were looking for! – Dom Apr 05 '19 at 00:14
  • 1
    @dom was just waiting for you, thanks for the answer! shame you won't get credit. – Crashalot Apr 05 '19 at 00:17
  • @Kaiido Hi again, have you had issues with user permissions and IndexDB? That's our big concern with using IndexDB vs. browser memory. This SO answer is pretty outdated: https://stackoverflow.com/questions/30872202/indexeddb-user-permissions – Crashalot Apr 14 '19 at 07:11
  • No I never faced this prompt, nor had any client complain about such a prompt (we use it in a systematic way on our product). To make your life simpler, you may want to use localforage library, by Mozilla, which handles very well a lot of cases and fallsback nicely to what it can. – Kaiido Apr 14 '19 at 07:32
  • @Kaiido OK thanks. do you guys use localforage as well or directly work against IndexDB? – Crashalot Apr 14 '19 at 08:04
  • We use localforage. – Kaiido Apr 14 '19 at 08:43

2 Answers2

4

Chrome have a great tool for that. It's based on RAIL model and allows you to quickly detect leaks and even bloats. Just go to chrome's Task Manager (shift + esc) and enable Javascript memory. This tool saved my life, good luck!

Dupocas
  • 20,285
  • 6
  • 38
  • 56
1

There are built in tools in Chrome DevTools that allow you to inspect memory usage.

You can access them via the task manager (Shift+Esc or Main Menu > More tools > Task manager) then right click on Header and enable JavaScript Memory

You can find more info there: https://developers.google.com/web/tools/chrome-devtools/#memory

beegotsy
  • 93
  • 10