http缓存控制
为什么需要缓存
为啥要缓存：
缓存的优点：
1）加快浏览器加载网页的速度，优化用户体验，让用户更快速的打开我们的网页；
2）减少对服务器的访问次数，减轻服务器的负担；
3）节省带宽（就是节省钱...，因为很多带宽服务其实是按流量来计费的，同样对用户也可以省4G、5G流量...也省钱了）
缓存的缺点：
如果资源一直被缓存了，那当资源发生更改时，用户就无法获取最新的信息了！ 所以缓存虽好，可不能乱用。
浏览器缓存 也包含很多内容： HTTP 缓存、storage缓存（cookie、localstorage、sessionStorage) 等等。这里我们只讨论 HTTP 缓存相关内容。
HTTP缓存: 强缓存 和 协商缓存
浏览器缓存分类
浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：
- 浏览器先根据这个资源的
http头信息 来 判断是否命中强缓存。
如果命中则直接加载在缓存中的资源，并不会将请求发送到服务器。（强缓存）
- 如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。
服务器来判断浏览器本地缓存是否失效。
若可以使用，则服务器并不会返回资源信息，浏览器继续从缓存加载资源。（协商缓存）
- 如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。（新的请求）
强缓存
命中强缓存时，浏览器并不会将请求发送给服务器。
在Chrome的开发者工具中看到http的返回码是200，但是在Size列会显示为(from cache)。
强缓存是利用http的返回的响应头中的Expires或者Cache-Control (优先级更高) 两个字段来控制的，用来表示资源的缓存时间。
Expires: 指定一个具体时间(2020年12月12日 17:00), 到了这个时间了, 缓存过期了, 在时间内, 都是有效的, 可以直接读
Cache-Control : 指定一个过期时间 (3600s), 这个资源你加载到后, 可以用 3600s
Expires
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
该字段会返回一个时间，比如Expires: Wed, 23 Nov 2050 16:00:01 GMT 。这个时间代表着这个资源的失效时间，也就是说在xx年xx月xx日时间之前都是有效的，即命中缓存。
这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当 服务器与客户端 时间偏差很大 以后，就会导致缓存混乱。于是发展出了Cache-Control。
Cache-Control
Cache-Control是一个相对时间，例如Cache-Control:max-age 3600，代表着资源的有效期是3600秒。
由于是相对时间，并且都是与客户端时间比较，所以服务器与客户端时间偏差也不会导致问题。
Cache-Control与Expires可以在服务端配置同时启用或者启用任意一个，同时启用的时候Cache-Control优先级高。
Cache-Control 可以由多个字段组合而成，主要有以下几个取值：
- max-age
指定一个时间长度，在这个时间段内缓存是有效的，单位是s。例如设置 Cache-Control:max-age=31536000，也就是说缓存有效期为（31536000 / 24 / 60 / 60）天，第一次访问这个资源的时候，服务器端也返回了 Expires 字段，并且过期时间是一年后。
在没有禁用缓存并且没有超过有效时间的情况下，再次访问这个资源就命中了缓存，不会向服务器请求资源而是直接从浏览器缓存中取。
- no-cache
强制所有缓存了该响应的用户，在使用已缓存的数据前，发送带验证器的请求到服务器。
不是字面意思上的不缓存。
- no-store
禁止缓存，每次请求都要向服务器重新获取数据。
强缓存这种缓存处理, 推荐给静态资源, 不太会变化的资源处理
协商缓存
协商缓存
若未命中强缓存(强缓存过期了)，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304 (你本地之前加载的资源是有效的)，浏览器从缓存中加载资源。
Last-Modify/If-Modified-Since
浏览器第一次请求一个资源的时候, 服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间，例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。
当浏览器再次请求该资源时，发送的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。
如果命中缓存，则返回 http ，并且不会返回资源内容，并且不会返回Last-Modify。
由于对比的是服务端时间，所以客户端与服务端时间差距不会导致问题。
但是有时候通过最后修改时间来判断资源是否修改还是不太准确（资源变化了最后修改时间也可以一致）。
最后修改只能精确到秒级, 于是出现了ETag/If-None-Match。
ETag/If-None-Match
与Last-Modify/If-Modify-Since (最后修改时间)不同的是，Etag/If-None-Match返回的是一个校验码（ETag: entity tag）。
ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。
ETag值的变更则说明资源状态已经被修改。
服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。
既生 Last-Modified 何生 Etag ？
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？
HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：
- Last-Modified标注的最后修改只能精确到秒级
如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
- 如果某些文件会被定期生成，当有时内容并没有任何变化，但 Last-Modified 却改变了，导致文件没法使用缓存
- 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加 准确的控制缓存。 不会仅仅只根据时间判断是否进行使用缓存
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，
最后才决定是否返回304。
强缓存: 大大的减少了 服务器的请求次数, 在过期时间内, 直接从客户端内存中读
协商缓存: 强缓存命中失效了, 超过过期时间了, 拿着标识(最后的修改时间, 唯一标识etag), 去问服务器, 是否真的过期了
如果验证通过, 服务器会直接响应 304, 且不会返回资源
请求缓存流程
浏览器第二次请求
强缓存
响应头：
cache-control: max-age: 60
expires: 过期时间
如果没过期，直接用，如果过期了， 发请求
协商缓存
响应头：
last-modify: 时间 最后修改时间
etag: 服务器文件的唯一标志
请求头：
if-modify-since: 上次返回的last-modify
if-none-match: 上次返回的etag
