work-doc/developer/浏览器网页缓存问题.md

前端缓存处理办法

• 前端添加时间戳版本 给页面地址追加参数版本号（_=202301031440）清除强缓存, 其他静态资源（js、css）照旧还是强缓存。
• 后端设置响应头 将页面(HTML)设置为协商缓存 response.setHeader("Cache-Control", "no-cache"), 其他静态资源（js、css）照旧还是强缓存。
• 后端设置nginx ``` location / {

# 其它配置 ...

if ($request_uri ~* .*.$) {

#非html缓存1个月
add_header Cache-Control "public, max-age=2592000";

}

if ($request_filename ~* ^.*.$) {

#html文件使用协商缓存
add_header Cache-Control "no-cache";

} }

## 网上所谓的在html加以下代码是无效的，这个是历史遗留产物，现在基本淘汰了。
```html
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

精选

没说明白问题。 这个缓存是浏览器的标准，在这里 www.rfc-editor.org

1. 涉及场景：不仅仅是 webview，所有浏览器都有这个问题； 2.根本原因： 绝大部分场景的原因是服务端的默认缓存配置和浏览器标准对于协商缓存处理逻辑不一致导致的。浏览器逻辑如果有 last-modified 但是没有 cache-control，会进入启发式缓存，即默认会有一段时间的强缓存，具体逻辑参考标准。而服务器默认设置协商缓存是不会设置 cache-control 的；
2. 解决方案：最简单的就是服务端对于 html 开启协商缓存的同事，加上 cache-control: no-cache。这样既可以使协商缓存生效，同时禁用了 html 文件的启发式缓存