Cache HTML Content by storing inside javascript variable in external js file?

Question

I have a web application where the masterPage/template contains some static HTML that never changes but is sent with every request. (a lot of this HTML are hidden elements that are shown after a user does something)

I'm wondering if there is some way of caching it?

I was considering putting the HTML inside a javascript variable and doing a document.write or a jquery $(tag).html(cachedHTML); to get that content. The benefit here is that the javascript file will be cached by the browser and that HTML won't be passed along (speeding up pageload and decreasing bandwith).

Is there a more elegant solution? And if I do go this route, is there an easy way to convert all the HTML to be inside a javascript string without going through the HTML and formatting it? (remove spaces, escape double quotes, etc...) Thoughts?

Thanks!

Update: Here is the YSlow info... does this page seem too large? (There are 3597 DOM elements)

Some notes: In terms of the JS files, there are three main ones jquery, jquery-ui, and my global minified js, the rest are generated by asp.net or things like getsatisfaction

Answer 1

I may be wrong, but to me, it sounds well-intentioned but unnecessary. If your server is configured correctly, the HTML output will be gzipped. If we're not talking about megabytes of HTML, every image on your page will take more bandwidth than the document's markup.

In my experience, the greater worry about really huge chunks of HTML data is how the browser handles it. A 2-3 MB HTML document will take up the hundredfold of memory when finally rendered. If that's the case in your scenario, you may have a design problem at hand that even caching wouldn't solve.