浏览器缓存策略

浏览器缓存一般分为两类：强缓存，也称本地缓存；以及弱缓存，也就是协商缓存。

缓存规则

缓存副本有效期：含有完整的过期时间控制头信息（HTTP 协议报头），并且仍在有效期内；

校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如果发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

 

本地阶段

浏览器发送请求前，会先去缓存里查看是否命中强缓存，如果命中，则直接从缓存中读取资源，不会发送请求到服务器。否则，进入下一步。

协商缓存阶段

当强缓存没有命中时，浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中，服务器会返回 304 响应，但是不会携带任何响应实体，只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中，则直接从服务器加载资源。

常见场景

当 F5 刷新网页时，跳过强缓存，但是会检查协商缓存；

当 Ctrl + F5 强制刷新页面时，直接从服务器加载，跳过强缓存和协商缓存。

缓存优化策略

1. 使用一致的网址：如果你在不同的网址上提供相同的内容，将会多次获取和存储该内容。注意URL 要区分大小写。
2. 确定中继缓存可以缓存哪些资源：对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存。
3. 确定每个资源的最优缓存周期：不同的资源可能有不同的更新要求。审查并确定每个资源适合的 Max-age。
4. 确定网站的最佳缓存层级：对 HTML 文档组合使用包含内容特征码的资源网址以及短时间或 No-cache 的生命周期，可以控制客户端获取更新的速度。
5. 更新最小化：有些资源的更新比其他资源频繁。如果资源的特定部分（例如 JS 函数或一组 CSS 样式）会经常更新，应考虑将其代码作为单独的文件提供。这样，每次获取更新时，剩余内容如不会频繁更新的库代码可以从缓存中获取，确保下载的内容量最少。
6. 确保服务器配置或移除 ETag：因为 Etag 跟服务器配置有关，每台服务器的 Etag 都是不同的。
7. 善用 HTML5 的缓存机制：合理设计启用 LocalStorage、SessionStorage、IndexDB、SW 等存储，会给页面性能带来明显提升。
8. 结合 Native 的强大存储能力：善于利用客户端能力，定制合适的缓存机制，打造极致体验。