我应该在HTML中添加什么以确保用户获得页面的最新版本，而不是旧版本？ [英] What do I put in my HTML to ensure users get latest version of my page, not old version?

问题描述

我有一个主要是静态的HTML网站，由CDN提供服务（向服务器添加一些AJAX），并且确实希望用户的浏览器缓存所有内容，直到更新任何文件，然后希望用户的浏览器获取新版本。

I have a mostly static HTML website served from CDN (plus a bit of AJAX to the server), and do want user's browsers to cache everything, until I update any files and then I want the user's browsers to get the new version.

对于我网站上所有类型的静态文件（HTML，JS，CSS，图像等），我该如何实现？ （HTML或其他地方的设置）。显然，我可以告诉CDN终止它的缓存，因此它是我正在考虑的客户端。

How do I do achieve this please, for all types of static files on my site (HTML, JS, CSS, images etc.)? (settings in HTML or elsewhere). Obviously I can tell the CDN to expire it's cache, so it's the client side I'm thinking of.

谢谢。

推荐答案

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

One way to achieve this is to make use of the HTTP Last-Modified or ETag headers. In the HTTP headers of the served file, the server will send either the date when the page was last modified (in the Last-Modified header), or a random ID representing the current state of the page (ETag), or both:

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 设置为必须重新验证，它会导致浏览器将页面与最后修改的和随其接收的 ETag 标头。在下一个请求中，它将以 If-Modified-Since 和 If-None-Match 发送：

If the header Cache-Control is set to must-revalidate, it causes the browser to cache the page along with the Last-Modified and ETag headers it received with it. On the next request, it will send them as If-Modified-Since and 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 标头，该标头为空：

If the current ETag of the page matches the one that comes from the browser, or if the page hasn’t been modified since the date that was sent by the browser, instead of sending the page, the server will send a Not Modified header with an empty body:

HTTP/1.1 304 Not Modified

请注意，只有两种机制之一（ ETag 或 Last-Modified ），它们都可以独立工作。

Note that only one of the two mechanisms (ETag or Last-Modified) is required, they both work on their own.

的缺点是无论如何都必须发送请求，因此性能优势主要在于包含大量数据的页面，尤其是在Internet连接上ns具有高延迟，该页面仍将花费很长时间加载。 （但它肯定会减少您的访问量。）

The disadvantage of this is that a request has to be sent anyways, so the performance benefit will mostly be for pages that contain a lot of data, but particularly on internet connections with high latency, the page will still take a long time to load. (It will for sure reduce your traffic though.)

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

Apache automatically generates an ETag (using the file’s inode number, modification time, and size) and a Last-Modified header (based on the modification time of the file) for static files. I don’t know about other web-servers, but I assume it will be similar. For dynamic pages, you can set the headers yourself (for example by sending the MD5 sum of the content as ETag).

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

By default, Apache doesn’t send a Cache-Control header (and the default is Cache-Control: private). This example .htaccess file makes Apache send the header for all .html files:

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

---

另一种机制是使浏览器缓存通过发送 Cache-Control：public 页面，但可以动态更改URL，例如通过将文件的修改时间附加为查询字符串（ 12345 ）。仅当仅从Web应用程序内部链接页面/文件时，才真正有可能，在这种情况下，您可以动态生成指向它的链接。例如，在PHP中，您可以执行以下操作：

---

The other mechanism is to make the browser cache the page by sending Cache-Control: public, but to dynamically vary the URL, for example by appending the modification time of the file as a query string (?12345). This is only really possible if your page/file is only linked from within your web application, in which case you can generate the links to it dynamically. For example, in PHP you could do something like this:

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

这篇关于我应该在HTML中添加什么以确保用户获得页面的最新版本，而不是旧版本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！