mardi 1 septembre 2015

Memory leak on route transition in very simple Ember 1.13 app

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:

  1. Open up chrome dev tools
  2. Go to the timeline view
  3. Capture memory
  4. Start recording
  5. In the app, click the links to move from route1 to route2 and back again a couple dozen times
  6. 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. Timeline screenshot




Aucun commentaire:

Enregistrer un commentaire