1.为什么需要浏览器缓存？
在浏览器与服务器通信的过程中，浏览器发送请求并等待服务器返回数据是一件非常耗时的事情。如果服务器性能不佳，或数据量过于庞大时，就会需要长时间等待。
并且在大量的返回数据中，有可能很多数据是没有被修改、重复加载的数据，这时为了提升网页加载效率，我们就需要浏览器缓存这些没有被修改的数据，便于规避数据请求，以达到性能优化的目的。
2 什么资源可以被缓存？
一定是静态资源，例如：JS、img、CSS
3.HTTP Header
在了解缓存之前，先了解几个跟缓存相关的状态码、请求、响应头
3.1 状态码
- 304（表示所请求的数据未做修改）
3.2 相关请求、响应头
3.2.1 请求响应头
- Cache-Control： 控制强制缓存的逻辑字段
- max-age（缓存的最大时间，单位为毫秒）
- no-cache（不使用缓存）
3.2.2 请求头(都表示浏览器通知服务器，所请求的资源最近修改时间)
-
last-Modified
-
If-Modified-Since
3.2.3 响应头（都表示服务器告知浏览器的一个资源标识）
-
Etag(优先使用,精度更准确)
-
Last-Modified（只能到秒）
小Tips：请求响应头需要搭配使用：
If-Modified-Since -> Last-Modified
Etag -> If-None-Match
4 缓存策略
4.1 强制缓存
具体过程如下：
1.浏览器初次发起请求，如果服务器觉得资源适合被缓存时，会在返回资源时的Response Headers中加入Cache-Control字段
2.此时浏览器再次请求时，只要判断Cache-Control是否过期，若没有过期，则直接在本地缓存中返回资源。若缓存失效了，就会再次发送到服务器，并返回资源
4.2 协商缓存
协商缓存是一个服务端缓存策略，是通过服务端判断一个资源是否需要被缓存、客户端资源是否和服务端资源一致
具体过程如下：
1.浏览器初次请求时，服务器会返回资源和资源标识（Last-Modified/Etag）
2.浏览器再次请求（此时会带上资源标识（if-Modified-Since/If-Nono-Match）），服务器会根据资源标识判断该资源是否是最新资源，如果是，则返回304 ，如果不是则返回资源和新的资源标识（Last-Modified/Etag）
5 为什么需要两种缓存方式
原因在于，这跟浏览器刷新方式有关。
浏览器有三种刷新方式，并都会对缓存有所影响
-
正常操作，地址输入url，跳转链接，前进后退等（强制缓存有效，协商缓存有效）
-
手动刷新，F5，右击刷新（强制缓存失效，协商缓存有效）
-
强制刷新Ctrl+F5（全部所有失效）
最后附上一张浏览器缓存全过程的流程图：
