I experienced problems with a continuously increasing memory footprint when I implemented the following functionality:
In regular interval, a table must be updated with data loaded from a server.
The changed cells in the table should be visualized using the highlight animation.
I implemented this using a grid and a memory store which I reloaded in the background. Once the store was reloaded I refreshed the view and started animations on the changed cells.
I think that the DOM-nodes representing the grid are created every time the view is refreshed. First I used Ext.fly to highlight the cells. This led to an always increasing memory size and DOM-node count since the GC could not collect the global cached DOM-nodes and some memory associated with it. I then changed to Ext.get which led to a constant memory footprint over time.
Still the DOM-node count increased and led to a browser crash. I profiled the usage and found that Ext.fx.manager caches the target DOM-nodes in a global cache (targets). The approach to solve this issue was to remove an animation from the fx queue once the animation terminated. If the queue is empty at that point we also remove the animation target from the global cache which will allow the GC to collect the possibly orphaned DOM-nodes. Below you can see the diff of my change that did the trick. I am not sure if the change has any undesired side effects.
Is there a way to force extjs to clear global caches without reloading?