How do you detect memory limits in JavaScript?

by

While it might be possible on some browsers, the right approach should be to decide what limit is acceptable for the typical customer and optionally provide a UI to define their limit.

Most heavy web apps get away with about 10MB JavaScript heap size. There does not seem to be a guideline. But I would imagine consuming more than 100MB on desktop and 20MB on mobile is not really nice. For everything after that look into local storage, e.g. FileSystem API (and you can totally make it PERSISTENT)

UPDATE

The reasoning behind this answer is the following. It is next to never user runs only one application. More so with counting on the browser having only one tab open. Ultimately, consuming all available memory is never a good option. Hence determining the upper boundary is not necessary.

Reasonable amount of memory user would like to allocate to the web app is a guess work. E.g. highly interactive data analytics tool is quite possible in JS and might need millions of data points. One option is to default to less resolution (say, daily instead of each second measurements) or smaller window (one day vs. a decade of seconds). But as user keeps exploring the data set, more and more data will be needed, potentially crippling the underlying OS on the agent side.

Good solution is to go with some reasonable initial assumption. Let’s open some popular web applications and go to dev tools – profiles – heap snapshots to take a look:

  • FB: 18.2 MB
  • GMail: 33 MB
  • Google+: 53.4 MB
  • YouTube: 54 MB
  • Bing Maps: 55 MB

Note: these numbers include DOM nodes and JS Objects on the heap.

It seems to be then, people come to accept 50MB of RAM for a useful web site. (Update 2022: nowadays averaging closer to 100MB.) Once you build your DOM Tree, fill your data structures with test data and see how much is OK to keep in RAM.

Using similar measurements while turning device emulation in Chrome, one can see the consumption of the same sites on tablets and phones, BTW.

This is how I arrived at 100 MB on desktop and 20 MB on mobile numbers. Seemed to be reasonable too. Of course, for occasional heavy user it would be nice to have an option to bump max heap up to 2 GB.

Now, what do you do if pumping all this data from the server every time is too costly?

One thing is to use Application Cache. It does create mild version management headaches but allows you to store around 5 MB of data. Rather than storing data though, it is more useful to keep app code and resources in it.

Beyond that we have three choices:

Of them, FileSystem is most supported and can use sizable chunk of storage.

More Related Contents:

  1. Html h3 tag href [closed]
  2. How to refresh different page if a button was clicked in javascript or jquery
  3. __proto__ VS. prototype in JavaScript
  4. Google Firestore – How to get several documents by multiple ids in one round-trip?
  5. What is the shortest function for reading a cookie by name in JavaScript?
  6. How to detect a textbox’s content has changed
  7. Is there a way to access a javascript variable using a string that contains the name of the variable?
  8. How does += (plus equal) work?
  9. access parent object in javascript
  10. JSON.parse vs. eval()
  11. Executing Javascript from Python
  12. Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)
  13. jQuery jqGrid Show message when an edit row is complete
  14. Open a new javascript window(.open) along with its CSS styling
  15. Calculate Timezone offset only for one particular timezone
  16. How to use google.maps.event.trigger(map, ‘resize’)
  17. How to shorten my conditional statements
  18. What a strange syntax?
  19. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  20. How to show setCustomValidity message/tooltip without submit event
  21. Getting image dimensions using the JavaScript File API
  22. “Usual” functions vs function variables in JavaScript [duplicate]
  23. Chained Select Boxes (Country, State, City)
  24. Is there a C#-like lambda syntax in JavaScript?
  25. using await on global scope without async keyword
  26. JavaScript NTP time
  27. What are the different ways of writing an IIFE? What are their use cases?
  28. Google Directions Api returning 0 routes
  29. What is the difference between Event.target, Event.toElement and Event.srcElement?
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment