How to deal with memory leak in EmberJs?


#1

I opened my application, and switched between different pages, then I found that the reaction of the page became slow. For example, when I clicked a button, there was an obvious delay before the event got handled. Why did this happen? Is it because I binded event handlers in didInsertElement? When I jumped to another page, did the event handler got destroyed for the previous page? If not, how could I solve this issue? Thank you


#2

You can try adding actions to controllers or routers instead.


#3

@hwoarangzk When you bind an event in didInsertElement, you need to tear down the event in willDestroyElement .

Hence unbind your events in willDestroyElement function. So when you navigate to another route it will go into willDestroyElement and unbind all your events related to the route.


#4

Right.

But I think this might be something else, even if you bind a lot of events in didInsertElement, it should not drag down the perf much.

Have you used memory inspector to see if it is really memory causing the issue? If it is memory, it should cause a gc at some point and the perf should go back normal.


#5

I didn’t use memory inspector, any tool recommended? Firefox and Chrome are the only browsers supported in my app. Thanks


#6

These are two helpful guides on inspecting memory leaks in the Chrome Dev Tools.

https://developer.chrome.com/devtools/docs/heap-profiling