关于浏览器缓存策略 ？

前言： 

---

先思考一个问题，我们知道，前端和后端通过 Ajax 发送请求来进行数据的交互。那么是不是每次通过请求 URL 获取资源都要发请求，在服务器端返回对应的新数据呢 ? 答案是不会，为了提高页面性能，浏览器 提供了 缓存策略。

---

•  什么是浏览器缓存 ？

浏览器每次发起请求时，先在本地缓存中查找结果已经缓存标识，根据缓存标识来判断是否使用本地缓存。如果缓存有效，则使用本地缓存，否则则向服务器发起请求并携带缓存标识。根据 是否需向服务器发起 HTTP 请求，将缓存过程划分为两个部分：强制缓存和协商缓存，强缓存优于协商缓存。

• http缓存都在第二次请求开始的 。

1. 第一次请求资源时，服务器返回资源，并在 response header 中 返回资源的缓存策略。
2. 第二次请求时，浏览器 判断这些请求参数，击中强缓存就直接 200，否则就把请求参数加到 request header 头中传给服务器，看是否击中协商缓存，击中则返回 304，否则浏览器返回新的资源。

• 什么是强缓存 ?

强缓存：服务器通知浏览器一个缓存时间，在缓存事件内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

• 强缓存命中，则直接读取浏览器本地的资源，在 network 中显示的 form memory  或者 form disk。
• 控制强制缓存的字段有：Cache-Control(http1.1) 和 Expirs(http1.0)。
• Cache-control 是一个 相对时间，用以表达在这个时间点之前发起请求可以直接从浏览器中读取数据，无需发起请求。
• Exprirs 是一个 绝对时间。用以表达在这个时间点之前发起请求可以直接从浏览器中读取数据，无需发起请求。
• Cache-control 优先级比 Exprirs 高，前者的出现是为了解决 Exprirs 在浏览器时间被手动更改导致缓存判断错误的问题，同时存在则使用前者。

• 强缓存 Exprirs ？

1. 该字段是服务器响应消息头字段，告诉浏览器在过期时间之前可以直接在浏览器缓存中读取数据。
2. Exprirs 是 HTTP1.0 的字段，表示缓存到期时间，是一个绝对时间（当前时间+缓存时间）。在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。
3. 由于是绝对时间，用户可能会将客户端本地时间进行修改，而导致浏览器判断缓存失效，重新请求该资源。
4. 优势：HTTP1.0 产物，可以在 HTTP1.0 和 1.1 中使用，简单易用。
5. 缺点：时间由服务器发送的（UTC），如果服务器时间和客户款时间不一致，可能会出现问题。存在版本问题。

• 强缓存 Cache-control ？

1. 已知 Expirs 的缺点之后，在 HTTP1.1 中，新增了一个 Cache-control 字段，该字段表示资源缓存的最大有效时间。在该时间内，客户端不需要向服务器端发请求。
2. Cache-control 常用的值：MDN 查询 。。。。。。
3. 优势：HTTP1.1 产物，一时间间隔标识失效时间，解决了Exprirs服务器和客户端相对时间问题。比 Exprirs 多了很多选项设置。
4. 缺点：存在版本问题，到期之前的修改客户端是不可知的。

• 什么是协商缓存 ？

协商缓存：让客户端与服务器之间能实现缓存文件是否更新的验证，提升缓存的复用率，将缓存信息中的，Etag 和 Last-Modified 通过请求发送给服务器，由服务器校验，返回 304 状态码时，浏览器直接使用缓存。

• 协商缓存的状态码由服务器决策返回 200 或者 304。
• 当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了 if-Modified-Since 或者 if-None-match 的时候，会将这两个属性值到服务器端进行验证是否命中协商缓存，命中返回 304，加载浏览器缓存，并且响应头会设置 Last-Modified 或者 ETag 属性。
• 协商缓存有 2 组字段：Last-Modified / If-Modified-since(http1.0) 和 Etag / if-Node-match(http1.1)。
• Last-Modified / If-Modified-since 表示的是 服务器的资源最后一次修改的时间； Etag / if-Node-match 表示的是 服务器资源的唯一标识，只要资源变化，Etag 就会重新生成。
• Etag / if-Node-match 优先级高于 Last-Modified / If-Modified-since。

• 协商缓存Last-Modified / If-Modified-since ？

1. 服务器通过 Last-Modified 字段告知客户端，资源最后一次被修改的时间。
2. 浏览器将这个值和内容一起记录在缓存数据库中。
3. 下一次请求相同资源的时，浏览器从自己的缓存中找出不确定是否过期的缓存，因此在请求头上将上次 Last-Modified 值写入 If-Modified-since 字段。
4. 服务器会对 Last-Modified / If-Modified-since 进行对比，相等，未修改，响应 304。反之，修改，响应 200，返回数据。
5. 优势：不存咋版本问题。
6. 缺点：只要资源修改，无论内容有无发生实质性的变化，都会将该资源返回客户端。以时刻作为标识，无法识别一秒内进行多次修改的情况。

• 协商缓存  Etag / if-Node-match ？

1. Etag 存储的是文件的特殊标识，一般都是hash生成的。服务器存储着 Etag 字段。
2. Etag 优先级高于 Last-Modified。
3. 优势：可以更加精确的判断资源是否被修改，可以识别一秒内多次修改的情况。不存在版本问题，每次请求都会去服务器验证。
4. 缺点：计算 Etag 的值需要性能消耗。