HTML cache content by storing internal javascript variable in external js file?

Question

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

I am wondering if there is a way to cache it?

I considered placing HTML inside a javascript variable and executing document.write or jquery $ (tag) .html (cachedHTML); to get this content. The advantage here is that the javascript file will be cached by the browser and that the HTML will not be transmitted (speeding up pageload and reducing bandwidth).

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

Thank!

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

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

Answer 1

, , , . , HTML . HTML, , .

, HTML - , . HTML- 2-3 . , , .