Question

So I noticed my application getting slow after some extended usage. Particularly when I create many views that are each items in a long list. I had thought that by removing these views with view.remove() would help remedy the problem but while they are removed from the page, I noticed that Chrome’s Timeline shows that my DOM Node Count does not reduce. Each view I add continues to grow this count. As a matter of fact, the only thing that seems to reduce this Node Count is a page refresh.

This doesn’t feel right to me and I feel like I messed up something really elementary since the problem seems to occur with all my views and not just these ones. It just happens much quicker with these view lists since there are so many of them.

Does anyone have any suggestions as to what I should be looking for? What kind of causes can produce this behavior?

I’d provide code but I don’t know what would be helpful.

TL;DR – View.remove() is removing the view from the page, but my DOM Node Count continues to go up and never comes down.

Answer 1

You have a memory leak caused by not cleaning up your views properly.

Read this: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

and this: http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/

You need to do more than just call .remove() on your views. You need to properly destroy all of the events and other bindings that are hanging around when you try to close your views. A common way to do this is to provide a close method on views, which I describe in the first post.

Be sure to read the comment from Johnny Oshika on that first post, too. It points to a great way to implement event cleanup.