谈到缓存时，大家想到的可能有浏览器缓存、CDN缓存、服务器缓存等，而浏览器缓存则是与我们前端开发最密切相关的，有时为了考虑用户体验以及网站性能优化，通常我们会考虑在浏览器缓存上做一定的优化，下面就谈谈我对浏览器缓存的基本认知。
我们通常所说的浏览器缓存，通常分为强缓存和协商缓存两种：
1.强缓存和协商缓存
①浏览器在加载资源的时候会根据这个资源的一些http header判断它是否命中强缓存。如果命中了强缓存，浏览器就直接从缓存中加载这个资源，连请求都不会发送到网页所在的服务器。
②当强缓存没有命中时，浏览器会发送一个请求到服务器，服务器端依据资源的另一些http header验证是否命中协商缓存。若命中，服务器将这个请求返回，但不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就自己从自己的缓存中加载这个资源。
③当协商缓存没有命中的时候，浏览器直接从服务器加载资源数据。
2.1 强缓存的原理
命中强缓存后http状态码： 200
network里面的size显示from cache
http1.0：Expires
http1.1：Cache-Control
上面这两个header可以只启用一个或者两个都使用。两个同时存在时Cache-control的优先级高于Expires
2.2 强缓存的管理
可以通过两种方式设置强缓存：
① 通过代码的方式，在web服务器返回的响应中添加Expires和Cache-control Header
② 通过配置web服务器的方式，让web服务器在响应资源的时候统一添加Expires和Cache-control Header
2.3 由于在开发的时候不会专门去配置强缓存，而浏览器又默认会缓存图片、css和js等静态资源，所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果，解决这个问题的方法有很多，常用的有以下几种：
① ctrl+F5
② 使用浏览器的隐私模式开发
③ 如果用的是chrome浏览器的话，可以f12在network里面把缓存禁掉。
④ 给资源加上一个动态的参数，例如时间戳
⑥ 如果ajax请求存在缓存 可以在请求的地址栏追加随机数或者时间戳
⑦ 动态设置iframe时也可能会出现缓存问题，也可以在src后面动态添加时间戳或者随机数解决
2.4 强缓存的应用
① 强缓存是前端性能优化最有利的工具。对于有大量今天资源的网站，一定要利用强缓存，提高响应速度。
通常做法：将静态资源全部配置一个超时时间超长的Expires或Cache-Control。
3.1 协商缓存的原理
协商缓存状态码： 304 （Not Modified）
会显示资源的大小
从浏览器缓存中加载资源，但是会和web服务器通信，web服务器返回告知其在浏览器缓存中加载资源。
① 浏览器第一次跟服务器请求一个资源的时候，服务器在返回这个资源的同时，在response的header上加上Last-Modified的header
② 浏览器再次请求这个资源的时候，请求头上加上If-Modified-Since的header，这个header的值就是上一次请求返回时的Last-Modified的值
③服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，
3.2 协商缓存的管理
强缓存由于不发请求到服务器，所以不知道资源的更新，协商缓存会发请求到服务器，服务器知道支援的更新。大部分的web服务器都默认开启协商缓存。
1）当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
2）当f5刷新网页时，跳过强缓存，但是会检查协商缓存；
