【前端面试题】HTTP缓存

什么是HTTP缓存？

当浏览器访问一个网站的时候，如果是第一次访问，就需要加载各种资源，比如html、js、css、img等，我们之后再访问网站的时候，就不需要加载各种资源，可以通过HTTP缓存策略来缓存一些资源，这样浏览器就不需要重新从服务器获取，可以直接从缓存中获取，从而提高网站的访问速度。

为什么需要使用HTTP缓存？

在输入网址到加载页面的过程中，一般会经过CPU计算、页面渲染以及网络请求等过程，其中网络请求是唯一不确定的因素，会受到环境因素的影响。所以需要HTTP缓存减少网络请求，以至于页面能够快速渲染。

请求的种类

一、强制缓存

当浏览器第一次访问网站的时候，就会向服务器发送请求，服务器会发送一些资源。
如果服务器觉得这些资源应该被缓存下来，就会在响应头设置Cache-Control:max-age=(单位是秒)。 这样浏览器就会在本地缓存中存下资源文件，下一次重新请求资源文件的时候，浏览器就会检查这个max-age有没有过期，没有过期就直接从缓存中获取，过期了就要重新请求接口获取资源。
如果服务器觉得这些资源不应该被缓存下来，那就设置Cache-Control:no-cache，这样就不会被缓存下来。
Cache-Control是通过响应头设置过来的，前端是不能做设置的，由服务器决定的。

二、协商缓存

如果使用了协商缓存的话，当浏览器访问网站的时候，服务器就会返回资源和资源标识，浏览器可以把资源和资源标识缓存到浏览器，当后续再次访问网站的时候，浏览器会把请求和资源标识一起发给服务器，这样服务器就会根据资源标识判断当前本地缓存的版本是否跟服务器的版本一致：
如果一致，服务器就会返回304状态码，浏览器就可以直接从缓存中拿资源文件。
如果不一致，服务器就会返回200状态码，同时会把新的资源和资源标识一起返回浏览器，浏览器再进行重新缓存。

资源标识有以下两种：

1、Last-Modified

上次修改时间
浏览器下次请求的时候就会将资源标识（if-Modified-Since）这个值（就是上一次从服务器获得的Last-Modified值）放在请求头里发送给服务器，服务器会将资源标识（Last-Modified）放在响应头中返回，通过对比这两个修改时间来判断本地缓存的资源文件是否一致，从而选择从哪里获取资源。

2、Etag

资源文件唯一字符串
浏览器下次请求的时候就会将资源标识（if-None-Match）这个值（就是上一次从服务器获得的Etag值）放在请求头里发送给服务器，服务器会将资源标识（Etag）放在响应头中返回，通过对比这两个唯一字符串来判断本地缓存的资源文件是否一致，从而选择从哪里获取资源。

对比：Last-Modified只能精确到秒，但是我们前端都是精确到毫秒级的，我们应该优先使用Etag。

以上就是HTTP缓存，请大家关注《前端面试题》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。