协商缓存与状态码304

协商缓存与状态码304

304

有时候我们访问某些网站会发现在控制台中，网络状态码返回的是304。（更多状态码相关-http必备知识点：http请求与js及状态码）

304(Not Modified)状态码在网络请求中的意思是：所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。
大白话是：你这客户端需要的资源没有被修改，还是原来的老数据，我服务端不会返回给你(你自己有干嘛还要我的)，你用原来的数据就行了。

什么情况下会返回304

304是服务端设置的。服务端设置响应头：last-modified(一个时间)：

res.setHeader('Last-Modified', XXXXX-GMT时间格式)

客户端拿到这个设置的时间后保存起来，再次请求时在请求头上带上这个时间：if-modified-since。

• 1.客户端首次请求服务端，拿到数据，服务端设Last-Modified。
• 2.客户端拿到Last-Modified，并设置if-modified-since。
• 3.客户端再次请求服务端。
• 4.服务端对比if-modified-since时间与Last-Modified时间，如果时间相等，则返回304，否则返回200&新数据。

Etag 与last-modified
last-modified设置的时间最小单位是秒，如果想要更精确的时间就不太适用，比如12:13:25到12:13:26之间。

res.setHeader(etag: 'xxxx')

设置etag为一段哈希值，可以使用md5来生成。
nodejs中使用：

let crypto = require('crypto');
let md5 = crypto.createHash('md5');

let etag = md5.update('xxxxxxxx').digest('base64');

客户端拿到这串哈希值保存，再次请求时请求头带上if-none-match。

• 1.客户端首次请求服务端，拿到数据，服务端设etag。
• 2.客户端拿到etag，并设置if-none-match。
• 3.客户端再次请求服务端。
• 4.服务端对比if-none-match值与etag值，如果相同则返回304，否则返回新数据。

缓存的优先级

浏览器缓存数据有很多方法，有cookie、localstorage、sessionStorage、indexDB等，这些可以直接设置需要缓存的数据，其中有保存时间、容量大小的差距。
我们通过http也可以设置缓存，这就是常见的浏览器缓存中的强缓存与协商缓存。
协商缓存如上述内容。
强缓存可以通过响应头cache-control、Expires来设置，设置一个缓存的到期时间。

• 网页首次加载，该请求的数据还是请求，此时服务端设置相应的强缓存与协商缓存。
• 网页不是首次加载，如果设置了强缓存，数据则会从缓存中读取，不请求服务端。
• 如果强缓存时间过期，则会请求服务端，服务端判断是否命中协商缓存，如果协商缓存时间或者哈希没变，则返回304。
• 如果协商缓存时间对比不一样或资源变化，则数据重新被获取，返回200.

即都存在且生效的情况下：
强缓存 -> 协商缓存

cache-control -> expires -> Last-Modified -> Etag