Client performance / having many open tabs vs. replacing contents


I was playing around with Vaadin when I came to think of this performance related issue:

If I have seven(ish) “main tabs”, most of which have several (3 to 6) sub-tabs, some of which in turn contain large forms and lots of different form components, is it better to implement a mechanism which replaces some “main area” (Panel?) contents on tab click, or can the browsers (IE6, especially) handle having a huge DOM tree and the default behaviour of changing css-visibility without noticeable drop in performance - or worse yet - the infamous IE JavaScript unresponsiveness alert?

To my experience, IE6 / IE7 are very slow in such situations, e.g. when handling a large DOM tree and manipulating nodes (even nodes visibility) in it. It causes dribbling of the UI and other not so nice effects, so I’d not recommended to build a huge UI layers inside a single Window if your main target is IE6/7.

Instead, you may split your UI into several parts, where each part will be formed as a separate Window with uri (window name) assigned and added to your application. So you can switch from window to window by navigating to different URL’s in your application, like this:

http://my-server/myapp/main-settings , http://my-server/myapp/db-settings , http://my-server/myapp/cool-settings, etc…

Yes, this will cause page reloads but this will reduce the DOM tree and let IE work a bit faster.


Thanks Dmitri. That’s pretty much what I suspected. :slight_smile:

Indeed! Thanks for the tip; that’s actually a lot better solution in our case, since as a “side effect” that also enables bookmarking, direct linking, and the back/forward button functionality most “regular users” have become accustomed to (since single page web applications haven’t been around long enough). I know those can be implemented also without multiple windows, but in our case that’s a no-can-do since the majority of our customers still use IE6 (sigh).

Yes, IE6 is a great pain and it still popular to be as a corporate standard %/