PDA

View Full Version : [UNKNOWN]Orphan memory with extjs examples desktop demo under IE 6/7



meroy
7 Oct 2009, 8:57 AM
Go to this URL:
http://www.extjs.com/deploy/dev/examples/desktop/desktop.html

Run under sIEve

Open and close the Grid Window 30 or so times.
Memory usage increases each time.

Memory usage goes over 100 megabytes after opening/closing the grid window 30 times.
And goes over 160 megabytes when followed by another 30 times of opening/closing the grid window.

What can be done to help reclaim the memory at runtime?
In any event, it's one method of testing garbage collection logic.

Thanks,
M.

meroy
7 Oct 2009, 9:36 AM
Initially, the desktop demo requires about 40 megabytes. Memory consumption increases 4x after opening and closing the grid window 60 times. :(

I am experiencing something similar when dynamically creating tabs which can be closed by the user. The grid dom elements are not completely freed from memory under IE 6/7.

Thanks,
M.

meroy
14 Oct 2009, 6:38 PM
Hello,

Is there any update on this?

I found this link -- a year ago -- problem still persist with IE 6/7.
http://www.extjs.com/forum/showthread.php?t=47954

How would one free up the memory for the desktop demo at extjs.com when opening/closing the grid window multiple times.

http://www.extjs.com/deploy/dev/examples/desktop/desktop.html

The desktop demo at extjs.com is a good test case. What is needed to reclaim the memory during runtime.

Thanks,
Mario

evant
14 Oct 2009, 6:59 PM
As suggested in other threads, there has been marked improvements in memory management.

Have you tried the SVN version?

meroy
15 Oct 2009, 6:48 PM
With the lastest ext-svn r5493, memory management is much better. I tried the test with the desktop demo on closing/opening the grid window 60 times. Previously, memory consumption was 160 megabytes. With r5493, it went down to 72 megabytes. There's still a high number of orphan memory. The memory is only released when changing the url to about:config.

I created a test case. Memory is being released for dynamic forms. Although, I have to use xtype: panel, layout: form. I believe this one is being fixed. Look at: https://www.extjs.com/forum/showthread.php?p=398362#post398362

Unfortunately, SIEve reports memory leaks with grid, especially after hitting the about:config button. Interesting though is that it's not seen with one or 2 grids. But it presents itself after 3 or more grids.

I'm attaching a test-case.zip and a screen shot of what the front-end looks like.

Mario

Edit: Change ext in the header of index.html to point to your ext (5 places). Files are in unix format.
This tool is composed of a card layout having 2 cards. Each card is configured as a tab panel.

Thanks.

evant
15 Oct 2009, 9:33 PM
I'm not seeing the issue with grids. The form issue is being addressed.

However when using the grids, even when I add 10 at a time, it starts at 397 elements. After It gets up to around 5500 elements. After I close it, it gets down to 400 elements in use. Memory usage also drops to pre-opening range.

meroy
15 Oct 2009, 9:36 PM
Hurray !!! Grid components are now being released from memory under IE 6 with ext svn r5496. Forms still need to be configured as xtype: 'panel', layout: 'form' for forms to be released completely. I'm still seeing FORM tags under sIEve when using xtype: 'form'.

I used my tool to test. You have no idea on how happy I am that this is working. It's a new milestone for you guys. Thank you so very much.

Enjoy the screenshot taken. 214 tabs were opened (not all at once). Just do 20 - 30 and right-click and close all. Don't forget, their's 2 cards. Look at both. The multi-row tabbing makes the tool friendly.

There were 0 leaked memory after clicking on about:config. 214 tabs -- I clicked on grids and forms. It's really amazing.

Memory was not released and had leaks with ext svn 5493. Forms worked with 5493 though with xtype: 'panel', layout: 'form'. This is still needed with r5496.

Mario

Edit: I left one grid panel in view. So the count is 900+. But, it goes back down to around 400. It's awesome.

Thanks again.

evant
15 Oct 2009, 9:41 PM
Yeah, Jamie is working on this now, should have it sorted fairly soon.

meroy
15 Oct 2009, 10:14 PM
I can never thank you guys enough for looking into this. Just finished testing the desktop demo. It takes a while to open/close the grid window 60 times. With this one, memory consumption gradually rises. So, I'm not sure if it's the actual desktop demo. It reached about 70 megabytes and stayed there. Ophan count is low though -- about 60. No leaks either.

Interesting though is my test-case tool stayed around 50 megabytes. I stoped after 200+ tabs on opening/closing forms and grids.

Mario

meroy
15 Oct 2009, 11:32 PM
Forgot to mentioned that I'm centering the form buttons because under IE 6, buttonAlign: 'right' does not appear aligned currectly (no right margin). The button placement is fine under Firefox 3.5.3 and Safari 4.0.3.

Thanks again for addressing the memory issue with grids under IE 6.

Mario

jay@moduscreate.com
16 Oct 2009, 10:39 AM
Just out of curiosity, why are you testing on something that was never designed for production use? The desktop is an "example" of what "can be done" with the framework, not something you should test or build your application(s) off of.

meroy
16 Oct 2009, 10:54 AM
That's correct. I'm not building my app based on the desktop demo application. The recent changes to Ext JS has solved many memory related issues when running under IE 6 and 7.

I only looked at the desktop demo afterwards on a search to give them a good test case on the memory related issues under IE especially for grid components. It really was a problem.

Mario

jay@moduscreate.com
16 Oct 2009, 10:55 AM
ah - good to hear ;)

