关于 HTTP 缓存 强缓存 协商缓存

【HTTP】强缓存和协商缓存

解题要点：

1. 强缓存和协商缓存的概念、状态码
   关键词：200、304、from disk cache / from memory cache
2. 强缓存相关的浏览器 Header 属性及其每个属性的介绍
   关键词：Expires、Cache-Control、Pragma
3. 协商缓存相关的浏览器 Header 属性及其每个属性的介绍
   关键词：ETag — If-None-Match、Last-Modified — If-Modified-Since
4. 牵扯的优先级（加分）
   a. 强缓存和协商缓存的优先级
   b. 各个属性的优先级

答案：

1. 强缓存和协商缓存分别是什么，状态码和场景。
   强缓存：不会向服务器发送请求，直接从缓存中读取资源，在 Chrome 控制台的 Network 选项中可以看到该请求返回 200 状态码，并且 size 显示 from disk cache 或 from memory cache 两种。

   协商缓存：向服务器发送请求，服务器会根据这个请求的 request header 的一些参数来判断是否命中协商缓存，如果命中，则返回 304 状态码并带上新的 response header 通知浏览器从缓存中读取资源；

2. 强缓存相关的浏览器 Header
   Expires — 过期时间，有可能因客户端 / 服务端时间设置不一致出现问题

   Cache-Control — 缓存设置，存在 public、private、no-store、no-cache、max-age 几个属性，再分别介绍一下几个属性的作用

   Pragma — 页面缓存，只有一个值：no-cache，作用和 Cache-Control 里的 no-cache 一样

   强缓存中 from disk cache 和 from memory cache 的区别

3. 协商缓存相关的浏览器 Header
   ETag — If-None-Match：浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的 Etag 值放到 Header 里的 If-None-Match 属性里，服务器接受到请求后取出 If-None-Match 的值，会拿来和这个资源文件的 Etag 值做比较，如果相同，则表示资源文件没有发生改变，命中协商缓存。（只要资源有变化，服务端的 Etag 就会重新生成）

   Last-Modified — If-Modified-Since：Last-Modified 是该资源文件的最近修改时间，服务器会在 Header 里返回，同时浏览器会将这个值保存起来，下一次发送请求时，放到 Header 里的 If-Modified-Since 里，服务器在接收请求后也会做对比，如果相同则命中协商缓存。

Etag 的精确要优于Last-Modified，Last-Modified 的时间单位是秒，如果某个文件在 1 秒内改变了多次，那么他们的 Last-Modified 其实并没有体现出来修改，但是 Etag 每次都会改变确保了精度。
Etag 的性能要逊于 Last-Modified，毕竟 Last-Modified 只需要记录时间，而 Etag 需要服务器通过算法来计算出一个 hash 值。
服务器校验优先考虑 Etag。
所以，两者互补。

4. 牵扯的优先级（加分）
   a. 强缓存由于协商缓存
   b. from memory 优先于 from disk
   c. Cache-Control > Pragma > Expires
   d. Etag > Last-Modified