HTTP缓存方案

一、什么是HTTP缓存

当我们访问一个网站时，第一次访问就需要加载各种资源（如js,html,css等等），为了之后再次访问该网站，不再重复加载各种资料，就需要通过HTTP缓存策略来缓存一些资料，这样下次访问就直接从缓存获取，不再需要从服务器中获取，从而提高网站的访问速度，达到快速渲染效果。

1.png

二、请求缓存的类别

（1）、强缓存
第一次访问网站，就会向服务器发送请求，服务器则响应请求内容。如请求内容需要缓存下来，当下次再起请求该内容时，浏览器会先去检查这个时间有没有过期，没有过期则从缓存中获取，过期了则重新向服务器获取该资源。

1、HTTP1.1的强缓存设置：设置方法是在响应头设置Cache-Control:max-age=3600(则浏览器就会在本地缓存中保存这些文件，时间是自动缓存3600秒)，检查max-age有没有过期。

2、HTTP1.0的强缓存设置：设置过期时间Expires: Wed, 21 Oct 2015 02:30:00 GMT，检查Expires的值是否过期

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

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

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

注意：应该优先使用HTTP1.1方案，对比HTTP1.0的强缓存，HTTP1.0如果用户自身时间错乱，可能导致缓存时间过期，对比HTTP1.0弱缓存，Last-Modified只能精确到秒，但是我们前端都是精确到毫秒级的，我们应该优先使用Etag。

3.png

非第一次请求：

2.png

3、了解从输入url到看见页面，发生了什么（拓展内容）

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询

参考链接1：https://blog.csdn.net/weixin_45622540/article/details/115455084
参考链接2：https://blog.csdn.net/weixin_46318413/article/details/122676866