Is there a way to find out how much memory is being used by a web page, or by my jquery application?
Here’s my situation:
I’m building a data heavy webapp using a jquery frontend and a restful backend that serves data in JSON. The page is loaded once, and then everything happens via ajax.
The UI provides users with a way to create multiple tabs within the UI, and each tab can contain lots and lots of data. I’m considering limiting the number of tabs they can create, but was thinking it would be nice to only limit them once memory usage has gone above a certain threshold.
Based on the answers, I’d like to make some clarfications:
- I’m looking for a runtime solution (not just developer tools), so that my application can determine actions based on memory usage in a user’s browser.
- Counting DOM elements or document size might be a good estimation, but it could be quite inaccurate since it wouldn’t include event binding, data(), plugins, and other in-memory data structures.
Back in 2012 this wasn’t possible, if you wanted to support all major browsers in-use. Unfortunately, right now this is still a Chrome only feature (a non-standard extension of
Browser support: Chrome 6+
Is there a way to find out how much memory is being used by a web page, or by my jquery application? I’m looking for a runtime solution (not just developer tools), so that my application can determine actions based on memory usage in a user’s browser.
The simple but correct answer is no. Not all browsers expose such data to you. And I think you should drop the idea simply because the complexity and inaccuracy of a “handmade” solution may introduce more problem than it solves.
Counting DOM elements or document size might be a good estimation, but it could be quite inaccurate since it wouldn’t include event binding, data(), plugins, and other in-memory data structures.
If you really want to stick with your idea you should separate fixed and dynamic content.
Fixed content is not dependant on user actions (memory used by script files, plugins, etc.)
Everything else is considered dynamic and should be your main focus when determining your limit.
But there is no easy way to summarize them. You could implement a tracking system that gathers all these information. All operations should call the appropriate tracking methods. e.g:
Wrap or overwrite
jQuery.data method to inform the tracking system about your data allocations.
Wrap html manipulations so that adding or removing content is also tracked (
innerHTML.length is the best estimate).
If you keep large in-memory objects they should also be monitored.
As for event binding you should use event delegation and then it could also be considered a somewhat fixed factor.
You can use the Navigation Timing API.
This script (which you can run at any time on any page) will display the current memory useage of the page:
var script=document.createElement('script'); script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js'; document.head.appendChild(script);
I don’t know of any way that you could actually find out how much memory is being used by the browser, but you might be able to use a heuristic based on the number of elements on the page. Uinsg jQuery, you could do
$('*').length and it will give you the count of the number of DOM elements. Honestly, though, it’s probably easier just to do some usability testing and come up with a fixed number of tabs to support.
Use the Chrome Heap Snapshot tool
There’s also a Firebug tool called MemoryBug but seems it’s not very mature yet.
I would like to suggest an entirely different solution from the other answers, namely to observe the speed of your application and once it drops below defined levels either show tips to the user to close tabs, or disable new tabs from opening. A simple class which provides this kind of information is for example https://github.com/mrdoob/stats.js .
Aside of that, it might not be wise for such an intensive application to keep all tabs in memory in the first place. E.g. keeping only the user state (scroll) and loading all the data each time all but the last two tabs are opening might be a safer option.
Perfect question timing with me starting on a similar project!
There is no accurate way of monitoring JS memory usage in-app since it would require higher level privileges. As mentioned in comments, checking the number of all elements etc. would be a waste of time since it ignores bound events etc.
This would be an architecture issue if memory leaks manifest or unused elements persist. Making sure that closed tabs’ content is deleted completely without lingering event handlers etc. would be perfect; assuming that it’s done you could just simulate heavy usage in a browser and extrapolate the results from memory monitoring (type about:memory in the address bar)
Protip: if you open the same page in IE, FF, Safari… and Chrome; and than navigate to about:memory in Chrome, it will report memory usage across all other browsers. Neat!
You can get the document.documentElement.innerHTML and check its length. It would give you the number of bytes used by your web page.
This may not work in all browsers. So you can enclose all your body elements in a giant div and call innerhtml on that div. Something like