JQuery or javascript to find page memory usage

Question

Is there a way to find out how much memory is being used by a web page or my jquery application?

Here is my situation:

I am creating a heavy data webapp using the jquery interface and the remaining backend that serves the data in JSON. The page loads once, and then everything happens through ajax.

The user interface provides users with a way to create multiple tabs in the user interface, and each tab can contain a lot and a lot of data. I am considering limiting the number of tabs that they can create, but I thought it would be nice to limit them only after the memory usage has exceeded a certain threshold.

Based on the answers, I would like to make some clarifications:

• I am looking for a solution for execution (and not just tools for developers) so that my application can determine actions based on memory usage in a user browser.
• Counting DOM elements or document size can be a good estimate, but it can be pretty inaccurate because it will not include event binding, data (), plugins, and other in-memory data structures.

Answer 1

2015 Update

In 2012, this was not possible if you wanted to support all major browsers in use. Unfortunately, this is still only a Chrome feature (non-standard extension window.performance ).

window.performance.memory

Browser Support: Chrome 6+

---

Answer 2012

Is there a way to find out how much memory is being used by a web page or my jquery application? I am looking for a solution for execution (and not just tools for developers) so that my application can determine actions based on memory usage in a user browser.

The simple but correct answer is no . Not all browsers provide you with such data. And I think that you should abandon this idea simply because the complexity and inaccuracy of the “manual” solution can cause more problems than it solves.

Counting DOM elements or document size can be a good estimate, but it can be pretty inaccurate because it will not include event binding, data (), plugins, and other in-memory data structures.

If you really want to stick to your idea, you need to separate fixed and dynamic content.

Fixed content does not depend on user actions (memory used by script files, plugins, etc.)
Everything else is considered dynamic and should be your main focus in determining your limit.

But there is no easy way to generalize them. You can implement a tracking system that collects all this information. All operations must invoke the appropriate tracking methods. eg:

Wrap or rewrite the jQuery.data method to tell the tracking system about your data distributions.

Wrap html manipulations to track the addition or removal of content ( innerHTML.length is the best estimate).

If you store large objects in memory, they should also be tracked.

Regarding event binding, you should use event delegation, and then it can be considered a somewhat fixed factor.

Another aspect that makes it difficult to correctly evaluate memory requirements is that different browsers can allocate memory differently (for Javascript objects and DOM elements).

Answer 2

You can use the navigation timing API .

Navigation Time is a JavaScript API for accurately measuring web performance. The API provides an easy way to get accurate and detailed time statistics - initially - for page navigation and loading.

window.performance.memory provides access to JavaScript memory usage data.

Recommended Reading

• Measure page load speed using navigation time

Answer 3

This question is 5 years old, and both javascript and browsers developed incredibly at this time. Since this is now possible (at least in some browsers), and this question is the first result when Google “javascript shows memory usage”, I thought I was proposing a modern solution.

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

This script (which you can run at any time on any page) displays the current memory usage on the page:

 var script=document.createElement('script'); script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js'; document.head.appendChild(script); 

Answer 4

I don’t know how you could find out how much memory the browser is using, but you can use heuristics based on the number of elements on the page. Uinsg jQuery, you could do $('*').length , and it will give you a count of the number of DOM elements. Honestly, although it's probably easier to just do some usability testing and come up with a fixed number of tabs to support.

Answer 5

Use the Chrome Heap Snapshot Tool

There is also a Firebug tool called MemoryBug , but it seems like it is not very mature yet.

Answer 6

If you just want to look at testing, in Chrome on the developer's page there is a way to track memory usage, but don’t know how to do it directly in javascript.

Answer 7

I would like to offer a completely different solution from other answers, namely to observe the speed of your application, and as soon as it falls below certain levels, either show the user prompts to close the tabs, or disconnect new tabs from opening. A simple class that provides such information is, for example, https://github.com/mrdoob/stats.js . In addition, for such an intensive application, it may not be wise to store all the tabs in memory in the first place. For example. saving only the user state (scrolling) and loading all the data every time all but the last two tabs can be more secure.

Finally, webkit developers are discussing adding memory information to javascript, but they got a lot of arguments about what and what should not be revealed. In any case, it is unlikely that this information will be available in a few years (although this information is not very useful now).

Answer 8

Great question when I start with a similar project!

There is no exact way to monitor the use of JS memory in an application, as this requires higher privileges. As mentioned in the comments, checking the number of all elements, etc. It would be a waste of time as it ignores related events, etc.

This will be an architecture issue if a memory leak or unused items persist. Make sure that the contents of closed tabs are completely deleted without lingering event handlers, etc. It would be perfect; Assuming this is done, you can simply simulate heavy usage in the browser and extrapolate the memory monitoring results (type about: memory in the address bar)

Protection: if you open the same page in IE, FF, Safari ... and Chrome; and then go to about: memory in Chrome, it will report the memory usage in all other browsers. Well maintained!

Answer 9

You can get document.documentElement.innerHTML and check its length. This will give you the number of bytes used by your webpage.

This may not work in all browsers. That way you can nest all your body elements in a giant div and call innerhtml on that div. Something like <body><div id="giantDiv">...</div></body>

Answer 10

What you might want to do is have the server track its bandwidth for this session (how many data bytes were sent to them). When they exceed the limit, instead of sending data via ajax, the server should send an error code that javascript will use to inform the user that they used too much data.