no-cache,max-age=0,nostore区别及304原理

了解HTTP协议的前端同学，相比对Cache-Control不会感到陌生，性能优化时经常都会跟它打交道。常见的值有有private、public、no-store、no-cache、must-revalidate、max-age等。网上总结挺多的，但是，系统好理解确实很少

浏览器缓存机制

在说这个服务如何写之前我们先要明白浏览器缓存到底是个啥。来看下这个简略示意图：

image.png

可以看到浏览器的缓存机制分为两个部分。1、当前缓存是否过期？2、服务器中的文件是否有改动？

第一步：判断当前缓存是否过期

这是判断是否启用缓存的第一步。如果浏览器通过某些条件(条件之后再说)判断出来，ok现在这个缓存没有过期可以用，那么连请求都不会发的，直接是启用之前浏览器缓存下来的那份文件：

image.png

中看到这个css文件缓存没有过期，被浏览器直接通过缓存读取了出来，注意这个时候是不会向浏览器请求的！ 如果过期了就会向服务器重新发起请求，但是不一定就会重新拉取文件！

第二步：判断服务器中的文件是否有改动

1、缓存过期，文件有改动

如果服务器发现这个文件改变了那么你肯定不能再用以前浏览器的缓存了，那就返回个200并且带上新的文件：

image.png

2、缓存过期，文件无改动

同时如果发现虽然那个缓存虽然过期了，可你在服务器端的文件没有变过，那么服务器只会给你返回一个头信息(304)，让你继续用你那过期的缓存，这样就节省了很多传输文件的时间带宽啥的。看下图：

image.png

过期了的缓存需要请求一次服务器，若服务器判断说这个文件没有改变还能用，那就返回304。浏览器认识304，它就会去读取过期缓存。否则就真的传一份新文件到浏览器。

如何判断缓存的过期以及文件的变动？

在刚才的叙述中作者没有提到具体的判断过期及变动的实现方式，这也是为了可以让童鞋们现有一个整体的概念，无关乎代码，至少通过上面一段讲述，可以认识到“哦浏览器的缓存是这样一个流程”，就够了。下面我们来看下具体的如何操作：

判断缓存过期

主要的方式有两种，这两种都是设定请求头中的某一个字段来实现的：1、Expires；2、Cache-Control。由于Cache-Control设置后优先级比前者高，这次作者就先说下通过Cache-Control来控制缓存。

image.png

no-cache

如果request headers中，Cache-Control为no-cache。表示不管服务端有没有设置Cache-Control，都必须从重新去获取请求。

max-age=0

max-age=0表示不管response怎么设置，在重新获取资源之前，先检验ETag/Last-Modified

不管是max-age=0还是no-cache，都会返回304（资源无修改的情况下），no-store才是真正的不进行缓存。

判断文件变动

常用的方式为Etag和Last-Modified，思路上差不多，这里作者只介绍Last-Modified的用法。

Last-Modified方式需要用到两个字段：Last-Modified & if-modified-since。

先来看下这两个字段的形式：

Last-Modified : Fri , 12 May 2006 18:53:33 GMT

If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

可以看出其实形式是一样的，就是一个标准时间。那么怎么用呢？来看下图：

image.png

当第一次请求某一个文件的时候，就会传递回来一个Last-Modified 字段，其内容是这个文件的修改时间。当这个文件缓存过期，浏览器又向服务器请求这个文件的时候，会自动带一个请求头字段If-Modified-Since，其值是上一次传递过来的Last-Modified的值，拿这个值去和服务器中现在这个文件的最后修改时间做对比，如果相等，那么就不会重新拉取这个文件了，返回304让浏览器读过期缓存。如果不相等就重新拉取。

Cache-Control与Expires

Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

Last-Modified/ETag与Cache-Control/Expires

配置Last-Modified/ETag的情况下，浏览器再次访问统一URI的资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器会只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器；

Cache-Control/Expires则不同，如果检测到本地的缓存还是有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用时，Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还在有效期内时，则不会再次发送请求去服务器询问修改时间（Last-Modified）或实体标识（Etag）了。

一般情况下，使用Cache-Control/Expires会配合Last-Modified/ETag一起使用，因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这时Last-Modified/ETag将能够很好利用304，从而减少响应开销。

Last-Modified与ETag

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度

如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存

有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。Etag的服务器生成规则和强弱Etag的相关内容可以参考，《互动百科-Etag》和《HTTP Header definition》，这里不再深入。

用户操作行为与缓存

用户在使用浏览器的时候，会有各种操作，比如输入地址后回车，按F5刷新等，这些行为会对缓存有什么影响呢？

image.png