浏览器是怎么处理.html 文件的缓存的？

[xiaoming1992]

背景描述

我有一个页面，假设是https://www.aaa.com/page.html?key=1，当我修改了page.html文件时，地址https://www.aaa.com/page.html?key=1仍然是原页面（ctrl + F5刷新页面都没用），只有修改链接参数，才能加载出新页面（即使加载新页面后，一旦将地址修改为原地址，页面还会变回原页面）

问题

1. 像这种页面的缓存逻辑，到底是由浏览器还是服务器控制的？
2. 如果我的链接不方便随时更换，如何才能及时的看到更新后的页面？

[ipwx]

1. 都有，甚至中间代理服务器都有参与的份。有一套标准的缓存控制协议，楼主可以搜索 Cache-Control。
2. Chrome：打开开发者工具，就可以在刷新按钮上右键，选“硬加载”或者“清空缓存硬加载”就行。

[ipwx]

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

[xiaoming1992]

感谢 @ipwx，忘了说了，文件是在 cdn 上的，可是用户那边不好搞啊，比方说微信小程序的 webview 页面，难道说只能刷新一下 cdn ？

[Vegetable]

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ

[wmc]

如果你是用 nginx 可以直接设置缓存时间，用 cdn 的话就在每个资源后面都加一串版本号 query 吧……

[MaxTan]

加个时间戳参数

[xiaoming1992]

@ipwx #2 文档很有帮助，感谢

[salmon5]

1，浏览器特性，如果 max-age 和 expires 属性都没有，找找头里的 Last-Modified 信息。如果有，缓存的寿命就等于头里面 Date 的值减去 Last-Modified 的值除以 10 （注：根据 rfc2626 其实也就是乘以 10%）。
https://chromium.googlesource.com/chromium/src/+/lkgr/net/http/http_response_headers.cc#1078
2，nginx 添加 expires epoch;
彻底解决乱七八糟的缓存问题，这个有性能和流量损耗，但是如果 pv 不大，关系不大

[salmon5]

nginx 默认配置 html 默认浏览器缓存时间
https://tools.ietf.org/html/rfc2616#section-13.2.4

[Hasel]

请求同一个资源 ，浏览器会依次走下面两个缓存逻辑。
强缓存：好像是 expired 和 cache-control 这两个
协商缓存：好像是 last-modifyed 和 modify-since 这两个

具体 google 一下有很多解释。

html 后面参数更改，会被当成是新的，不走缓存逻辑，会去重新请求服务器。

[silenceeeee]

1. 浏览器和服务器同时控制．且浏览器和服务器的控制必须遵循 HTTP 协议

2. .html 链接正常情况下本来就不应该频繁更换．

补充：page.html 更改之后再按 CTRL+F5 刷新一般来讲不应该出现你说的情况：刷新没用

[silenceeeee]

@silenceeeee 参考： https://blog.wildcoder.me/2019/10/27/http-cache/

[xiaoming1992]

@wmc
@salmon5
@salmon5
我是前端，nginx 在哪都不知道啊，我能控制的只有.html、.js 、.css 文件啊，我希望的最好的情况是不需要后端（公司只有前端后端）的配合。

@MaxTan 我有数百个地址公用一个 html，只有参数不同，没法给他们一一加时间戳啊。。。

@silenceeeee #11 page.html 更改之后再按 CTRL+F5 刷新一般来讲不应该出现你说的情况：刷新没用
我也希望不是这样啊，可确实是这样了，应该是 cdn 的缓存，看样子只能手动刷新 cdn 了

[xiaoming1992]

https://stackoverflow.com/a/5493543/11003769
貌似 html 文件中的 meta 标记不可靠啊

[cominghome]

像这种页面的缓存逻辑，到底是由浏览器还是服务器控制的？
靠 HTTP HEADER
如果我的链接不方便随时更换，如何才能及时的看到更新后的页面？
减少缓存时间，html 缓存个五分钟最多了

[xiaoming1992]

微信小程序页面我也管不到，也是后端在处理

[Aoang]

Ctrl + F5 刷新都没用的话就是 CDN 缓存的，去 CDN 里面设置

[KuroNekoFan]

只回答第一个问题
是由服务端控制的，具体来说，服务端通过 http-header，声明式地指出浏览器 /webview 等显示网页的客户端应该如何缓存一个 url，有对应的 rfc 规范，而客户端不一定完整准确的实现了对应的 rfc，所以对于同一个 url，不同的浏览器可能会有不同的缓存行为。