一张图弄懂HTTP缓存及常见面试题

状况一: Cache-Control:max-age = 60 时

状况二: Cache-Control:max-age = 0 or no-cache 时

HTTP缓存流程图

HTTP缓存相关面试题

1.说一下浏览器的缓存机制（HTTP如何控制缓存的）

• 浏览器第一次向服务器发请求资源，服务器响应报文的状态是200，响应头会带上Cache-Control、Etag字段 。 浏览器收到响应后会把资源存到本地。
• 当浏览器再次发送请求获取该资源时，浏览器会先检查该资源是否过时（经过Cache-Control:max-age = 时间）。若是在时间内，就直接使用该资源。
• 若是时间过时，则发送请求询问该资源是否能够用。 请求头包含 If-None-Match，也就是以前响应报文中的 Etag。
• 服务器收到请求后经过 If-None-Match里的Etag和新计算的Etag作对比，若是匹配，则直接返回一个状态码 304 ，不包含任何响应体报文，告诉浏览器该资源能够用。 若是不匹配，则返回一个状态码为200再带上 Cache-Control、Etag和原始资源的新报文
• 若是不存在Etag，则用 Last-Modified 和 if-Modified-Since 作相似的判断。

2.Last-Modified、If-Modified-Since字段有什么做用？

俩个都表示资源的最后修改时间

Last-Modified 则是 是由服务器发送给客户端的HTTP请求头标签

If-Modified-Since 则是由客户端发送给服务器的HTTP请求头标签

服务器可根据请求的文件修改时间和真实的文件修改时间作比较，来判断资源是否过时。

3.Etag和If-None-Match字段有什么做用？

Etag至关于给资源生成了一个独一无二的标识，当资源被修改了，Etag就会改变。 做用和 Last-Modified 相似。

4.Last-Modified和Etag哪一个更好？

两者的做用同样，但还有一些细微的差别

1. Last-Modified的单位是秒，若是一秒内对文件进行修改了，那么使用Last-Modified不变，而Etag通常会发生改变。
2. 语义上有差异， 一个是 文件的修改时间，一个是文件的惟一标识。
3. 使用 Last-Modified，浏览器会直接看到文件的修改时间，这个信息的暴露是很差的。

5.Expires字段是什么意思？

Expires是HTTP1.0版本的报文字段，表明资源的过时时间，若是设置了Cache-control: max-age=过时秒数，Expires会被忽略。

如今大多数使用Cache-Control替代

6.Expires和Cache-Control有什么区别？

1. Expires的值表明一个GMT的时间点，表示到什么时间点过时；
2. Cache-control:max-age = value ,这个value是以秒为单位的时间段，表明有效期是多少秒。
3. Cache-control能够设置更复杂的场景，好比：Cache-control：no-cahce 、 no-store 、private

最重要的一点，若是使用Expires，那么服务器告诉全部浏览器某资源在2021年11月11日到期，到了该时间点时，则须要该资源的每个浏览器都会在同一时间发送请求。而用Cache-control，那么服务器告诉全部浏览器某资源各自存储365天，因为每个浏览器请求的时间不同，因此须要该资源的浏览器不会同时发请求。

7.Cache-Control: max-age=3600是什么意思？

就是服务器告诉浏览器，这个资源在本地缓存下来，若是再次须要该资源而且是在3600秒内，那么就不要发请求而直接使用该资源，若是超过3600秒，则发送请求向服务器询问是否可以继续使用。

8.Cache-Control: no-cache是什么意思？

至关于 max-age = 0, 就是告诉浏览器，收到这个资源先缓存下来，下次须要该资源时先向服务器确认该资源的有效性，再使用。

9.Cache-Control: no-store是什么意思？

告诉浏览器，不要缓存该资源。须要该资源时请求服务器，服务器会直接给新的。

10.Cache-Control: private、public分别是什么意思？

private是告诉中间的代理服务器不要缓存资源，只让目标浏览器缓存。

public表示任何状况下都能缓存。

11.Cache-Control: no-cache 和 Cache-Control: no-store 有什么区别？

一个是先缓存下来但不直接使用， 另外一个是彻底不缓存。