浏览器缓存策略详解

响应头字段

如何缓存以及采取那种缓存策略，都要由服务器首先告诉浏览器。即在浏览器首次发出请求后，服务器发送给浏览器的响应头字段如下——

1. Cache-Contorl

Cache-Control，即缓存策略，是浏览器读取缓存策略第一站，这个字段告诉了浏览器我们应该采取那种缓存策略——

private 仅允许客户端浏览器缓存
public 代理服务器和客户端浏览器都可以缓存

特别的值，
3. max-age:时间（秒），指定浏览器本地缓存数据的时间。
max-age和private或public可以同时组合存在，例如

Cache-Control: max-age:3000,public
4. no-cache 不使用“本地计时缓存”，但不影响使用“协商缓存”

2. date

既然指定了缓存多久，那么，肯定要记录下当前请求的时间呀，这样才能开始缓存，并计算出什么时候到期嘛。

所以，服务器会在返回的响应中用date字段存下当前的时间提供给浏览器比对。实际上使用Cache-Control:max-age:xxx配合date是一个组合，告诉浏览器当前请求的时间，以及在本地应该缓存多久。这种由服务器告知，而后在本地缓存指定时间的缓存方式我们称之为“ 由本地计时决定的强制缓存 ”。

现在问个很关键的问题，如果本地计时已经超过了我们设置的时间，浏览器会重新请求服务器获得最新的资源吗？

3. Last-Modified

我们仔细观察服务器的响应，发现服务器还会提供一个Last-Modified字段，这个字段是做什么用的呢？

Last-Modified顾名思义，资源上一次编辑的时间，这里我们可以回答前面的提问，如果本地的缓存计时的时间到了，浏览器会重新请求服务器能够获取到最新的数据吗？

不不，虽然确实会重新请求服务器即再次发起请求，但是，浏览器会重新向服务器协商，询问接下来要怎么做。这个阶段我们称之为“ 由向服务器协商后决定的协商缓存 ”，又服务器决定浏览器是否能够拉取到最新数据。

浏览器在再次请求服务器的时候，会带上If-Modified-Since字段，也就是上次服务器提供的Last-Modified里面的时间，服务器收到这个字段以后，会在服务端对数据的实际编辑时间进行比对，检查数据是否有变动，如果有，返回最新的数据，用正常200响应；如果没有，不返回任何实际数据而只返回304-not modified状态码，告诉浏览器资源没有发生更改，继续使用本地的强缓存。同时服务器会提供新的Last-Modified时间，浏览器开始了新的一轮max-age配合Last-Modified缓存计时。

max-age不存在或者为0，则不需要计时，每次提供Last-Modified由服务器比对。实际上提供了max-age只是为了减少请求服务器比对的次数，节约服务器资源。

好了，到此为止浏览器基础的缓存策略的逻辑我们已经了解啦。下面上一张图，还有一些扩充知识。咦这张图里怎么多了一个Etag？

图片描述

实际上Etag是一种新的机制，可以取代Last-Modified，弥补L-m以时间为依据提供给服务器比对数据的一些不足。因为时间差如果很小就很难比对。

那么，类似于Last-Modified对应If-Modified-Sense。
Etag也对应了If-None-match

关于Etag的具体机制和用法可以自行搜索了解，本文不再介绍啦。

4. 总结

本地强缓存配合协商缓存的两种策略
策略一：max-age结合data配合last-modified（响应）和if-modified-sense（请求）
策略二：max-age结合data配合etag（响应）和if-none-match

如果cache-control没有提供max-age或者max-age为0，或者提供了no-cache
说明不采用本地强缓存，转而采用协商缓存。

此时将和服务器协商，依然是两种缓存策略：

仅使用协商缓存的两种策略
策略一：last-modified（响应）和if-modified-sense（请求）
策略二：etag（响应）和if-none-match

注意无论是哪一种方式，最终都要和服务器协商，即本地计时的强制缓存是可选的，而协商缓存是必然的。

喵空间

正文