浏览器缓存那点事

缓存的分类：服务端缓存与客户端缓存（浏览器缓存）
缓存的好处：1.降低延迟 2.降低网络传输

浏览器缓存机制

浏览器缓存控制机制有两种：HTML Meta标签 vs. HTTP头信息

1. HTML meta标签

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

浏览器当前页面不被缓存，每次访问都需要去服务器拉取

• -

2. http头信息控制缓存

---

浏览器第一次请求

---

浏览器第二次请求

---

Expires策略：Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。Expires 的一个缺点就是，返回的到期时间是服务器端的时间。

Cache-control策略（重点关注）：Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
值可以是public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age

Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。
Last-Modified：标示这个响应资源的最后修改时间。
If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。

Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。（优先级高）
Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果的解决办法

1. ctrl+f5
2. 浏览器的隐私模式开发
3. f12在network那里把缓存给禁掉
4. 给资源加上一个动态的参数，如css/index.css?v=0.0001，由于每次资源的修改都要更新引用的位置

部分状态码解释

200 代表是的 响应成功的状态码，还有其他的状态码如下：
1xx: 信息性状态码 100, 101
2xx: 成功状态码 200：OK
3xx: 重定向状态码
301: 永久重定向, Location响应首部的值仍为当前URL，因此为隐藏重定向;
302: 临时重定向，显式重定向, Location响应首部的值为新的URL
304：Not Modified 未修改，比如本地缓存的资源文件和服务器上比较时，发现并没有修改，服务器返回一个304状态码， 告诉浏览器，你不用请求该资源，直接使用本地的资源即可。
4xx: 客户端错误状态码
404: Not Found 请求的URL资源并不存在
5xx: 服务器端错误状态码
500: Internal Server Error 服务器内部错误
502: Bad Gateway 前面代理服务器联系不到后端的服务器时出现
504：Gateway Timeout 这个是代理能联系到后端的服务器，但是后端的服务器在规定的时间内没有给代理服务器响应