问题
Goal : To improve performance of the app and reduce the loading time.When card is active I am instantiating it and its DOM is created, as deferredRender:true.Now I want to destroy the card as it gets inactive so as to reduce DOM.But I am somewhat facing some issue during removal and again instantiation of the card.
Here is the simple fiddle , i have created based on my layout structure i am following: Card Layout Fiddle
I went through this link,but failed to understand the implemetation.
According to the posted fiddle, 1. As defferedRender:true, second card is not rendered.Fine.
2 .As soon as switch to card2,card1 should be destroyed and its DOM should be cleared,which is not happening.
Please help me out resolve this.If I am going wrong somewhere,help me by pointing to right direction.Thnks.
回答1:
I do not believe that this approach is going to improve the performance. First of all, the most expensive operation in current browsers is the DOM manipulation. Destroy can mean to remove many, many elements if your card is complex, re-create means to insert many, many elements.
Then, if you really want only the active card to be present in the DOM then you don't need card layout because you have only one card and card layout is designed for more cards, one visible at a time. Also, it should be faster to hide the active card and show the inactive than to destroy and re-create.
If you still want to take destroy/create route, use fit layout. It is simpler, can have only one item and it can be a tad faster than card if you destroy/create.
来源：https://stackoverflow.com/questions/24079650/to-destroy-card-when-inactive-and-instantiate-when-active-in-extjs