使浏览器缓存中的HTML文件中的资源无效

Question

假设我有一个HTML页面，例如let betterWords = storyWords.filter(...);，其中包含一个远程JS文件http://mywebsite.com/index.html。

我的HTML文件从不缓存，因为将过期设置为旧日期。但是http://mywebsite.com/source.js会按预期缓存在浏览器中。

但是，每当我更改source.js的内容时，我都想强制所有客户端使浏览器缓存的source.js无效并获取一个新的。从下一次开始，应该再次从浏览器缓存中提供它。

我知道一种方法可能是在文件名中添加版本号或在HTML文件中为其添加查询参数。但是我的页面上有多个这样的资源，我不想全部都这么做。

因此，我想探讨是否有一种方法可以在HTML文件或HTML响应标头中设置一些标记，以使网站的所有缓存资源无效。

Answer 1

处理缓存的方法有很多，可以设置许多标头。 Google Web Fundamentals上有一篇很棒的文章。

我建议您看一下Etag和Last-Modified标头，Etag本质上是一个指纹，因此在下载时，浏览器会跟踪Etag，然后在文件更改时通过Web进行跟踪服务器会生成一个新的Etag并将其与文件关联...因此，当您的浏览器对其进行检查时，它会获取新的Etag并下载文件的新副本，但是如果etag相同，则不会打扰并使用缓存的复制。