meroy
16 Oct 2009, 11:27 AM
I want to add that it is with great joy to witness IE 6 release the memory used by the grid component(s). I'm creating an app that will have four cards: one for submitting requests (forms), one for searching requests (grid) and tabs for output, one for reports (may use iframe here for printing ease) and one for summary or dashboard kind of thing. The app may run for 5+ hours for some users. It's critical that memory is freed when tabs are closed.

For forms, I have to use this config { xtype: 'panel', layout: 'form', ... } versus { xtype: 'form', ... }. Jamie is working on this. IE 6 is not releasing the 'FORM' tag elements and is seen under sIEve.

The great news is that it is possible to create a Web 2.0 driven app utilizing Ext JS to run for 5+ hours without having to worry about memory consumption rising to 500+ megabytes by the end of the day.

Using my test-case tool and not based on the desktop demo, I stopped after 200+ tabs (20 - 30 at a time, then close all). IE memory consumption was low with svn r5496.

The attachment test-case.zip is found here:
http://www.extjs.com/forum/showthread.php?p=398575#post398575

The result is seen here:
http://www.extjs.com/forum/showthread.php?p=398591#post398591

Thanks all for addressing the memory related issues seen under IE 6 and 7.

Mario

Jamie Avins
16 Oct 2009, 12:01 PM
Thanks for the support, it's nice to hear the effort we're making to address the memory issues is paying off. I'll check on the form tag itself and give you an update.

meroy
19 Oct 2009, 8:39 AM
Will the updates made by javins r5494 - r5496 be included in the next Ext JS release 3.1?

Thanks.

Jamie Avins
19 Oct 2009, 10:21 AM
There's more than those, but yes they are slated for 3.1. Quick update on the use of xtype: form. The orphans are only showing up when there's a tabpanel as a child panel of the form. I like your testing tool though.

meroy
19 Oct 2009, 12:33 PM
Thanks. In form-configs.js, change id: 'bio2' to name: 'bio2'. This one was missed.

Jamie Avins
20 Oct 2009, 7:32 AM
SVN 5525 now includes a fix to properly add and remove the anchor tag events from the default item template in TabPanel. This will allow the form element to cleanly leave the dom in IE.

meroy
20 Oct 2009, 10:28 AM
This is the best I've seen garbage collection under IE 6 and 7 thus far. This is quite amazing.

For the first form definition in form-configs.js, I changed from layout: 'form' to xtype: 'form'. This form doesn't have an embedded tab.

In index.html, I changed:
c.add(formConfigs[newTabCount % 2]);
to:
c.add(formConfigs[0]);

Unfortunately, the FORM tag element is not being released by IE. Almost there though.

I still need to resort to using { xtype: 'panel', layout: 'form', ... } for memory to be released when the tab is closed.

I ran diff -r against svn.ext-5524 and svn.ext-5525 to see the changes made. It's interesting.

Thanks Jamie for bringing GC to this level under IE.

Jamie Avins
21 Oct 2009, 11:00 AM
Can you send the latest version of your test code, I am not able to duplicate the issue on my side at the moment. Also, ext-core svn78 and 80 clean up some core leaks.

meroy
21 Oct 2009, 6:54 PM
I'm able to reproduce the FORM tag not being freed and released under sIEve with IE 7 using Ext r5529 and core 80.

Using test-case.zip from post #5 of this thread with the following changes:

## resources/form-configs.js



// xtype: 'panel', // commented 2 lines for form config 1 -- lines 12 and 13
// layout: 'form',
xtype: 'form', // set xtype to 'form' -- for testing the GC of the FORM tag element


## index.html



// c.add(formConfigs[newTabCount % 2]); // line 307 -- change to the following
c.add(formConfigs[0]);



That was it. I then pulled up the test-case tool and clicked on "Add 10 forms", then right-clicked on "Card tabPanel One" and selected "Close Other Tabs". I waited pass the 30 seconds -- the FORM tag elements remain under sIEve.

At work, I believe the test was done against ext-core 79 and not 80 and with IE 6 (this explains that). However, the above is with ext-core 80 and ext 5529 and IE 7.

I will log into work and pull down svn 5529 again which will pull ext-core 80 and put this in place and try again against IE 6.

Wow.

meroy
21 Oct 2009, 7:08 PM
I just want to express my thanks to you for your efforts on the GC cleanup updates you've made recently to Ext in SVN in the last 2 weeks. What a difference it has made. Today, I've benchmarked the closing of 20, 40, 60, 80 and 100 tabs to see how IE 6 behaves. Now, it's very unlikely we will have users having 10+ tabs. I just wanted to see the benefit of the changes you've made.

