problem with memory leak

Jan 05 2009

Filed under: xn--cnq77f.com

Hello,

Ive got the problem with memory leak. I use IE engine and when I refresh the page (clicking F5 in IE) the browser has increased the memory by about 500kB to 1MB. Its terrible.
When I remove Your extension to YUI I mean the line:

memory is stable and does not leak.
Have You any idea of how to resolve this problem ?

Peter

Try removing the parens from the typeof.

I don't see any specific code that looks bad.

I synchronized with the latest svn version and rebuilt my yui-ext.js and still have the same problem btw.

Just because the memory increases when you reload a page doesn't indicate a leak. It could indicate IE is caching things. 95% Leaks in IE are created by putting JS Objects on DOM nodes and I never do that. However, if you can point me to a link with the problem, I'd be happy to test it for leaks.

could IE be caching each instance of the JS pulled, due to the fact it's being served via php?
drip reports the same problem on a local copy with normal .js serving.

custom toolbar item with callback, that lauches a dialog that does something.... oh heck, here's the code block.

showCat: function() {
var catCols = [{
header: "Category",
width: 255,
editor: new YAHOO.ext.grid.TextEditor()
}];
var catCm = new YAHOO.ext.grid.DefaultColumnModel(catCols);
catCm.defaultSortable = true;
var catDm = new YAHOO.ext.grid.JSONDataModel({
root: 'Categories',
totalProperty: "totalCount",
id: 'id',
fields: ['category']
});
catDm.initPaging('/ci/admin/profile_fields_categories', 10);
catDm.setDefaultSort(catCm, 0, 'ASC');
catGrid = new YAHOO.ext.grid.EditorGrid('admin_user_fields_categ ories', catDm, catCm);
catGrid.getSelectionModel().clicksToActivateCell = 2;
catGrid.render();

var toolbar = catGrid.getView().getPageToolbar();
toolbar.addButton({
className: 'add',
text: "",
click: YAHOO.whasit.newUserFields.addCat
});

YAHOO.whasit.newUserFields.adminFieldsLayout.begin Update();
YAHOO.whasit.newUserFields.adminFieldsLayout.add(' center', new YAHOO.ext.GridPanel(catGrid, {title: 'Categories', fitToFrame: true}));
YAHOO.whasit.newUserFields.adminFieldsLayout.endUp date();
catDm.loadPage(1);
},
addCat: function() {
if ( typeof(newCatDialog) == "undefined" ) {
if ( !document.getElementById('newCatDialog')) {
var dlgDiv = document.createElement("div");
dlgDiv.id = "newCatDialog";
document.body.appendChild(dlgDiv);
}
newCatDialog = new YAHOO.ext.LayoutDialog("newCatDialog", {
modal:true,
autoScroll:true,
width:300,
height:100,
shadow:true,
minWidth:300,
minHeight:100,
center: {
autoScroll:true,
alwaysShowTabs: false,
autoCreate: true
}
});
var layout = newCatDialog.getLayout();
newCatDialog.beginUpdate();
if ( !newCatPane ) {
var newCatPane = layout.add('center', new YAHOO.ext.ContentPanel('newCatPane', {
fitToFrame: true,
autoCreate: true }));
}
newCatDialog.endUpdate();
newCatDialog.header.update('New Category');
newCatDialog.addKeyListener(27, newCatDialog.hide, newCatDialog);
newCatDialog.addButton('Close', newCatDialog.hide, newCatDialog);
submitButton = newCatDialog.addButton('Submit', YAHOO.whasit.newUserFields.submitCat, YAHOO.whasit.newUserFields.showCat);
newCatDialog.syncBodyHeight();
}
getEl('newCatPane').getUpdateManager().update({url : '/ci/admin/newcat', loadScripts: true});
newCatDialog.show();
},
submitCat: function(){
getEl('newCatPane').getUpdateManager().loadScripts = true;
getEl('newCatPane').getUpdateManager().update({url : '/ci/admin/newcat', params: {catName: document.getElementById('newCatName').value}});
},

