浏览器缓存

一、浏览器的缓存

    浏览器的缓存机制也就是我们说的HTTP缓存机制

    浏览器第一次跟服务器要东西，服务器会把这个文件的缓存标识，浏览器会根据这些缓存标识，判断是不是要对这些文件进行缓存。

    浏览器每次请求，都会现在本地缓存里看看；每次从服务器请求回来，都会根据缓存标识，把结果存进本地缓存

二、强制缓存

    1.Expires

        是HTTP1.0控制缓存的字段，值是请求结果缓存的到期时间，截止到该时间之前，都可以直接使用这个缓存。但是可能客户端和服务端时间不一致，造成误差，那么缓存就会失效，那么强制缓存就没有意义啦~

是一个时间绝对值哦。

    2.Cache-Control

        是HTTP1.1及以后控制缓存的字段，优先级大于Expires。

        public：所有内容都会被缓存（包括客户端和代理服务器）

        private：所有内容都只允许客户端缓存

        no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

        no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

        max-age=xxx：值的单位为秒，缓存将在xxx秒后失效，是一个时间相对值

    3.拓展

请求图示

from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

三、协商缓存

    1.1 Last-Modified 

        Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间

Last-Modified

    1.2 If-Modified-Since

        If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

 If-Modified-Since

        2.1 Etag

            Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，内容完全相同文件的etag值一致的。

Etag

        2.2 If-None-Match

            If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200

If-None-Match

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

三、小结

强制缓存优先高于协商缓存，强制缓存生效 -> 强制缓存不生效，协商缓存生效

catch-control   >   expries  >  Etag & if-None-Match  >  Last-modified & If-Modified-Since

只有协商缓存会出现304的情况，因为强制缓存要么从缓存里拿数据，要么从服务器拿数据，都是200，但是协商缓存，会先询问服务器，服务器觉得好，给你304告诉你缓存可用。304是服务器端同事哭护短，缓存可用的标识符。

参考文献：https://juejin.im/entry/5ad86c16f265da505a77dca4