The UI for an application I work on was recently redone with Ext.js and I have noticed the memory usage of IE seems very large when viewing it. Are there known memory issues with Ext.js when using IE?

The UI for an application I work on was recently redone with Ext.js and I have noticed the memory usage of IE seems very large when viewing it. Are there known memory issues with Ext.js when using IE?

• javascript
• memory-leaks
• extjs

• Thanks for all your answers. I will pass them along to the UI developers on my team. – Mr. Will Commented Jun 11, 2009 at 2:10

4 Answers 4

The first thing that jumps out at me in your question is that you are seeing this in IE. My team recently went through the same issue (Extjs on IE). It turns out Ext is not the culprit but rather IE is likely the cause.

A quick Google for 'IE closure memory leak' will find you plenty of explanations, but the basic gist is as follows:

IE uses two separate engines to manage the DOM and JavaScript. When JavaScript makes a call to create a DOM element, the Javascript engine reaches across to the other to create it. If you attach JavaScript to an event on a DOM element, a link is created back from the DOM side to JavaScript side.

The problem lies in the fact that each engine has its own garbage collection and can't see across to the other engine. So circular references are REALLY easy to e across that can eat of large quantities of memory very quickly.

I think that it's quite easy to create memory leaks when programming with ExtJS for non-experienced programmers. This is not ExtJS problem on itself. It's ExtJS programming paradigm which lets programmers to easily make such mistakes.

From my experience I've created memory leak when tried to make a straighforward AJAX chat using ExtJS. When some objects are constantly created within AJAX callbacks (such as datastores, grid manipulations), then these objects are not released and destroyed. There must be special and very clever techniques used to avoid memory leaks with ExtJS, and it's not only related to AJAX or callbacks.

All in all, ExtJS is great library, but it must be used carefully.

As far as I'm concerned, I haven't heard of notable memory leaks in ExtJS. Though I'm sure there have been some, they usually get fixed pretty fast, and the munity is so big that most bugs are known.

Make sure your design is based on individual ponents that you can add and remove when they are no longer needed since most of the time, an ExtJS webpage will only be loaded once and the mem gets filled with the additional ponents you give it. You can free up some mem using Ext.destroy(this.el) once you have finished using a ponent.

Also, make sure you use Firebug to track down any ponent or object that should have been removed.

Check out this thread in their forums which covers a lot of leaks in Ext 2.2 caused by orphaned elements. It seems that Ext 2.2.1 fixed most of them.

The issue is still Open, btw. ;)