通过将javascript变量存储在外部js文件中来缓存HTML内容？答案

【问题标题】：Cache HTML Content by storing inside javascript variable in external js file?通过将javascript变量存储在外部js文件中来缓存HTML内容？
【发布时间】：2010-03-03 00:42:30
【问题描述】：

我有一个 web 应用程序，其中 masterPage/模板包含一些静态 HTML，这些静态 HTML 永远不会更改，但会随每个请求一起发送。（其中很多 HTML 是在用户执行某项操作后显示的隐藏元素）

我想知道是否有某种缓存方式？

我正在考虑将 HTML 放入 javascript 变量中并执行 document.write 或 jquery $(tag).html(cachedHTML);获取该内容。这样做的好处是 javascript 文件将被浏览器缓存并且 HTML 不会被传递（加快页面加载并减少带宽）。

有没有更优雅的解决方案？如果我确实走这条路，是否有一种简单的方法可以将所有 HTML 转换为 javascript 字符串，而无需通过 HTML 并对其进行格式化？（删除空格、转义双引号等...）有什么想法吗？

谢谢！

更新：这是 YSlow 的信息……这个页面看起来太大了吗？（有 3597 个 DOM 元素）

一些注意事项：js文件方面，主要有jquery、jquery-ui和my global minified js三个，其余都是asp.net或者getsatisfaction之类的生成

【问题讨论】：

看 YSlow，你的 HTML 几乎可以忽略不计，只有 10Kb。虽然您的预备缓存很差，但请配置您的服务器以确保 CSS 样式表和图像以及 JS 被缓存。
@The Feast 感谢您的建议...我正在使用 etags 为 css/images/js 设置服务器缓存，但我会看看是否有更多可以优化的方法。我可能会为图像使用 css sprites。
听起来是个好主意，你做对了吗？请注意，谷歌浏览器支持一种编码类型，允许在浏览器端缓存 html 块。它被称为Shared Dictionary Compression over HTTP (SDCH)。据我所知，只有 google.com 用这个编码他们的页面。

标签： javascript html web-applications caching

【解决方案1】：

我可能错了，但对我来说，这听起来是善意的，但没有必要。如果您的服务器配置正确，HTML 输出将被压缩。如果我们不是在讨论 MB 的 HTML，那么您页面上的每个图像都将比文档的标记占用更多的带宽。

根据我的经验，对大量 HTML 数据的更大担忧是浏览器如何处理它。一个 2-3 MB 的 HTML 文档在最终渲染时会占用一百倍的内存。如果在您的场景中是这种情况，那么您手头可能会遇到一个即使缓存也无法解决的设计问题。

【讨论】：

感谢 cmets... 我在上图中发布了页面细分。页面不是那么大，所以你可能是对的，它不会有太大的不同。我担心存在的 DOM 元素的数量……您对优化有什么建议吗？（无论是否面向设计）
@rksprst 缓存不会帮助您处理 DOM 元素，无论它们来自何处，都需要渲染它们。至于 DOM 元素的数量，如果您没有任何速度问题，我不会担心。使用基于 AJAX 的方法可能会更好地加载/保存这些字段，但如果没有有关页面的更多信息，就无法判断。