一篇文章理解前端缓存

首先记住一点,HTPP1.1新生代总比老的HTTP1.0总要有更多的优势。

Expires

Expires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。

例如: Expires: Wed, 26 Aug 2020 06:32:49 GMT
原理：
1、每次请求这个资源时，浏览器自动判断是否超出了这个时间。
2、如果没有超出，就直接使用缓存(http status:200 from cache)。
3、不发送请求。如果超出，看其他参数的情况。

缺点：由于Expires这个时间是服务器端的时间，如果客户端的时间和服务器端的时间有误差，那么Expires就没什么用了。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dws83SL1-1633676726752)(Wp01Og.jpg)]

Etag

主: Etag
辅: If-None-Match 或 If-Match
ETag: HTTP 1.1规范。服务器通过算法计算出的资源唯一标志符（类同Md5码）。用来帮助服务器控制Web端的缓存验证

原理：
1、当浏览器请求服务器的某项资源时 -> A，服务器根据 A 算出一个哈希值 -> (aa620aa68c06d8a929526e0bb6f35b8ebb090f2c)
2、并通过 ETag 返回给浏览器，浏览器把 “aa620aa68c06d8a929526e0bb6f35b8ebb090f2c” 和 A 同时缓存在本地,
3、当下次再向服务器请求 A时，会通过类似 If-None-Match 或 If-Match : “aa620aa68c06d8a929526e0bb6f35b8ebb090f2c” 的请求头把 ETag 发送给服务器，
4、服务器再次计算A的哈希值并和浏览器返回的值做比较，如果发现A发生了变化就把A返回给浏览器(status 200),如果发现 A 没有变化就给浏览器返回一个(status 304) 未修改。
5、这样通过控制浏览器端的缓存，可以节省服务器的宽带，因为服务器不需要每次把全量数据返回给客户端

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8Ayr728-1633676726754)(Wp0s0J.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-so9vNC71-1633676726756)(Wp0gt1.jpg)]

Cache-Control

Cache-Control: HTTP 1.1规范。用来定义缓存的过期时间。

Expires有服务器时间和浏览器时间不统一的问题，所以HTTP 1.1新定义了Cache-Control。它是一个通用HTTP头，能分别在请求报文和响应报文中使用

Cache-Control有很多值可以设置，在这里只介绍两个最常用的。

Cache-Control: no-cache // 浏览器不缓存, 返回的结果要看其他参数的情况

Cache-Control: max-age=600 // 数字，秒，表示浏览器缓存10分钟，这段时间内即使服务器资源有修改，浏览器也不会改变。
                           // 这段时间内请求，http status是200 from cache

当Cache-Control和Expires同时存在时，Cache-Control会覆盖Expires。可以这么记忆，HTTP 1.1的新生代比老的HTTP 1.0总要有更多的优势。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6tbOEsJ-1633676726757)(m5YOwF.png)]

Last-Modified

Last-Modified: HTTP 1.1规范。表示资源在服务器上的最后修改时间。

原理：
1、浏览器在第一次请求时会保留Last-Modified的值，并在下一次请求时通过If-Modified-Since或If-Unmodified-Since两个请求头将Last-Modified传给服务器。
2、服务器比对两个Last-Modified是否一致。如果两者一致，则http response返回空响应(http status:304)，否则，返回新的资源(http status:200)

Last-Modified 和 Etag 都存在的情况，它们要都符合才能返回304。这也很好理解，都是HTTP1.1的小兄弟，大家权利要统一。

缺点：如果这个资源在服务器上被修改了，但是最后的内容却没有变。这时候Last-Modified就匹配不上了，相当于多返回了一个相同的资源文件，浪费了流量。

缓存判断顺序(Expires、Cache-Control、ETag、Last-Modified)

上面已经说过以下三条规则：

• Expires 和 Cache-Control 决定了浏览器是否要发送请求到服务器，ETag 和Last-Modified 决定了服务器是要返回304+空内容还是新的资源文件
• Expires 和 Cache-Control 同时存在时，Cache-Control 会覆盖Expires。如果 Cache-Control 不存在，则使用 Expires 判断
• ETag 和 Last-Modified 同时存在时，两者都要满足才会返回304

Keep-Alive

Keep-Alive 是一个通用消息头，允许消息发送者暗示连接的状态，还可以用来设置超时时长和最大请求数。

在Http1.0中，如果不使用Keep-Alive模式。在浏览器请求资源的时候，每请求一个资源都必须跟服务器进行一次TCP链接。酱紫的重复连接，造成资源浪费。所以在HTTP1.1中，默认使用Keep-Alive连接。

使用情况：
Http 1.0中默认是关闭的，需要在http头加入"Connection: Keep-Alive"，才能启用Keep-Alive；Http 1.1中默认启用Keep-Alive，如果加入"Connection: close "，才关闭。目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep-Alive连接就看服务器设置情况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMUig2jn-1633676726759)(m5DAJS.png)]

当HTTP采用keepalive模式，当客户端向服务器发生请求之后，客户端如何判断服务器的数据已经发生完成？

• 使用消息首部字段 Conent-Length
• 使用消息首部字段 Transfer-Encoding

当客户端向服务器请求一个静态页面或者一张图片时，服务器可以很清楚的知道内容大小，然后通过Content-length消息首部字段告诉客户端需要接收多少数据。但是如果是动态页面等时，服务器是不可能预先知道内容大小，这时就可以使用 Transfer-Encoding：chunk 模式来传输数据了。即如果要一边产生数据，一边发给客户端，服务器就需要使用"Transfer-Encoding: chunked"这样的方式来代替Content-Length。

chunk编码将数据分成一块一块的发生。Chunked 编码将使用若干个Chunk串连而成，**由一个标明长度为 0 的chunk标示结束。**每个 Chunk 分为头部和正文两部分，头部内容指定正文的字符总数（十六进制的数字）和数量单位（一般不写），正文部分就是指定长度的实际内容，两部分之间用回车换行(CRLF)隔开。在最后一个长度为0的Chunk中的内容是称为footer的内容，是一些附加的Header信息（通常可以直接忽略）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrzmRfFu-1633676726760)(m5yiIx.jpg)]

为了兼容 HTTP/1.0 应用程序，HTTP/1.1 的请求消息体中必须包含一个合法的 Content-Length 头字段，除非知道服务器兼容HTTP/1.1。
一个请求包含消息体，并且 Content-Length 字段没有给定，如果不能判断消息的长度，服务器应该用用400 (bad request) 来响应；
或者服务器坚持希望收到一个合法的Content-Length字段，用 411 (length required)来响应。

所以,所有 HTTP/1.1 的接收者应用程序必须接受 “chunked” transfer-coding (传输编码) ，因此当不能事先知道消息的长度，允许使用这种机制来传输消息。
消息不应该够同时包含 Content-Length 头字段和 non-identity transfer-coding。
如果一个消息同时包含 non-identity transfer-coding和Content-Length ，必须忽略Content-Length 。