HTTP缓存

为什么要使用http缓存

我们假设请求一次服务器，请求头大小1k，响应头大小1k，请求的文件大小10k，那么一次请求的流量就是12k，10次就是120k，N次请求就是12*N，问题就很明显了
1、客户端每次都要请求服务器浪费流量，比如，我们手机端如果每次打开同一页面都需要流量的话，消耗可想而知
2、其次服务器每次都要提供查找、下载，请求用户基数大的话，就会为服务器造成比较大的压力
3、客户端每次请求完成都要进行页面渲染，用户体验就是特别差

那么如果我们将请求的文件存放起来使用，就可以解决这些问题，这时候就有了http缓存的概念，比如某些比较大的页面，第一次打开时候比较慢，但是第二次之后就快了，缓存内容主要很对样式（css），js（javascript脚本），图片，这样一些列更新频率不大的静态文件，所以缓存不是缓存了某个http的响应，更多的是一些静态的资源文件，这就是缓存存在的价值。

缓存的实现

在http中，我们更多的通过http请求头和响应头来实现

缓存的工作原理

HTTP缓存的头部字段

Cache-Control：

http控制缓存的最高指令，用不用缓存，他说的算
他有这么些字段
no-store:所有内容都不进行缓存
no-cache:缓存，但是浏览器缓存前，都会请求服务器判断缓存资源是否最新
max-age=x(单位秒):请求缓存后，x秒内不再进行请求
s-max-age=x(单位秒):代理服务器请求源站缓存后的x秒不再发起请求，只对CDN缓存有效
public:客户端代理服务器CDN都可以缓存
private:只有客户端可以缓存

Expries

响应头，代表资源过期时间，由服务器返回提供，是http1.0的属性，在于max-age共存情况下优先级低

Last-Modified

响应头，资源最新修改时间，由服务器告诉浏览器

if-Modified-Since

请求头，资源最新修改时间，由浏览器告诉服务器，和Last-Modified是一对，它俩会进行对比

Etag

响应头，资源标识，有服务器告诉浏览器

if-None-Match

请求头，缓存资源标识，由浏览器告诉服务器（其实就是上次服务器给的Etag），和Etag是一对，它俩会进行对比

HTTP缓存的工作方式

场景一：

浏览器：服务器商量个事，我现在需要一个haha,js的文件，你绑我找找，然后给我
服务器：你咋次次都找我要呢，烦不烦，这次给你，但是约定个时间，不到xxx时间，别在来烦我ok？（给了浏览器俩后脑勺之后）给你这是你要的haha.js，还有Exprice过期时间
各位喜欢的大白话就是，你要是把，给你，不到时间被烦我了，到期在来要，但是聪明如你肯定看出了问题啊，假设Exprice已经过期，浏览器再次请求服务器，但是haha.js并没有任何改变，那么这个请求是不是就该避免掉？答案是的，于是就有了场景二

场景二：

让服务器与浏览器在文件过期的基础上，再加一个文件的最新修改时间对比–Last-Modified与if-Modified-Since

这次浏览器为了不挨后脑勺，般若波罗蜜
浏览器：服务器，商量个事呗，我现在要一个haha.js的文件，你找到了给我，在顺便给我一个过期时间，不到时间我保证不来烦你，真的！
浏览器：行呀，过期时间给你，js文件给你，另外我再给你一个最新资源的修改时间Last-Moditifed，等过期的时候，咱俩对下时间，对得上你就别烦我，来给你haha.js，Exprise，还有Last-Modified

这里流程就变了，浏览器请求js，服务器给个过期时间，还给了个资源最新修改时间，到期了，浏览器对比一下自己的if-Modified-Since和服务器的Lasr-Modified，如果一个时间的，浏览器默认手里这个haha.js和现在的haha.js还是一个，不用管服务器要了
到这里，看起来好像没啥瑕疵，但是其实还是有很大的问题存在的，
1、Exprise这个字段不太稳定
2、在很极端的情况下，Last-Moditied只能精确到秒，假设文件是在1秒内发生变动的，那么Last-Modified是无法感应到haha.js的变化的，这样情况下，浏览器永远拿不到最新的haha.js文件，可能有的同学说，诶，这种情况好像不多嘛，但是你想想，像T宝，J东这样的网站，每秒，甚至每一毫秒都有人在访问，所以在任意一时间更新一个文件，总有一些人，收不到它的变化，所以这就是个看起来跟极端，但是必然会发生的情况，一定要考虑，咋整，场景三

场景三：

让服务器与浏览器在过期时间Exprise+Last-Modified基础上，在增加一个Etag与if-None-Match。Exprise不稳定，就在加入一个max-age来代替之
浏览器：服务器。。。。。。。我要啥，你懂得
服务器：我不懂，给你haha.js文件，过期时间，我在给你一个max-age=60，Last-Modified你也收好了，再加一个文件的唯一标识Etag

60秒一过，一对比Etag，一样，则说明没有修改过，完美！

先别美，其实这个方案并不完美，因为浏览器其实不能主动感知文件发生变化，只能等待Exprise和max-age这个过期时间，想做到完美，从http本身来说很难解决了，但是活人能让尿憋死？我们对缓存方案进行改进就好了嘛，如何改进我们的缓存方案呢？

缓存方案改进

md5/hash缓存

通过不缓存htm，为静态文件添加MD5或者hash标识，解决浏览器无法跳过缓存过期时间，主动感知文件变化的问题

CDN缓存

这是现在互联网最常用的缓存方式，CDN是构建在网络之上的内容发布网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容发布、调度等功能模块，使用户就近获取内容，降低网络拥塞，提高用户访问响应速度和命中率