I am building a mobile web app and thinking of the best approach to manage the app pages (say 'full screen views').
When using jQuery Mobile, the heavily used pages are all kept in the DOM. Some other framework (Backbone/Marionette) users suggest having only one page that is split into regions which update on navigation. Since my pages don't have much to share between themselves (even the header/footer changes) this means that the whole page should be rerendered on navigation if removed before.
By quickly playing around with both approaches, I have noticed that the already cached page from the DOM much quicker than rendering it all again and I didn't feel the performance issues while keeping the pages for longer time.
My question is, what is the best approach from your experiences? If the page content doesn't change much or at all, then maybe I should not remove the views. (I am talking of max 10 mid-weight pages). Cheers
I believe the conventional thing to do (and usually the most performant) is to only render enough content to fill the page. If the content cannot be seen, there is little use having it in the DOM.
However, just because that might be the conventional thing to do doesn't mean that it is the best thing for your app. If you are able to achieve noticeably better performance keeping all your content in the DOM then I do not see that as a bad approach.
You may be experiencing performance issues with the conventional approach because you do not have the experience or know-how to improve that approach yet, but you will learn those tricks eventually and that may be the best time to switch to the conventional approach over your more performant approach.