在前端开发中，性能是一个永恒的话题，没有最好，只有更好。判断一个网站性能好坏，一个直入眼观的即是网页的反应速度，有一个方式就是使用缓存，一个优秀的缓存策略可以缩短网页请求的时间，减少延迟，并且网页可以重复利用，还可以减少带宽，降低网络负荷。
1：为什么需要缓存？
a：缓存可以减少用户等待时间，提升用户体验
b：减少网络带宽消耗
c：降低服务器压力
Note：缓存使用不当，也会造成‘脏数据’问题
2：常见的缓存类型
强缓存 -
Expires服务器端设置，表示该资源的过期时间，会有弊端，客户端时间和服务器时间不一致的问题。
Cache-Control：max-age表示缓存资源的最大生命周期，单位是秒
所以Expires 结合 Cache-Control 一起使用，大型网站中一般比较适用
协商缓存-
Last-Modified：值为资源的最后更新时间，随服务器response返回
If-Modified-Since：通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有，则命中协商缓存
Etag：表示资源内容的唯一标识，即资源的消息摘要
If-None-Match：服务器通过比较请求头中的If-None-Match与当前资源的Etag是否一致来判断资源是否在两次请求期间有过修改
3：缓存流程图示：
image.png
a：浏览器会先检测强缓存类型（Cache-Control 或者 Expires）是否有效；命中直接浏览器本地获取缓存资源
b：未命中。服务器会根据请求头Request Header验证这个资源是否命中协商缓存，称之为HTTP二次验证，命中，服务器返回请求，但返回资源，而是告诉客户端直接中直接从浏览器缓存中获取
Note：
1.强缓存不会发生请求，协商缓存存在服务器请求
2.当协商缓存也未命中时，则服务器会将资源发送到客户端
3.F5刷新页面，会跳过强缓存
4.Ctrl+F5刷新页面，跳过强缓存和协商缓存
5.不会缓存的情况
HTTPS POST请求 根据Cookie获取认证信息 Request Header Cache-Control：no-cache， max-age=0
6.小故事大道理
上文对整个概念做了阐述，还是不够形象，我们来通过几个小故事生动理解一下：
故事一：Last-Modified
浏览器：Hi，我需要 jartto.min.js 这个文件，如果是在 Last-Modified: Fri Feb 15 2019 19:57:31 GMT 之后修改过的，请发给我。
服务器：（检查文件的修改时间）
服务器：Oh，这个文件在那个时间之后没有被修改过，你已经有最新的版本了。
浏览器：太好了，那我就显示给用户了。
故事二：ETag
浏览器：Hi，我需要 jartto.css 这个文件，有没有不匹配 3c61f-1c1-2aecb436 这个串的
服务器：（检查 ETag…）
服务器：Hey，我这里的版本也是 3c61f-1c1-2aecb436，你已经是最新的版本了
浏览器：好，那就可以使用本地缓存了
网友评论