I am about to ajaxify my website, but I have observed in some highly ajaxified websites like facebook itself that if you browse for quite some time without refreshing your browser gets slower, respectively more ram is being used and I suppose that is due to javascript "leftovers". It is kind of needless to ask this question if facebook's developers fail to accomplish this but hey, you only lose if you don't try. So the question is "is there a way I can clear variables and listeners from the previous page before loading the new one?". Thank you in advance!
That depends on the browser since each browser does its own Garbage Collection. You can however delete variables and HTML elements and if the GC thinks it can reclaim some memory, it will.
I suggest using some developer tools to actually watch the memory usage in real-time. In Chrome you can create a profile timeline and watch the memory usage grow/shrink. So you can actually see in real-time the effects your code have on memory management.
For testing I like to run cleanup code on a button click so I can know exactly when the code ran and how the memory usage was affected by the code.
And hey, since you're in there playing with dev. tools now, check-out the other tools available to you, they are amazingly helpful.
Related
I'm trying to degub a fairly large application written in jquery mobile and am struggling to pin down a suspected memory leak.
I have been criss-crossing through the app running all functions up and down. all the while server memory usage is ok and all but one page are working fine.
On the page in question (widget heavy product search & order page, using JQM photoswipe, multiview plus a bunch of other plugins) all works well for a while until most of the buttons stop working.
Buttons not reacting tells me I need to check my jquery app manager, which also handles all event bindings. problem is, it's about 90k and I don't really know where to start, so
Question:
are there any tools that can check Jquery/Javascript for potential memory leaks? What else could I do to try and pin down the problem?
Thanks for some insights
You might want to check out some of what the Chrome Developer Tools has to offer. I've done memory profiling and identified some memory leaks that way:
https://developers.google.com/chrome-developer-tools/docs/heap-profiling
https://developers.google.com/chrome-developer-tools/docs/heap-profiling-dom-leaks
I have a touch screen kiosk application that I'm developing that will be deployed on the latest version of Chrome.
The application will need to make AJAX calls to an web service, every 10 minutes or so to pull thru any updated content.
As it's a kiosk application, the page is unlikely to be reloaded very often and theoretically, unless the kiosk is turned off, the application could run for days at a time.
I guess my concern is memory usage and whether or not a very long running setTimeout loop would chew through a large amount of memory is given sufficient time.
I'm currently considering the use of Web Workers and I'm also going to look into Web Sockets but I was wondering if anyone had any experience with this type of thing?
Cheers,
Terry
The browser has a garbage collector so no problems on that. as long as you don't introduce memory leaks through bad code. here's an article and another article about memory leak patterns. that's should get you started on how to program efficiently, and shoot those leaky code.
also, you have to consider the DOM. a person in SO once said that "things that are not on screen should be removed and not just hidden" - this not only removes the entity in a viewing perspective, but actually removes it from the DOM, remove it's handlers, and the memory it used will be freed.
As for the setTimeout, lengthen the interval between calls. Too fast, you will chew up memory fast (and render the page quite... laggy). I just tested code for a timer-based "hashchange" detection, and even on chrome, it does make the page rather slow.
research on the bugs of chrome and keep updated as well.
I would like to see what the JavaScript interpreter is doing in real-time, which line it is reading and which function it is running, because I would like to make a full debug on every little piece of the JavaScript to make it faster. For this I need some tool to tell me what the interpreter is doing exactly, if it is defining a variable, if it's running a function, if it's in a loop, check the current intervals (defined in setInterval).
As far as I know Firebug can't do that.
Check out the javascript tab in Firebug, it's a full debugger. Set a break point and when your code hits that line you will have full debugging access to variables etc. Chrome has similar functionality in the developer tools which are included in a standard install.
If you're looking to do automated monitoring/analysis of your program, check out Chrome's Debugger Protocol. It provides a programatic API. I believe (but could be wrong) that this is what tools like Web Inspector and node-inspector are built on.
If you want something more than what the standard Firebug/Web Inspector interfaces are built on, you're going to have to either use something like this or start hacking on the internals of the V8 and Gecko JS interpreters.
As the other answer says,if you want to go step by step, setting a debug point is the way to go.
But since you seem interested in improving performance you might want to consider optimizing only the true bottlenecks in your application. To see which functions take the most to run, and other statistics you might want to take a look at console.profile() (available both in firebug and chrome).
Here is an example:
console.profile('myProfile');
//some code you want to know more about
console.profileEnd();
You can also start it manually by clicking the Profile button in the Console panel(in firebug)/ Profile panel (chrome)
In Chrome you might want to also take a look at Heap Snapshots (they tell you about memory usage).
What triggers a JavaScript garbage collector to run? Obviously this varies by JS engines, but trying to get a rough idea. Is it only when available memory is below a certain threshold?
Thanks.
It really varies very widely. SpiderMonkey, for example, will GC based on various heuristics about how much memory has been allocated, but the browser embedding also triggers GC in various situations like after enough DOM events have been processed, after a script has run for long enough, some things to do with tabs/windows being closed or loaded, etc, etc. And the heuristics involved have changed wildly between different Firefox releases, and will change again.
And that's all for just one browser.
It varies. Chrome (V8) is simply based on a timer and an activity monitor (it tries not to run when the engine is busy).
This varies per browser and as far as I know you have absolutely no control over it.
Likewise you have no control over when the DOM is getting rendered, which is really annoying if you want to show a loading bar :D
Why do you want to know this?
A web application I am currently working on appears to be leaking memory: with each refresh of a page IE's memory usage goes up and it never releases that memory. Since certain pages are ment to be kept open in a browser and auto-refresh this is quickly turning into a problem.
The application is very javascript-heavy and relies on a combination of old 'plain' javascript code and new JQuery code. I'm looking for tools that would allow me to keep track of the javascript objects and memory allocated but I'm coming up short. Any suggestions?
In some of the newer versions of Chrome you can get a heap snapshot with the built in developer tools.
When working with IE you can use DynaTrace Ajax to get a bunch of diagnostics information.
Sorry for the short answer, but I'm not going to copy pasta what others have written better than me.