Question

我有一个主要是静态HTML网站，从CDN（加上一些AJAX到服务器），并希望用户的浏览器缓存所有内容，直到我更新任何文件然后我想要用户＆＃39 ;浏览器获取新版本。

对于我网站上的所有类型的静态文件（HTML，JS，CSS，图像等），我该怎么做呢？（HTML或其他地方的设置）。显然我可以告诉CDN将其缓存过期，所以它是我想到的客户端。

感谢。

Answer 1

实现此目的的一种方法是使用HTTP Last-Modified或ETag标头。在服务文件的HTTP标头中，服务器将发送上次修改页面的日期（在Last-Modified标头中），或者表示页面当前状态的随机ID（ETag ），或两者兼有：

HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Fri, 18 Dec 2015 08:24:52 GMT
ETag: "208f11-52727df9c7751"
Cache-Control: must-revalidate

如果标头Cache-Control设置为must-revalidate，则会导致浏览器缓存该页面以及随之收到的Last-Modified和ETag标头。在下一个请求中，它会将其发送为If-Modified-Since和If-None-Match：

GET / HTTP/1.1
Host: example.com
If-None-Match: "208f11-52727df9c7751"
If-Modified-Since: Fri, 18 Dec 2015 08:24:52 GMT

如果页面的当前ETag与来自浏览器的页面匹配，或者自浏览器发送日期以来页面未被修改，而不是发送页面，则服务器将发送一个空Not Modified标题：

HTTP/1.1 304 Not Modified

请注意，只需要两种机制中的一种（ETag或Last-Modified），它们都可以自行运行。

这样做的缺点是必须始终发送请求，因此性能优势主要针对包含大量数据的页面，但特别是在具有高延迟的Internet连接上，页面仍然需要很长时间载入。（这肯定会减少您的流量。）

Apache自动generates an ETag（使用文件的inode编号，修改时间和大小）和Last-Modified标头（基于文件的修改时间）用于静态文件。我不知道其他网络服务器，但我认为它会类似。对于动态页面，您可以自己设置标题（例如，通过将内容的MD5总和发送为ETag）。

默认情况下，Apache不发送Cache-Control标头（默认为Cache-Control: private）。此示例.htaccess文件使Apache发送所有.html文件的标头：

<FilesMatch "\.html$">
    Header set Cache-Control "must-revalidate"
</FilesMatch>

另一种机制是让浏览器通过发送Cache-Control: public来缓存页面，但是动态地改变URL，例如通过将文件的修改时间作为查询字符串附加（?12345）。只有当您的页面/文件仅在Web应用程序中链接时才能实现这一点，在这种情况下，您可以动态生成指向它的链接。例如，在PHP中你可以这样做：

<script src="script.js?<?php echo filemtime("script.js"); ?>"></script>

Answer 2

要在客户端实现您想要的功能，您必须在HTML中加载静态文件的URL时更改它们，即更改文件名，添加随机查询字符串，如unicorn.css?p=1234等。自动执行此操作的一种简单方法是使用Gulp等任务运行器，并查看此包gulp-rev。

简而言之，如果您在Gulp任务中集成gulp-rev，它会自动将内容哈希附加到通过管道传输到任务流的所有静态文件，并生成一个JSON清单文件，该文件将旧文件映射到新重命名的文件文件。因此，unicorn.css这样的文件将变为unicorn-d41d8cd98f.css。然后，您可以编写另一个Gulp任务来抓取您的HTML / JS / CSS文件并替换所有网址或使用此包gulp-rev-replace。

应该有大量的在线教程向您展示如何实现这一目标。如果您使用Yeoman，则可以查看我编写的here静态webapp生成器，其中包含Gulp例程。

Answer 3

这是HTML5 Application Cache为您所做的事情。将所有静态内容放入缓存清单中，它将缓存在浏览器中，直到清单文件发生更改。另外，即使浏览器处于脱机状态，静态内容也可用。

对HTML的唯一更改是nodes标记：

<head>

我应该在HTML中添加什么来确保用户获得我的页面的最新版本，而不是旧版本？

3 个答案: