浏览器之http缓存（拿来吧你）

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

首先先看一张流程图

浏览器通常只会缓存get请求的内容！

浏览器分为强缓存和协商缓存

强缓存（告诉浏览器把文件缓存下来、而且根据缓存规则来判断以后取内容的方式、服务端设置 **Cache-Control缓存头**）

• Cache-Control: xxxx, xxx

  • no-store 不容许缓存、每次都去服务器取内容

  • no-cache 每次携带本地缓存的相关验证字段给服务器判断是否读取缓存返回304状态码使用本地缓存

  • private 专用于某单个用户的，中间人不能缓存此响应

  • public 表示该响应能够被任何中间代理、CDN等缓存、若是指定的话那就只能指定部分能被缓存

  • max-age=设置最大的缓存时间、好比你如今7点、服务端设置Cache-Control: max-age=86400 那就是明天的七点缓存失效、max-age=xx秒

**案例**

cache-control: max-age=xxxx，public //客户端和代理服务器均可以缓存、缓存有效期为xxx秒，用户刷新从新请求）

cache-control: max-age=xxxx，private //只让客户端能够缓存该资源；代理服务器不缓存,缓存有效期为xxx秒

cache-control: max-age=xxxx，immutable // 客户端在xxx秒的有效期内、用户刷新也不发送请求

cache-control: no-cache //能够在客户端存储资源，**每次都必须去服务端内容校验**，来决定从服务端获取新的资源（200）仍是使用客户端缓存（304）

cache-control: no-store // 不走缓存、每次都去服务器获取内容
复制代码

Expires 是之前用来控制缓存的http头，Cache-Control是新版的API因此不讨论Expires

协商缓存：

协商缓存其实就是第一次获取浏览器资源的时候浏览器会把当前文件的标记信息给到你、在response header里面有etag和last-modified:

etag：每一个文件有一个，改动文件了就变了，就是个文件hash，每一个文件惟一

last-modified：文件的修改时间，精确到秒

浏览器会在配置了协商请求的时候、发送资源请求的Request Headers里面携带If-Modified-since和If-None-Match字段信息、服务器会拿客户端传入的校验参数进行文件校验若是有内容变更则返回200浏览器进行从新获取资源、若是没有变更(S tatus Code: 304 Not Modified)则直接取内存资源！

疑问：为何有了最后修改时间还要有个etag呢？

• 1s被文件被修改N次的状况、由于只到秒级别

• 某些服务器不能精确的获得文件的最后修改时间

总结：

浏览器在发送请求资源前、会先看请求头是否携带强缓存信息expires和cache-control（服务端设置的）、若是有强缓存标识那就直接读取缓存文件不发送请求、没有的话就走协商缓存、协商缓存客户端会在请求头里面携带If-Modified-since和If-None-Match字段信息、服务端接收到请求头参数信息后会和服务端文件进行对比、若是文件并无更改的话那服务端会返回304状态码、这个时候并无实际的响应体内容、客户端接收到304标识的话会直接读取缓存内容、咱们打开F12选择Network的话选择一个资源Headers列能够看到StatusCode304后面会有Not Modified (from memory cache)、若是对比后发现服务器有最新的内容那浏览器就会进行更新而且把文件保存在内存和磁盘上！在读取缓存内容的时候、咱们打开一个新的标签栏复制过来地址后执行咱们能够看到**Status Code:** 200 OK (from disk cache) 、这里咱们不须要去纠结200状态码、这里其实浏览器并无发送请求而是直接取得disk(硬盘)资源进行加载、这个时候浏览器还会对一些资源进行内存写入、以后从内存中读取、通过本人测试一直刷新一直读是取得内存资源浏览器并不会去和服务器进行协商请求判断、可是他会去请求index.html进行协商判断、若是index.html也没有变化的话那就直接读取内存中的js和css、可是 若是index.html和服务器进行协商判断有更新内容的话、那浏览器将会更新所有资源！因此为何webpack更改文件后从新打包须要生成hash值路径、目的就是为了让客户端在和服务器进行协商判断的时候可以更新到最新的版本号!其本质除了更改hash值得同时还会去修改index.html的js引用地址路径因此服务端和客户端内容有修改因此触发更新操做！