浏览器缓存

1. 缓存过程

   浏览器每次发起请求时，先在浏览器缓存中查找该请求的结果和缓存标志，根据查找结果决定是否向服务器发送请求。浏览器获取请求结果后，根据响应报文中 HTTP 头的缓存标识决定是否缓存请求结果。

2. 缓存类型

   有两种，强制缓存和协商缓存。

3. 什么是强制缓存？

   强制缓存就是在浏览器缓存中查找请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。

   强制缓存的状况主要有三种：

   1. 请求的缓存结果和缓存标识不存在，强制缓存失效，直接向服务器发送请求；
   2. 请求的缓存结果和缓存标识存在，但结果已失效，强制缓存失效，使用协商缓存；
   3. 请求的缓存结果和缓存标志存在，且结果还没有失效，强制缓存生效，直接返回缓存结果。

4. 强制缓存的缓存规则是什么？

   控制强制请求的请求头是Expires和Cache-Control，Cache-Control优先级比Expires高。

   • HTTP 1.0使用Expires控制网页缓存，它的值为服务器返回的请求结果缓存的到期时间，再次发送请求时，若是客户端的时间小于Expires的值，就直接使用缓存结果。使用Expires存在客户端与服务器时间可能有偏差的问题。

   • HTTP 1.1使用Cache-Control代替了Expires。Cache-Control能够取如下值

     Cache-Control值	含义
     no-store	禁止对请求和响应内容进行缓存
     no-cache	强制确认缓存，每次都将请求发送给服务器，由服务器验证请求中所描述的缓存是否过时，未过时就返回 304
     private	响应内容只有客户端能够缓存，代理服务器不能够缓存，Cache-Control的默认值
     public	相应内容能够被任何中间人（代理、CDN 等）缓存
     max-age	缓存内容将在设定的多少秒后失效

   Expires和Cache-Control同时存在时，只有Cache-Control生效。

5. 浏览器中如何判断强制缓存是否生效？

   打开控制台，选择Network，在Size列查看，若是显示灰色的from memory cache或者from disk cache表示使用了强缓存。

   • from memory cache表示使用内存中的缓存。内存缓存具备快速读取和时效性两个特色。
     • 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程必定的内存资源，以方便下次快速读取。
     • 时效性：一旦该进程关闭，则该进程的内存会清空。
   • from disk cache表示硬盘缓存。硬盘缓存将缓存写入硬盘文件中，读取缓存时须要对该缓存存放的硬盘文件进行 I/O 操做，而后从新解析缓存内容，读取复杂，速度比内存缓存慢。

6. 什么是协商缓存？

   协商缓存是指强制缓存失效后，浏览器携带缓存标识向服务器发起请求，服务器根据缓存标识决定是否使用缓存的过程。

   协商缓存主要有如下两种状况：

   1. 协商缓存生效，返回 304；

   2. 协商缓存失效，返回 200 和请求结果。

7. 协商缓存的规则是什么？

   控制协商缓存的响应头有Last-Modified和Etag，请求头有If-Modified-Since和If-None-Match。Etag/If-None-Match这对头部比Last-Modified/If-Modified-Since优先级高。

   头部	含义
   Last-Modified（响应头）	返回的资源文件在服务器最后被修改的时间
   If-Modified-Since（请求头）	客户端再次发起请求时，携带上次请求返回的Last-Modified值
   Etag（响应头）	返回的资源文件的惟一标识（由服务器生成）
   If-None-Match（请求头）	客户端再次发起请求时，携带上次请求返回的Etag值

   • 服务器读取到请求头中的If-Modified-Since后，用该值与该资源在服务器的最后修改时间作对比，若是客户端资源不是最新的，则从新返回资源，状态码为 200；不然返回状态码 304，表示资源没有更新。
   • 服务器读取到请求头中的If-None-Match字段后，用该值与该资源在服务器的最新Etag进行对比，一致就返回 304，表示资源没有更新；不然从新返回资源文件，状态码为200。

---

详解：

1. 详细的请求过程：

---

参考：

1. 【掘金】页面性能优化办法有哪些？juejin.im/post/5b022b…
2. 【掘金】完全理解浏览器的缓存机制：juejin.im/entry/5ad86…
3. 【MDN】HTTP缓存：developer.mozilla.org/zh-CN/docs/…