BOSS：小白，你这个月的绩效给你打了个C。
小白：为什么？
BOSS：小白，你看看XX的网站，打开多快啊，你再看看我们的网站，半天都加载不完，用户都跑完了。你是不是没做缓存？
小白：BOSS，我刚培训完就来公司了，还不知道怎么做缓存？
BOSS（*#?#@$，哪个坑爹的培训机构）：恩，我先给你讲下HTTP缓存，等会儿去加上，晚上十点上线。
小白（马云爸爸说996是福报！😢）：好的，BOSS。
BOSS：前端的静态资源，如html、css、js、图片、视频等等，从服务端发送到浏览器是需要时间的，为了减少这个传输延迟，我们可以把这些资源缓存到浏览器端，这样子下次打开页面的时候浏览器就可以直接获取本地缓存的资源，打开速度就会更快了。
小白：那我们怎样把这些资源缓存下来呢？
BOSS：需要区分使用的HTTP协议版本。HTTP/1.0的时候，主要是通过Pragma和Expires进行设置的。如果使用了Pragma: 'no-cache'禁用缓存，再设置Expires或者Cache-Control就没有用了。Expires是过期时间，用的是服务器的时间，和客户端时间可能存在误差。
小白：HTTP/1.1有什么不同呢？
BOSS：HTTP/1.1增加了Cache-Control头部以及ETag（资源唯一性标识）/If-None-Match、Last-Modified/If-Modified-Since标签对。
小白：Cache-Control和另外两个有什么区别？
BOSS：Cache-Control常设置为以下一些值：
- no-cache：强制向源服务器再次验证；
- no-store：禁止浏览器以及所有中间缓存存储任何版本的返回响应；
- max-age=[秒]：从请求的时间开始，允许响应被重用的最长时
HTTP/1.1 版本的缓存服务器会优先处理max-age，忽略Expires，HTTP/1.0则相反。
BOSS：HTTP缓存分为强缓存和协商缓存。与强缓存相关的头部字段有 Pragma、Expires以及Cache-Control。强缓存在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），不需要请求服务器，直接加载本地资源，http状态码为200。但是这期间如果服务器资源修改，页面就获取不到了。所以现在单页应用的html一般不要做强缓存。
小白（知识点，小本本记下来）。
BOSS：当第一次请求时，服务器返回的响应头中没有Cache-Control和Expires、Cache-Control和Expires过期，或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。通过ETag/If-None-Match、Last-Modified/If-Modified-Since标签对进行判断。
BOSS：没有修改的话服务器返回304 Not Modified，告诉浏览器可以使用缓存。有更新就会返回200状态码，并返回更新后的内容和缓存信息。
小白：整个流程是怎么样的呢？
BOSS：下面这张图好好研究下，看不懂留言问我。
image
小白：好的，BOSS。还有一个问题，为什么既需要需要ETag，又需要Last-Modified啊？
BOSS：这个问题问的很好！主要有以下的原因：
- Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内被修改多次的话，它将不能准确标注文件的修改时间
- 如果某些文件被修改了，但是内容并没有任何变化，而Last-Modified却改变了，就会导致文件无法使用缓存
- 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
小白：BOSS，我理解了。
BOSS：孺子可教也。快去把网站HTTP缓存加上。
小白：BOSS，我明天来改，我不想听马云爸爸的话修福报了。
BOSS：你明天不用来了。
小白：……
啊哈，故事纯属虚构看看就好，HTTP缓存还是可以学学的啦。
欢迎给我留言呀~
更过前端原创文章可关注公众号“web笔记本”~
关注回复“电子书”，领取免费电子书~
关注回复“资源”，领取海量学习资源，有惊喜哦~
关注回复“加群”，进高质量交流群~
网友评论