如何告诉浏览器在HTML文档中缓存特定元素

Question

我使用php生成输出。我一直在阅读有关在浏览器中缓存HTML元素（例如图像、文本）的内容，以便这些元素不必重新加载。

然而，我没有找到正确的指导方向来完成它。就像“简单地缓存您想要的元素，然后完成！” - 很好，但是我该如何缓存像这样的东西：

<div id="ubiquitous_heading">
    <img src="logo.png" alt="logo" />
    <span>Welcome to this dummy website</span>
</div>

是否有一种可以针对HTML元素并指定缓存和不缓存内容的标头呢？ 我指的是类似于以下结构的东西：

#ubiquitous_heading {
   cache: yes;
}
#no_cache_please {
   cache: no;
}

有没有一种方法可以做到这一点？当人们说“你可以缓存HTML中的特定元素”时，他们到底是什么意思？这包括每个元素（包括链接到CSS、JS的元素）。

感谢您为我澄清这一点。

- Gal

Answer 1

你只能缓存HTTP请求的响应，而不能缓存其中的部分内容。理论上，你可以在框架中放置一个共享的头部并将其缓存，但通常会更加混乱且不值得麻烦。你可以和应该缓存的是图片、脚本和样式表；通常来说，所有外部资源都是静态的，需要在单独的请求中获取。

- Max Shawabkeh

---

我明白，但您能否详细说明如何缓存这些图像、js、css文件呢？是类似于<img cache="cache" />这样的东西吗？ - Gal

你需要在服务器端完成这个任务。在 Apache 中，你可以通过服务器配置或 .htaccess 使用 mod_expires 或类似的模块，或者你可以动态编写程序语言中的头信息（例如在 PHP 中使用 header() 函数）。 - Max Shawabkeh

Answer 2

只有资源可以被缓存。您的标准Web请求具有以下资源：

• HTML页面
• 脚本文件
• 样式表
• 图片
• 字体（希望很快就会出现！）

所有这些资源都可以被缓存，但是您不能在浏览器级别上缓存资源的一部分（例如样式表中的一个规则或HTML页面中的一个元素）。

- Joel