javascript - Backbone remove view and DOM nodes - Stack Overflow

admin管理员组

文章数量:1418335

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 es down.

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 es down.

• javascript
• jquery
• dom
• backbone.js

Share Improve this question Follow asked Jul 21, 2012 at 5:13 jmk2142jmk2142 8,58133 gold badges3333 silver badges4747 bronze badges 9

• Did you check if this is reproduce able in other browsers?may be a bug on chrome's web inspector. It is perfectly fine for having less than 1200 Dom nodes when it goes more than that you will have to check which views are not displayed and remove them immediately – Deeptechtons Commented Jul 21, 2012 at 5:24
• 1 Are your views listening to any model or collection events? That could cause leaks through this.el and this.$el in the views. – mu is too short Commented Jul 21, 2012 at 5:31
• @Deeptechtons I wish I were good enough to say it's a Chrome inspector problem, but I'm PRETTY darn sure the weakest link is sitting in front of this puter. ;-) To note, I thought I should clarify that my DOM Elements are being removed. Something like document.getElementsByTagName("*").length results in appropriate count changes depending on whether I add or remove views. I use Derick Baileys zombie removal ideas and each view has a close function, that both removes and unbinds events successfully. So my events drop, views are gone (on surface at least). But the Node Count remains. – jmk2142 Commented Jul 21, 2012 at 5:44
• @muistooshort Yes. My various views do listen to models and collections. I also have an extended close() method which calls both remove() and onClose(). onClose() basically has all the unbind('event') operations to undo any binds I've made to the various models and collections. But could you elaborate on what you mean about leaks THROUGH this.el/$el? – jmk2142 Commented Jul 21, 2012 at 5:48
• 3 If a view is still listening to a model then the model has a reference to the view, the view will have a reference to the DOM element in its el and $el properties. This means that the model has an indirect reference to the element and you have zombies. – mu is too short Commented Jul 21, 2012 at 6:12

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

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

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

and this: http://lostechies./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 mon way to do this is to provide a close method on views, which I describe in the first post.

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

本文标签： javascriptBackbone remove view and DOM nodesStack Overflow