HTML 缓存中单个 URL 需要多个不同的缓存吗?
内容缓存是实现快速流畅用户体验的有效方法。网页中的每个 URL 都可以链接到一个缓存清单部分。但是，某些较大且很少使用的文件会降低缓存的整体速度。由于这些文件无需更改，但每次缓存更新时仍会重新下载，因此最好将这些文件放在具有相同 URL 的不同缓存中。这将提高其速度和性能。
那么，如何拆分 HTML 缓存?在此之前，让我们先了解一下什么是 HTML 缓存。
什么是 HTML 缓存?
缓存是一种存储请求的给定响应，然后在即将到来的类似请求中重用存储的响应的方法。它存在于从原始服务器到 Web 浏览器的整个过程中。
重用存储的响应可以提高服务器的响应速度。它还可以提高硬件的性能。
HTML 缓存正在缓存网页的 HTML 内容。
示例
<!DOCTYPE HTML> <html manifest = "example.appcache" > <body> <h1> This is an example </h1> </body> </html>
缓存类型
HTTP 缓存存储请求和响应，以便在后续请求中重用它们。它有两种类型:共享缓存和私有缓存。
共享缓存
它是一种在原始服务器和多个客户端之间存储数据的缓存。它存储响应，并在所有客户端中重用它。
因此，它不包含个性化内容。
私有缓存
此缓存仅存储客户端的内容。它存储单个客户端用户的响应。因此，开发人员可以在此缓存中存储个性化内容。
缓存控制
缓存控制 http 标头指定了用于管理请求和响应中的缓存数据的指令。
它包含各种指令，例如 no-transform、max-age、no-store、no-cache、private 和 public。下面我们将讨论其中几个。
max-age
它是缓存控制的响应指令之一，指示缓存在响应生成后 X 秒内保持最新状态。
其中，"新鲜"状态告诉浏览器响应仍然有效。因此，它可以被重复使用。而"陈旧"状态则表示响应无效，即已过期。
语法
Cache-Control: max-age = X
示例
Cache-Control: max-age = 856098
s-maxage
这也是一个响应指令，用于声明缓存是新鲜的还是过时的。但是，它仅适用于共享缓存。
示例
Cache-Control: s-maxage = 766498
时间戳
时间戳是文件或日志上记录的时间，指示其内容的添加、修改或传输时间。其参考日期为 1970 年 1 月 1 日(UTC)。
示例
此代码块以毫秒为单位提供时间戳。
Date.now = function demo() { return new Date().getTime(); }
在 JavaScript 中，您可以使用 Date.now()
要获取以秒为单位的时间戳，请将其除以 1000。
示例
function demo() { return Math.floor (Date.now() / 1000); }
注意− Math.floor() 函数用于获取小于或等于给定数字的最大整数。
示例
console.log( Math.floor(5.95));
解决此问题的最佳方法是对清单中"Cache"部分的所有文件使用 max-age，并为"Cache"中的每个文件添加时间戳。
如果其中任何一个文件被修改，清单将更新时间戳。因此，在缓存处理过程中，只有那些具有更新时间戳的文件才会被下载。
示例
首先，让我们创建一个缓存清单文件
<!DOCTYPE HTML> <html manifest = "example.appcache" > <body> <h1> This is an example </h1> </body Cache-Control: max-age =567890> </html>
缓存清单
缓存 −
/example.html /demo.js
结论
妥善处理缓存会对您的网站产生重大影响。缓存可以提高用户界面的速度和性能，即用户享受更快的体验。它还能使网站服务器在相同硬件条件下管理更多网络流量。最重要的是，它经济高效，甚至可以重复提供相同的内容。简而言之，适当的缓存可以为开发人员带来各种好处。