I'm also trying to figure out why IE errors on "Object doesn't support this property or method" when that toolbar item is clicked. So far it seems to be something with the line - if ( typeof(newCatDialog) == "undefined" ) { - but I haven't figured it out yet.

first of all, this stuff really *rocks*
i came across this site searching for a grid widget and i found a lot more.

now, i tested:
http://www.jackslocum.com/blog/examples/layout1.htm
with drip to check MSIE memory.

drip does not find any leak, however memory usage increment on every reload by 1M.
it goes like this (Mb): 16,17,18,19...100,101,102.... etc, etc. and memory get freed only restarting drip.

if it is not a leak, why IE keep eating memory on every refresh ?

Did you assign anything to them?

I think that depends on how you handle adding the onclick event. I think there was some discussion about how the yui-ext event model deals with this - not sure if on the blog or here. Here's a article that talks about some of the issues too.

http://javascript.crockford.com/memory/leak.html

This site has a lot of good articles about javascript - Crockford is the guy who created the JSON notation.

I figured it out and posted the fix, as well as a suggestion for show() here - http://www.yui-ext.com/forum/viewtopic.php?t=1124

my site will be updated with the latest version later when I'm ready to push code updates again

As I said, it is probably IE caching page state. Most modern browsers (FireFox and Safari too) not only cache the scripts in the page but also the state of those scripts. This is how they can do quick forward backward navigation etc. If drip says no leaks, chances are there probably aren't any leaks. :)
i know it's MSIE fault 'cause firefox does not have this problem, however:

yui http://img295.imageshack.us/img295/1573/dripnormalyf9.gif yui-ext http://img237.imageshack.us/img237/870/dripyuiextac5.gif

the graph shows that in yui-ext memory usage grows linearly with IE.
it must be something in the library that prevent crappy MS browser to release memory.

jbowman, using legacy event handlers like onclick aren't directly a source of leaks. But if you assign them in javascript where the handler's closure could also be wrapping the same DOM node, there's a high probability for a leak. For example:

function foo(node){
node.onclick = function(){
alert(node.id + ' was clicked.';
}
}

That creates a circular reference that is bad. The onclick function has a closure containing the node, and the node has a property (onclick) that contains the function. This is where the big closure scare came from.

The test page is located at:
http://interpc.pl/~pwywiol/test/splitter.htm
It's almost an empty page (with dblClick on splitter :) implemented by code You sent me).

Try refresh the page to see the memory used by the browser increase. I test it only on IE engine.

I add the purge function to the javascript code. Now the memory leak slowly.

Peter

Ah ok... I downloaded drip. None of my onclick elements seem to have leaks. They are just used to show a dialog. My gridpanel elements which get assigned the class ygrid-wrap-body are showing up as leaks though?

The parens is fine... In fact looking at it, I realized that I wasn't using the autoCreate dialog code you were nice enough to make for me. However, turning that on, I realized that it appears to be broken? Or maybe I upgraded wrong. What I did was use the RC2 yui-ext.js and then after that loaded the new BasicDialog.js to overload it.

If you go to http://whasit.com/ci/ and click on Login and Register in the header, and Logger in the footer, you'll see the craziness.

ok, here is the test

leak test

test

It could be because you are using legacy event handlers. Try using YAHOO.util.Event for load and unload and see if that changes anything.

YAHOO.util.Event.on(window, 'load', yourLoadFcn);
YAHOO.util.Event.on(window, 'unload', yourUnloadFcn);

Inline load and unload handlers aren't cleaned up and could prevent normal cleanup.

could IE be caching each instance of the JS pulled, due to the fact it's being served via php?

on a side note:

95% Leaks in IE are created by putting JS Objects on DOM nodes

Does that include using onClick for dom nodes? If so looks like I am going to need to refactor a lot of my work.

#If you have any other info about this subject , Please add it free.#

edit

cnq77f

Recents articles

Archives

Categories

Links

problem with memory leak