浏览器缓存---小实验及解析

在做小实验前先要了解一下浏览器缓存的执行原理

浏览器的缓存分为强缓存和协商缓存，当客户端请求某个资源的时候，获取缓存的流程如下
（1）先根据这个资源的http header判断它是否命中强缓存，如果命中，则直接从本地缓存中获取资源，不会则向服务器请求 资源。
（2）当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，这个过程成为http再验证，如果命中，服务器直接返回请求而不返回资源，而是告诉客户端之间从缓存中获取，客户端收到返回后就直接从客户端获取资源
（3）强缓存和协商缓存的共同之处在于：如果命中缓存，服务器不会返回资源；区别是：强缓存不发送请求打服务器，但是协商缓存会发送请求到服务器

在这里插入图片描述
（4）当协商缓存没有命中时，服务器会返回资源给客户端

（5）当ctrl+F5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存
（6）当F5刷新页面时，跳过强缓存但会检查协商缓存

强缓存
（1）Expires该字段是http1.0时的规范，值是一个绝对时间的GMT格式的时间字符串，代表缓存的过期时间
（2）Cache-Control:max-age该字段是http1.1的规范强缓存利用的是max-age的值来实现缓存资源的最大生命周期，单位是秒

协商缓存
（1）Last-Modified资源最后的更新时间，随着服务器的response返回

（2）If-Modified-Since通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有就命中协商请求

（3）ETag资源内容的唯一标识，随着服务器的response返回
（4）If-None-Match服务器通过请求头部的If-None-Match与当前资源的ETag是否一致来表示资源在两次请求中是否有过修改，如果没有修改，则命中协商缓存

开始小实验

第一次打开浏览器访问资源

可以看到第一次打开浏览器可以看到Response header中cache-control: public, max-age=7200 说明开启了强制缓存，有效期是7200秒，再看返回状态是200并且是(from disk cache)，所以可以得知强制缓存还没过期，这时是直接取的缓存没有发起服务器请求，所以这里获取资源特别快，只用了16.49ms。

第二次F5刷新页面，可以看到Response header中cache-control: public, max-age=7200 说明开启了强制缓存，有效期是7200秒，但因为不是首次访问，所以此次走的是协议缓存机制，再看header信息中last-modified: Fri, 23 Oct 2020 03:00:57 GMT与if-modified-since: Fri, 23 Oct 2020 03:00:57 GMT一致，所以改缓存未失效，仍然走缓存，返回状态是403。这次请求是先访问了服务器进行了缓存失效验证对比，然后去访问的缓存。所以时间=请求服务器时间+读取缓存时间=154.2ms


这次先清除浏览器缓存，再刷新页面，会看到这次返回的是200，说明是直接从服务器拿的资源。原因是因为本地未找到缓存，这是就没办法走协议缓存，可以看到Request header 中并没有包含if-modified-since，但是reponse会返回一个last-modified。这次请求时间是216.33ms。明显比前两次要久。

下一章做点nginx缓存配置及gzip的实现