前言对于前端开发者来说，前端缓存是不可避免的。 前缓存有哪些东西，该怎么设置呢？
因为前缓存分为HTTP缓存和浏览器缓存，所以我们将分别讨论它们
HTTP缓存HTTP缓存有两种类型：
强缓存协商缓存的主要区别在于使用本地缓存时，是否需要向服务器验证本地缓存是否仍然有效。 强健的领导者，协商缓存，必须与服务器协商，最终决定是否使用本地缓存。
当强缓存浏览器向服务器发出请求时，服务器将缓存规则放入HTTP响应消息的HTTP标头中，并将其与请求结果一起返回给浏览器。 用于控制强制缓存的字段分别为Expires和Cache-Control，它们的优先级高于Expires。
Expires Expires是HTTP/1.0控制web缓存的字段，其值是服务器返回请求结果缓存的截止日期。 这意味着，重新启动请求时，如果客户端时间小于Expires值，则保留缓存结果。
在HTTP/1.1中，Expire已被Cache-Control替换。 由于Expires控制缓存的原理是比较客户端的时间和服务器端返回的时间，因此如果客户端和服务器端的时间由于某种原因不同(客户端和服务器端的时间不准确)，则强制缓存将
如果Cache-Control符合缓存策略，则服务器不会发送新资源，但并不意味着客户端和服务器之间没有会话，客户端会向服务器发送请求。
Cache-Control不仅可以用于响应，还可以用于请求。 使用开发人员工具，模拟提交请求时带上Cache-Control。 如果选中Disable cache并刷新页面，您会看到Request Headers中有一个名为Cache-Control: no-cache的字段。
在HTTP/1.1中，Cache-Control是最重要的规则，它主要用于控制web缓存，主要值如下：
公共：所有内容都将被缓存。 (客户端和代理服务器均可缓存) )。
如果public显示了重新响应标头，则即使有相关的HTTP身份验证，或者响应状态代码通常无法缓存，也可以缓存响应。 在大多数情况下，公共不是必需的。 因为明确的缓存信息(如max-age )表明响应是可缓存的
private :只有客户端可以缓存所有内容，Cache-Control的默认值
相比之下，浏览器可以缓存私有响应。 但是，这些响应通常只缓存于单个用户，因此不允许中间缓存进行缓存。 例如，用户的浏览器可以缓存包含用户个人信息的HTML页面，但不能缓存CDN
no-cache :客户端缓存内容，但必须通过协商缓存验证是否使用缓存
no-cache表示在使用响应满足对网站的同意请求之前，必须向服务器确认返回的响应是否已更改。 因此，如果存在正确的验证令牌(ETag )，no-cache将启动往返通信以验证缓存响应，但如果资源没有变化，则可以避免下载
no-store :不会缓存所有内容。 这意味着不使用强制缓存，也不使用协商缓存
no-store意味着直接禁止在浏览器和所有中间缓存中保存任何版本的响应，包括包含隐私和银行业务数据的响应。 每次用户请求资产时，都会向服务器发送请求并下载完整的响应
max-age=xxx(XXXisnumeric ) :缓存内容在XXX秒后失效
max-age值定义了文档的最大使用时间——，以秒为单位，从最初创建文档到文档过期且不再可用之间的最大有效生存时间
协商缓存只是缓存过期并不意味着原始服务器实际上与当前活动的文档不同。 这意味着检查的时间到了。 这称为协商缓存，意味着高速缓存必须查询原始服务器是否发生了更改
再次确认显示内容已更改时，缓存会获取新文档的副本，将其保存到旧文档的位置，并将文档发送到客户端。 如果再验证内容没有变化，缓存只要获取包含新有效期限的新报头，更新缓存内的报头，更新缓存内的报头即可####用有条件的方法进行再验证
HTTP的条件方法可以有效地实现再验证。 HTTP允许缓存向原始服务器发送条件GET，请求服务器仅在文档与缓存中现有副本不同时才发送回对象代理，如果缓存是最有助于验证的两个标头
如果自指定日期以来文档发生了更改，if-modified-since : date :将执行请求方法。 它可以与Last-Modfied服务器的响应标头配合使用，只有在内容发生更改且与缓存的版本不同时才能检索内容
If-None-Match:tags:服务器可以为文档提供特殊的标记(ETag )，而不是匹配最近的修改日期(如序列号)。 如果缓存的标记与服务器文档中的标记不同，则If-None-Match标头执行请求的方法
if-modified-since :/last-modified的具体流程为以下：
客户端
一次向服务器发起请求,服务器将最后的修改日期(Last-Modified)附加到所提供的文档上去当再一次请求资源时间,如果没有命中强缓存,在执行在验证时,会包含一个If-Modifed-Since首部,其中携带有最后修改已缓存副本的日期: If-Modified-Since: <cached last-modified data>如果内容被修改了,服务器回送新的文档,返回200状态码和最新的修改日期如果内容没有被修改,会返回一个304 Not Modified响应 If-None-Match / ETag有些情况下仅使用最后修改日期进行再验证是不够的
有些文档有可能会被周期性的重写(比如: 从一个后台进程中写入),但实际上包含的数据常常是一样分,尽管内容没有变化,但修改日期会发生变化有些文档可能被修改了,但所做修改并不重要.不需要让世界范围内的缓存都重装数据(比如填写注释)有些服务器无法准确判定其页面的最后修改日期有些服务器提供的文档会在毫秒间隙发生变化(比如,实时监视器),对这些服务器来说,以一秒为粒度的修改日期可能就不够用了 浏览器缓存当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。
优点：
减少页面加载时间；减少服务器负载；下面介绍几种具体的缓存方案：
DNS缓存我们知道url其实只是一个别名，真实的服务器请求地址，实际上是一个IP地址。获得IP地址的方式，就是查询DNS映射表。虽然这是一个非常简单的查询，但如果每次用户访问一个url都去查询DNS一次，未免显得太频繁。DNS会告诉你，你别老是经常过来，万一我挂了，我们就无法愉快地玩耍了。
DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。
不同浏览器的缓存机制不同： IE对DNS记录默认的缓存时间为30分钟，Firefox对DNS记录默认的缓存时间为1分钟，Chrome对DNS记录默认的缓存时间为1分钟。
缓存时间长：减少DNS的重复查找，节省时间。
缓存时间短：及时检测服务器的IP变化，保证访问的正确性。
cdn缓存是一种服务端缓存，CDN服务商将源站的资源缓存到遍布全国的高性能加速节点上，当用户访问相应的业务资源时，用户会被调度至最接近的节点最近的节点ip返回给用户，在web性能优化中，它主要起到了，缓解源站压力，优化不同用户的访问速度与体验的作用。
流程客户端访问网站的过程：没有CDN：
用户在浏览器访问栏中输入要访问的域名；浏览器向DNS服务器请求对该域名的解析；DNS服务器返回该域名的IP地址给浏览器浏览器使用该IP地址向服务器请求内容。服务器将用户请求的内容返回给浏览器。使用了CDN：
用户在浏览器中输入要访问的域名。浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。用户向CDN的负载均衡设备发起内容URL访问请求。CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。选择的依据包括：根据用户IP地址，判断哪一台服务器距离用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器的负载情况，判断哪一台服务器的负载较小。基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户。用户向缓存服务器发出请求。缓存服务器响应用户请求，将用户所需内容传送到用户。如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。 缓存规则 首次访问，下载网站的静态资源（如：JS、CSS、图片等）到本地第二次访问浏览器从缓存中加载资源，不再请求服务器，提高网站访问速度使用CDN当浏览器缓存过期，浏览器不是直接向原站点请求资源，而是想CDN最近站点请求CDN最近站点也是有缓存的，如果缓存过期，那么就由CDN最近站点向原站点发送请求获取最新资源CDN节点缓存机制在不同服务商中是不同的，但一般都遵循HTTP协议，通过http响应头中的Cache-Control:max-age的字段来设置CDN节点文件缓存时间。当客户端向CDN节点请求数据时，CDN会判断缓存数据是否过期，若没有过期，则直接将缓存数据返回给客户端，否则就向源站点发出请求，从源站点拉取最新数据，更新本地缓存，并将最新数据返回给客户端。
CDN缓存时间会对“回源率”产生直接的影响，若CDN缓存时间短，则数据经常失效，导致频繁回源，增加了源站的负载，同时也增大了访问延时；若缓存时间长，数据更新时间慢，因此需要针对不同的业务需求来选择特定的数据缓存管理。
比如：
<script type="text/javascript" src="//j1.58cdn.com.cn/escstatic/appSdk/cstSdk/cst-new-app.js?cachevers=30"></script><script type="text/javascript" src="//j1.58cdn.com.cn/m58/postnew/util/js/esl_zepto.min_v20150420200700.js"></script>我们可以给CDN加大缓存时间，然后通过版本号来控制引入的前端资源；如果有更新的话，直接更新资源后面拼接的版本号；在浏览器加载资源的时候由于资源URL的参数发生了变化，就形成了一个新的资源链接，这是向附近CDN站点请求时，是找不到资源的，然后在向原站点请求最新资源更新。