平日里我们浏览一个网页，能判断这个网站的性能最直观的就是打开网页的速度。而提高网页的反应速度其中一个方式就是使用缓存。
web缓存是分很多种的，比如CDN缓存，服务器缓存，数据库缓存，还有我们这一章节讲的浏览器缓存。
缓存的优点有很多：
- 减少冗余的数据传输，节省网络开销
- 更快的加载页面，节省宽带
- 降低对原始服务器的要求，服务器更快的响应，避免过载
本节会按照强缓存和协商缓存，对两种缓存规则进行探讨。
首先，我们来看下缓存相关的请求头部有哪些？
- Expires
响应头，使用Expires头来告诉Web客户端它可以使用当前资源，直到指定的时间为止。用来控制缓存的失效日期。例如：Expires：Sat Apr 06 2019 18:55:09 GMT
- Cache-Control
请求头/响应头，这个字段用于指定缓存机制在整个请求响应中必须服从的指令。
- If-Modified-Since
请求头，是一个条件式请求头部，服务器只在所请求的资源在给定的日期时间之后对内容进行过修改的情况下才会将资源返回。资源最近修改时间。如果它同If-None-Match一同出现，If-Modified-Since会被忽略掉。
- Last-modified
用于标记文件在服务器端最后被修改的时间。标识资源的有效性，精准度到秒级别
- Etag
表示资源的版本，根据实体内容生成的一段hash字符串。Etag一般与If-None-Match一起使用，浏览器在发送请求时会带上If-None-Match字段，来询问服务器该版本是否依旧可用。如果服务器发现该版本是最新的，则返回304，标识浏览器继续使用缓存。
- If-None-Match
条件式请求首部。服务器上没有任何资源的Etag属性值与这个首部相匹配的时候，服务器才会返回请求资源，状态码为200
接下来，我们进入正题吧！！！
image.png
强缓存
当客户端第一次向服务器要某个资源时，服务器给客户端传送这个资源的同时，并且告诉客户端在未来的某个时间点之前如果还需要这个资源，直接从本地获取就行，不需要向服务器请求。这种方式缓存下来的资源成为强缓存。
强缓存是直接从缓存中获取资源而不经过服务器的，主要的两个头部字段是expires,cache-control。
1、expires是HTTP1.0标注下的字段。它是一个绝对时间的字符串，如：Sat Apr 06 2019 18:55:09 GMT，如果发送的请求时间再expires之前，本地始终有效，可使用缓存内容，否则就会发送请求到服务器来获取数据。
2、cache-control是HTTP1.1时出现的header，利用max-age来判断，max-age是一个相对值，第一次请求，浏览器会将第一次请求的时间和max-age记下，计算出一个资源过期的时间，当再次请求的时候，如果当前时间在这个资源过期时间之前，则命中缓存，否则需要发送请求到服务器获取数据。
cache-control还有以下几个比较常用的值：
Cache-Control常用值.png
- no-store:每次用户请求该资源，都会向服务器发送请求，下载完整的资源，不再使用浏览器的缓存。
- no-cache:不使用本地缓存，采用协商缓存，和服务端进行校验，如果资源未更改，则继续使用本地缓存，以下协商缓存中会继续提到。
如果cache-control和expires同时存在，cache-control的优先级会高于expires。
协商缓存
当强缓存没有命中时，浏览器会发一个请求到服务器，服务端根据资源的头部是否命中来进行协商缓存。如果协商缓存命中，服务器则会将这个请求返回（不返回资源数据），告诉客户端可以直接从缓存中加载这个资源。如果协商缓存没命中，则客户端直接从服务器加载资源数据。
1、Last-Modified/If-Modified-Since
两者都是时间字符串格式。
- 第一次向服务器发送请求时，服务器会在返回的资源头部加上Last-Modified，表示资源在服务器的最新更改时间
- 再次向服务器发送请求时，请求头部会添加If-Modified-Since字段，If-Modified-Since的值就是上次请求的Last-Modified值。当服务器收到请求，会根据If-Modified-Since的值来判断当前资源是否有更新。
如果资源没更新，则返回304，并且不更新Last-Modified的值，不返回资源内容，客户端继续使用缓存数据。
如果资源已更新，则返回200，并修改Last-Modified的值，返回最新的资源内容。
2、Etag/If-None-Match
Etag只有在资源发生变化的时候会改变，是一个hash值。
- 第一次请求，服务器会生成该资源的唯一标识Etag。
- 再次请求的时候，客户端请求头部会带上If-None-Match，If-None-Match的值是Etag值，请求到达服务器之后，服务器会将该资源的唯一标识Etag进行对比。
如果Etag值不同，则证明资源被改动过，返回该资源内容，状态码为200.
如果Etag值相同，则证明资源无更改，返回码为304，浏览器可以直接从缓存中获取数据。
实际场景中，Etag是需要通过计算一个文件得出的hash值，如果每次都根据文件的内容和大小等去计算hash值，是会占用服务器的资源的，因此建议非必要的场景下，尽量少用Etag。
image.png
缓存验证：
在浏览器和服务端设置允许缓存策略的前提下，并且服务端响应头的Cache-Control不为no-store的情况下，某个请求的响应头设置了Last-Modified或Etag
第一次请求，浏览器会记住响应头的Last-Modified和Etag
第二次请求及以后，浏览器会携带保存的Last-Modified和Etag，分别作为If-Modified-Since和If-None-Match放入请求头中，以此到服务端验证此次请求的资源是否过期或者更新，服务端进行判断，如果过期或更新，则返回新数据，否则返回为空。
那么，一定会有人问，Last-Modified和Etag都是为了让浏览器知道本地的缓存是否最新，两者是否重复了？
- 前面的几个头部字段介绍中提到，Last-Modified的精确度是秒级的，如果有一些文件修改非常频繁，一秒内修改n次，这种修改，Last-Modified是无法精确判断的。而Etag是根据资源在服务器的唯一标识的一个hash值，Etag更能精准的控制缓存。
强缓存和协商缓存的对比 .png
写在最后
- 强缓存：在有效期间内，直接使用本地缓存，不需要发请求。
- 协商缓存：需要发送请求，对比Etag和Last-Modified来判断当前资源是否最新，如果已经是最新的资源，则返回状态码304，继续使用本地缓存；否则，返回最新资源，状态码200。
今天的分享到此结束啦~
bye啦.png
网友评论