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

Looking at YSlow, your HTML is almost negligible, only 10Kb. Your primed cache is poor though, configure your server to ensure CSS stylesheets and images, and JS are cached. — Pool
– Pool, Commented Mar 3, 2010 at 1:32
@The Feast Thanks for the suggestions... I'm using etags to set server caching for css/images/js but I'll see if there is more that can be done to optimize that. I might use css sprites for the images. — rksprst
– rksprst, Commented Mar 3, 2010 at 1:39
Sounds like a good idea, did you ever get it right? As a note, google chrome has support for an encoding type that allows for caching of blocks of html on the browser side. It's called Shared Dictionary Compression over HTTP (SDCH). Only google.com encodes their pages with this so far as I know. — David d C e Freitas
– David d C e Freitas, Commented Apr 26, 2011 at 13:42

Pekka · Accepted Answer · 2010-03-03 00:45:24Z

3

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.

answered Mar 3, 2010 at 0:45

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rksprst Over a year ago

Thanks for the comments... I posted the page breakdowns in the image above. The page isn't that big, so you're probably right it won't make much difference. I am worried about the number of DOM elements that exist... Do you have any suggestions on optimizations? (be it design oriented or not)

Pekka Over a year ago

@rksprst Caching won't help you with the DOM elements, they need to be rendered no matter where they come from. As for the number of DOM elements, if you haven't had any speed issues, I wouldn't worry about it. You might fare better with an AJAX based approach that loads/saves those fields on demand, but it's impossible to tell without more info about the page.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related