jquery - Does this javascript pattern encourage memory leaks? -
i finding myself rather confused regarding javascript garbage collection , how best encourage it.
what know related particular pattern. not interested in whether pattern considered or bad idea, interested in how browsers garbage collector respond, i.e references freed , collected or cause leaks.
imagine pattern:
test = { init : function(){ this.cache = { element : $('#element') }; }, func1 : function(){ this.cache.element.show(); }, func2 : function(){ test.cache.element.show(); }, func3 : function(){ var self = this; self.cache.element.show(); }, func4 : function(){ var element = this.cache.element; element.show(); } func5 : function(){ this.auxfunc(this.cache.element); } auxfunc1 : function(el){ el.show(); } func6 : function(){ var el = getelement(); el.show(); } getelement : function(){ return this.cache.element; } } now imagine on page load test.init() called;
then later @ various times various functions called.
what know if caching elements or objects or else upon initialization , referring them throughout lifetime of application, in manner shown above, effects browsers garbage collector positively or negatively.
is there difference? method best encourages garbage collection? cause leaks? there circular references? if where?
this code, in itself, shouldn't cause memory leaks. not in modern browsers. it's object, have tons of others in script. depends on where, how, , how long reference it.
the basic rule that, whenever object no longer referenced anywhere in code (directly/by variable or indirectly/ through closure accessing scope), gc flag , swipe.
if use above code, , assign else test object literal referenced gc'ed, if no other variable references original object.
of course, predicting memory leaks in js inexact science. in experience, they're not common have believe. firebug, chrome's console (profiler) , ie debugger along long way.
some time ago did more digging matter resulting in question. perhaps links, , findings helpful you...
if not here's couple of tips avoid obvious leaks:
- don't use global variables (they don't leak memory permanently, so, long script runs).
- don't attach event handlers global object (
window.onload==> leaks mem in ie <9 because global object never unloaded, hence event handler isn't gc'ed) - just wrap script in huge iife, , use strict mode whenever possible. way, create scope can gc'ed in entirety on unload.
- test, test , test again. don't believe every blogpost read on subject! if issue last year, needn't case today. answer might not 100% accurate anymore time read this, or because morning miracle-patch js gc'ing written erm... paris hilton or other alien life-form.
oh, , answer in-comment question: "but concerns me if each time call this.cache.element, creating new reference within functions scope on top of original cache reference not garbage collected?"
answer no. because this reference test object, , init function assigns object property cahche, in object literal 1 property referencing jq object. property (cache) , accessible through sit in memory right until either delete test.cache or delete test. if create var cahce = {...}; object gc'ed when ini function returns, because variable cannot outlive scope, except when you're using closures , exposing variables indirectly.
