Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery or javascript to find memory usage of page

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.
like image 418
Tauren Avatar asked Mar 27 '10 17:03

Tauren


People also ask

How check memory usage in JavaScript?

To programmatically get memory usage in Chrome with JavaScript, we can use the window. performance. memory property. to log the current memory usage in Chrome.

How do I see memory usage on a website?

The Task Manager is a realtime monitor that tells you how much memory a page is currently using. Press Shift+Esc or go to the Chrome main menu and select More tools > Task manager to open the Task Manager. Right-click on the table header of the Task Manager and enable JavaScript memory.

How do I check memory usage?

Check resource usage in Task ManagerCtrl + Shift + Escape. Ctrl + Alt + Delete, and then click Task Manager from the options presented.

How do I check memory node JS?

memoryUsage() method is an inbuilt method of the process module that provides information about the current processes or runtime of a Node. js program. The memory usage method returns an object describing the memory usage in bytes of the Node.


2 Answers

2015 Update

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 window.performance).

window.performance.memory

Browser support: Chrome 6+


2012 Answer

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.

Another aspect that makes it hard to estimate your memory requirements correctly is that different browsers may allocate memory differently (for Javascript objects and DOM elements).

like image 173
25 revs, 4 users 83% Avatar answered Sep 27 '22 18:09

25 revs, 4 users 83%


You can use the Navigation Timing API.

Navigation Timing is a JavaScript API for accurately measuring performance on the web. The API provides a simple way to get accurate and detailed timing statistics—natively—for page navigation and load events.

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


Recommended reading

  • Measuring page load speed with Navigation Timing
like image 44
Sindre Sorhus Avatar answered Sep 27 '22 16:09

Sindre Sorhus