Recently, I was tasked with hunting down a memory leak in our Ember app. After a day or so, I've come to conclude that Ember is leaking seemingly the entire container after each route transition.
I made a toy app to demonstrate this, which you can find here: http://ift.tt/1LHWaCL
Overview:
In the app, there's route1 and route2.
Route1.hbs looks like this (it links to route2, and has some text):
{{#link-to 'route2'}}Next{{/link-to}} <-- Click that guy
...some instructional, completely non-dynamic text...
Route2.hbs looks like this:
{{#link-to 'route1'}}Go back{{/link-to}} <-- Now click that guy
As you can see, this is not far from a "hello world" app.
The bug:
- Open up chrome dev tools
- Go to the timeline view
- Capture memory
- Start recording
- In the app, click the links to move from route1 to route2 and back again a couple dozen times
- Stop recording, and notice the DOM node count just kept climbing through you recording. If you start a new recording, the DOM node count will start high (that is to say, Chrome isn't cleaning up between recording sessions).
Does anyone know if there's anything I can do about this? In the toy app the consequences are fairly small, but in our real app it is leaking nontrivial components, and sucking up 500kb-1mb of memory per transition. The toy app also has a extremely-leaky version (commit 4fd324f829) where a big 500-element component leaks on every transition.
Leaks in firefox too, so it's not just a chrome thing.
Green is DOM node count, blue is JS heap size. If you add a sizable component, then the DOM node count grows proportionally.
Aucun commentaire:
Enregistrer un commentaire