1. With Ext 3.0.2, IE 6 popped up a window stating do you want to continue/stop the javascript if I had more than 21 tabs. I had 40 tabs and 19 remained when the pop up appeared. It may vary depending on the processor speed.

2. With Ext 3.0.3, that number went up to 50+.

3. With the latest SVN, I had 100 tabs and never saw the popup window. The new changes to GC is much faster and is noticeable under IE 6.

4. I tried with Safari and FF as well. Safari is extremely fast. I changed the setTimeout period to 1 at lines 310 and 345 in index.html.

5. It was great to see IE 6 release the memory.

6. The extra memory remaining due to using xtype: 'form' was very little versus using xtype: 'panel', layout: 'form'.

meroy
21 Oct 2009, 7:30 PM
Just verified that at work was using core 79 and not 80. Somehow, must of missed core 80 when acquiring ext 5529. Will test under IE 6 and report back. The FORM tags remaining after closing tabs persist under IE 7 though. This could be that my IE 7 is outdated without the latest patches as that OS is rarely used and is running under Parallels Desktop on Leopard.

Will report back shortly on IE 6 and Ext 5529 / Core 80.

meroy
21 Oct 2009, 8:02 PM
Ok... Ensured cached clean up under IE 6. Put in place Ext 5529 w/ Core 80. The FORM tag elements remain much longer after 30 seconds. BTW, I'm no longer clicking on the "Call garbageCollector" button in the tool and simply waiting for GC within Ext to run.

So many leaks have been addressed recently. Can u believe it !!! This is great news for developers still having to create apps to run under IE 6/7 and possibly also benefitting other broswers.

Unfortunately, using post #9 as a guide, the problem persist when using xtype: 'form'. The current work around is to use: { xtype: 'panel', layout: 'form', ... } when wanting all elements to be automatically removed/freed by GC when closing the tab.

Jamie Avins
26 Oct 2009, 10:58 AM
Ok... Ensured cached clean up under IE 6. Put in place Ext 5529 w/ Core 80. The FORM tag elements remain much longer after 30 seconds. BTW, I'm no longer clicking on the "Call garbageCollector" button in the tool and simply waiting for GC within Ext to run.

So many leaks have been addressed recently. Can u believe it !!! This is great news for developers still having to create apps to run under IE 6/7 and possibly also benefitting other broswers.

Unfortunately, using post #9 as a guide, the problem persist when using xtype: 'form'. The current work around is to use: { xtype: 'panel', layout: 'form', ... } when wanting all elements to be automatically removed/freed by GC when closing the tab.

Removes them in IE8 but not 6/7 so I'll look into it again with those versions.

meroy
26 Oct 2009, 4:30 PM
Thanks for the update. Just tested on IE 6 against svn 5543 / core 84. The form tag element is not being released. Attached test-case-2.zip. Card panel one will use formConfigs[0] and this form is configured as xtype: 'form'. Card panel two will use formConfigs[1] -- no change to the layout (layout: 'form') except for id: 'bio2' was changed to name: 'bio2'. The logic for runGarbageCollector was updated to match that of garbageCollect in ext-all-debug.js so you don't have to wait 30 seconds for gc to kick in.

Edit: Also, the loop timeout value was changed to 1. Safari 4.0.3 is incredibly fast. FF comes in next. Performance is acceptable under IE. But, Safari is very fast especially when switching card panels (each with 40+ tabs).

meroy
27 Oct 2009, 2:52 PM
I missed this before uploading test-case-2.zip. In the createTabPanel function, I moved deferredRender from defaults: { ... } to layoutConfig: { ... }.



function createTabPanel(config) {
...
layoutConfig: {
deferredRender: true
},
defaults: {
...
},
...
});


Attaching test-case-2a.zip which includes the update above.

Jamie Avins
29 Oct 2009, 11:15 AM
Well, it looks like we ran into an IE6/7 issue with FORM tags. Not sure how much we can do, there were some test cases presented that did some very questionable hacks.

http://ajaxian.com/archives/ie6-leak-on-form-tag

This issue was addressed by Microsoft in IE8 and your tests run there without any DOM leaks.

meroy
29 Oct 2009, 7:05 PM
There's already a big improvement with memory management under IE 6 and the latest SVN. I'd work around what I can and also minimize any sort of hacks to a bare minimum.

For the developers out there using Ext JS and having to QC the app to run under IE 6, don't give up. The latest svn slated for 3.1, for the most part, works quite well. It can be quite frustrating at times, but will remember to not give up.

Has anybody taken sIEve and gone to the other JavaScript UI frameworks out there and run their samples? Only then will you truly appreciate what the Ext folks have accomplished as far as running Ext JS under IE 6.

Ext team: Thanks for all you've done. This thread can be closed.

Jaitsu
30 Oct 2009, 12:39 AM
I'd just like to say it's great news to hear the performance improvements coming under IE, and great work to the Ext team for not neglecting this.