这一篇，彻底搞懂浏览器的缓存机制

浏览器缓存分两种：强制缓存、协商缓存。

为什么需要缓存？

• 通过缓存，减少网络请求的数量和体积，页面加载和渲染更快；
• 网络请求不稳定，加剧页面渲染不稳定性，所以通过缓存，保证页面优先加载；
• 总结下来就是，使用缓存，可以让页面的加载、渲染更快，提高用户体验度。

有哪些资源可以被缓存？

一般为静态资源，如 css、js、img 等。

强制缓存

强制缓存流程

• 初次请求，服务器返回资源，和 Cache-Control
  若服务器认为该资源可以被缓存，在响应头(Response header)加上 Cache-Control；
• 再次请求，浏览器通过 Cache-Control 判断所请求的资源是否有效，命中则直接从强制缓存中返回请求响应，无需跟服务器进行任何交互，直接从本地缓存获得资源。

Cache-Control 字段属性

• no-cache
  不去判断强制缓存是否过期，而是强制进行协商缓存，直接向服务器发请求来验证缓存是否有效，若缓存未过期，使用本地缓存。

• no-store
  表示禁止使用任何缓存。不用本地缓存，也不用任何服务器缓存策略，而是每次发请求需要服务器给予全新的响应。

• max-age 缓存最大过期时间（秒级）

• private只允许最终用户做缓存（响应中使用）

• public允许中间路由、代理做缓存（响应中使用）

Expires 也是控制缓存，已被 cache-control 代替。

协商缓存

• 属于服务端缓存策略
• 服务端判断客户端资源，是否和服务端一样
• 一致返回304，否则返回200和最新资源

协商缓存过程

• 初次请求，返回资源和资源标识(ETag / Last-Modified)；
• 再次请求，请求头(Request header)带着资源标识(If-None-Match / If-Modified-Since)，服务器判断资源最后修改时间和资源标识携带的值是否相同，来决定本地缓存资源是否最新，一致返回304，否则返回新资源和新的资源标识。

资源标识

• ETag 资源的唯一标识，通过hash内容变化判断 —— If-None-Match
• Last-Modified 通过资源最后修改时间判断 —— If-Modified-Since

请求头和响应头中的值一一对应，并且，再次请求时携带的资源标识的值即为上次响应头返回的值。

ETag 和 Last-Modified 优先级比较

• 优先使用ETag
• Last-Modified 只能精确到秒级，未超过 1s 的改变不会返回
• 如果资源被重复生成，ETag可以更精准判断

为什么 ETag 更精准？

如果某个文件每隔一段时间重复生成，但内容相同，ETag hash值不变，所以资源不会返回，Last-Modified 还是会把他当作最新资源返回。ETag 可以判断文件内容是否相同，所以ETag 更精准。