Caching data in hidden & dynamic tabs of tabview

In my application, I have groups &开发者_StackOverflow社区; the list of groups specific to a user are shown to him through a left column list, in a similar fashion as google groups(shown in image below).

I want that as the user moves on with switching to different groups shown in the list, the front-end should cache the visited groups, so that next time user comes back to the same group there is no need to read again from the server.

I am thinking of implementing this through dynamically adding hidden tabs to the jquery tabview whenever a new group is visited.

Does this sounds like a good optimization ? Is this kind of optimization used on sites ?

(I would be auto-updating the content of groups after every specified interval so that data shown in the group is most fresh and not just the cached one.)

I'll give you a reason why you shouldn't do this and instead look at HTTP caching. Hopefully you're already a RESTafarian in that you use and understand the basic principles of REST and why HTTP is scalable. There's no need to invest in complex caching schemes with JavaScript if you make sure that your GETs are cached locally, and this is probably what you should be focusing on.

By using the HTTP caching mechanism you can completely eliminate any server round-trips if you so please. Invalidation of cached data can be tricky but for general viewing purposes this is something which is pretty straight forward and it's going to give you really good performance (without increasing the complexity of your existing JavaScript, which I recon that's a good thing).