浏览器缓存是否为键值存储？重复fetch请求是否优先走缓存及注意事项

1. 浏览器缓存是不是以服务器路径为键的键值存储？ #

不完全是。虽然请求URL（包含服务器路径）是缓存键的核心组成部分，但浏览器的缓存键实际上是一个多维度的请求标识组合，除了URL，还包括：

• 请求方法（比如GET和POST请求即使URL相同，缓存也完全分开）
• 服务器返回的Vary头指定的请求头字段（比如Vary: Accept-Encoding会让不同编码的响应各自缓存，哪怕URL一样）
• 安全上下文（比如HTTPS和HTTP的同URL资源不会共享缓存）

日常开发中，URL是最直观的缓存区分标识，但不能简单认为缓存只以服务器路径为键。

2. Fetch预加载后再次请求是否优先从缓存返回？ #

这取决于服务器返回的缓存策略头和Fetch请求的cache配置：

• 如果服务器返回的Cache-Control头包含public/private且max-age大于0，或者设置了Expires头在未来时间，预加载的响应会被浏览器缓存。后续默认的Fetch请求（cache: 'default'）会优先读取缓存，不会发起新的HTTP请求。
• 如果服务器设置了Cache-Control: no-cache，浏览器会先发起验证请求（带If-None-Match/If-Modified-Since），服务器返回304后才会用缓存。
• 如果是Cache-Control: no-store，浏览器不会缓存任何响应，每次请求都会重新拉取。

简单说：只要符合HTTP缓存规则，预加载后的Fetch请求会优先用缓存。

3. 能否认为浏览器缓存是以服务器路径为键的键值缓存？ #

不能完全这么定义。如第一部分所说，路径（URL）是核心，但缓存键还包含其他请求维度的信息。比如同一个URL，用不同的Accept头请求，若服务器设置了Vary: Accept，浏览器会缓存两个不同的响应——这时候路径相同，但缓存键不同，对应的缓存值也不同。

需要注意的问题 #

• 缓存头的优先级：Cache-Control的优先级高于Expires，同时max-age会覆盖Expires的过期时间，配置时要避免冲突。
• Vary头的坑：如果服务器错误设置Vary: User-Agent，会导致不同浏览器甚至同一浏览器的不同版本都缓存独立的响应，可能浪费缓存空间。合理使用Vary可以确保缓存的响应符合请求需求。
• Fetch的cache模式控制：可以通过设置fetch(url, { cache: 'force-cache' })强制读取缓存（哪怕已过期），或者cache: 'no-store'完全跳过缓存，根据业务场景选择合适的模式。
• 资源更新与缓存失效：如果资源内容更新但URL不变，浏览器会继续使用旧缓存。解决方法是给资源URL加版本号（比如app.js?v=20240520）或使用哈希命名（app.abc123.js），确保更新后URL变化，触发新的缓存。
• 隐私模式的缓存限制：浏览器隐私/无痕模式下，缓存是临时存储，关闭窗口后会被清空，不要依赖隐私模式下的缓存做持久化预加载。
• 跨域资源缓存：跨域资源需要服务器正确设置Access-Control-Allow-Origin等CORS头，同时缓存头（比如Cache-Control）也要配置正确，否则浏览器可能不会缓存跨域资源。

内容的提问来源于stack exchange，提问作者Dr. Chocolate