jQuery or javascript to find memory usage of page
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).
jQuery $.get() Memory Usage
Found out that the browser is just caching the images, but they are being cleaned eventually.
JavaScript memory usage management
Just because you are using AJAX doesn't automatically mean alarm bells with regards to memory usage... you should be more worried about the kind of things that cause memory leaks, and making sure you destruct as well as construct things properly:
- http://javascript.crockford.com/memory/leak.html
- http://nesj.net/blog/2012/04/javascript-memory-leaks/
http://www.ibm.com/developerworks/web/library/wa-memleak/
What is JavaScript garbage collection?
As a rule, in any large system I tend to create a helper constructor that keeps track of all the items I may wish to destroy at a later date or on page unload (event listeners, large attributes or object structures) all indexed by a namespace. Then when I've finished with a particular section or entity I ask the helper system - I call it GarbageMonkey :) - to clear a particular namespace.
- For events it unbinds
- For attributes it unsets
- For arrays / objects it scans and unsets each key and can do so for sub elements too
- For elements it removes and cleans content as much as possible
Obviously for the above to work you need to be wary about leaving variables lying around that can keep a reference to the data you hope to delete. So this means being aware of what garbage collection is, what closures are; and how between them they can keep a variable alive forever!! ..or at least until the browser/tab is destroyed. It also means using object structures rather than vars because you can delete keys in any scope that has access to the object, but you cannot do so for vars.
So do this:
var data = {}, methods = {}, events = {};
methods.aTestMethod = function(){
/// by assigning properties to an object, you can easily remove them later
data.value1 = 123;
data.value2 = 456;
data.value3 = 789;
}
Instead of this:
var value1, value2, value3;
var aTestMethod = function(){
value1 = 123;
value2 = 456;
value3 = 789;
}
The reason being because in the above you can later do this:
var i;
for( i in methods ){ delete methods[i]; }
for( i in data ){ delete data[i]; }
But you can't do this:
delete value1;
delete value2;
delete value3;
Now obviously the above wont protect you from a reference that points directly to a sub element of either methods
or data
. But if you only pass the methods
and data
objects around in your code, and keep tidy with regards to attaching methods as event listeners, then even if you do end up with a rogue reference it should only point to an empty object (after you've deleted it's contents that is).
calculating memory usage in javascript
The JavaScript language and core libraries do not provide a way to view or calculate the memory usage of the runtime.
Your only hope is to find a library (e.g. ActiveX plugin, etc.) which can do it for you. Note that the developer tools of some popular web browsers (Chrome, Firefox, possibly others) provide a memory profiling graphical interface, so perhaps there are programmatic hooks you can find; however, if they exist they almost definitely won't work cross-browser.
Related Topics
Open File Dialog Box in JavaScript
Shiny Slider Input Step by Month
How to Programmatically Click on an Element in JavaScript
How to Intercept Xmlhttprequests from a Greasemonkey Script
"Cannot Use Import Statement Outside a Module" Error When Importing React-Hook-Mousetrap in Next.Js
How to Convert String into Float in JavaScript
Allow Only Numbers to Be Typed in a Textbox
Stop a Youtube Video with Jquery
Rails 4 - Gmaps4Rails - Map Won't Render
How to Change the HTML Content as It's Loading on the Page
Jquery Clone() Not Cloning Event Bindings, Even with On()
Dynamically Loading a Typescript Class (Reflection for Typescript)
JavaScript Double Colon (Bind Operator)
How to Count the Number of Occurrences of Each Item in an Array
Setting Innerhtml VS. Setting Value with JavaScript
Why Does the Promise Constructor Need an Executor
Crbug/1173575, Non-Js Module Files Deprecated. Chromewebdata/(Index)꞉5305:9:5551