304状态码详解（协商缓存）

上一篇文章针对不同的状态码做了一个整理，还说到要专门针对304做一个详解，于是与，今晚又来学习了。

首先说一下背景：

我们知道前端代码打包后需要部署到静态服务器上。客户端通过输入url就能看到对应的页面。从客户端到服务器发送请求到接收资源需要建立连接、消耗宽带。

但是静态资源的更改频率往往没有那么高，于是就有一些专门的response header设置。通过这些设置让浏览器在获取资源文件时直接从本地硬盘或者内存获取，而不必再发送请求。这样也减轻了服务器的负担，同时还加快了客户端的网页加载速度，用户体验好。

设置方式：

1、通过expires（http1时的规范，目前是向下兼容所以有的网站还在用这个）：它的值是一个绝对时间的GMT时间字符串。

2、cache-control字段：该字段有几个可选值包括no-cache、no-store、public、private等，这些值决定了能否使用缓存以及缓存的方式。

no-cache时，代表不使用本地缓存，客户端会向服务器发送请求，由服务器决定是否重新获取资源。

no-store时，会完整下载资源

public时：表示资源可以被所有用户缓存，包括服务器

private时表示资源只能被浏览器终端缓存

如果两者同时存在，cache-control优先级更高一些。

当我们发送请求让浏览器进行判断时，客户端和服务器需要一些标识来进行通讯

比如If-Modified-Since和If-None-Match字段

这两个字段的值通过第一次请求的response header中的last-modified、etag携带过来。

示例

// response header
etag: '5c20abbd-e2e8'
last-modified: Mon, 24 Dec 2018 09:49:49 GMT

// request header 变为
if-none-matched: '5c20abbd-e2e8'
if-modified-since: Mon, 24 Dec 2018 09:49:49 GMT

浏览器没有命中强缓存并走协商缓存时就把这些值跟资源文件的信息进行比对。

如果资源没更改，返回304，浏览器读取本地缓存。
如果资源有更改，返回200，返回最新的资源。

至于为什么有etag和last-modified两个字段主要是解决服务器不能精确事件的问题而新增了etag导致的，两个判断相辅相成，具体如何决策看服务器如何处理了