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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1808 天前的主题，其中的信息可能已经有所发展或是发生改变。

背景描述

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

问题

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

页面

浏览器

HTML

缓存

18 条回复 • 2020-01-10 16:38:45 +08:00

ipwx

2020-01-10 15:36:53 +08:00

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

ipwx

2020-01-10 15:39:26 +08:00

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

xiaoming1992

2020-01-10 15:41:56 +08:00

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

Vegetable

2020-01-10 15:42:24 +08:00

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

wmc

2020-01-10 15:45:06 +08:00

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

MaxTan

2020-01-10 15:45:40 +08:00

加个时间戳参数

xiaoming1992

2020-01-10 15:46:03 +08:00

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

salmon5

2020-01-10 15:47:26 +08:00

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

2020-01-10 15:50:23 +08:00

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

Hasel

2020-01-10 15:53:11 +08:00

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

具体 google 一下有很多解释。

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

silenceeeee

2020-01-10 15:56:01 +08:00

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

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

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

silenceeeee

2020-01-10 15:58:58 +08:00

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

xiaoming1992

2020-01-10 16:04:14 +08:00

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

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

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

xiaoming1992

2020-01-10 16:07:50 +08:00

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