loading table of contents...

6.4.4. Tracing Memory Leaks

Ext JS applications can consume high amounts of memory in the browser. As long as memory is de-allocated when UI elements are disposed, the user has the choice to limit memory usage. But it becomes a problem when there are memory leaks. Fortunately, reloading the application's page (F5), with a few exceptions, frees memory again, but still, frequent reloading is undesirable for the user.

Memory leaks occur when an object is supposed to be no longer used, but undesired references to that object remain that keep it "alive", that is, from being garbage-collected. Such references are called retainers. In an Ext JS applications, such retainers are typically

  • Ext's component manager. It maintains a global list of all active components. See below how to tackle memory leaks cause by the component manager (component leaks).

  • Event listeners. When attaching your event listener function to some object, that object retains the event listener function and every object in the scope of that function, typically at least this.

  • Drop zones. Like for components, Ext keeps a global list of all active drop zones. So when your custom component creates a drop zones, remember to explicitly destroy it together with your component.