前端缓存

前端缓存分两种：

• HTTP缓存，主要用于HTTP请求资源时用到（仅GET请求），相关设置都在服务器端设置
• 浏览器缓存，浏览器缓存主要是我们前端对于某些特殊数据进行本地缓存，相关设置在前端代码中设置

两种缓存使用到的属性如下：

HTTP缓存过程

浏览器第一次向服务器发起请求后拿到对应的资源，会根据响应报文中HTTP头的缓存标识决定是都缓存资源。后面再次请求该资源时分下面两种情况：

如果是强缓存，并且资源被缓存，那么浏览器后面每次发起请求时都会在缓存中查找请求的资源，并判断标识资源是否有效，无效则发送请求到服务端，如果有效则直接使用缓存资源。

如果是协商缓存，请求将携带标识传递给服务器，服务器根据标识判断缓存是否有效，有效则走304，无效则查找新的资源返回给前端。

强缓存分两种规则进行缓存

• Cache-Control

  Cache-Control是在HTTP/1.1中使用的一种缓存方式，它里面主要可以设置下面几个属性：
  public：所有内容都将被缓存
  private：所有内容只有在客户端可以缓存，Cache-Control默认取值
  no-cache：客户端缓存内容，但是是否使用缓存需要经过协商缓存来验证决定
  no-store：所有内容都不会被缓存，包括强缓存和协商缓存
  max-age=600（600 is numeric）：缓存内容将在600秒后失效

• Expires

  expires是通过设置绝对时间来进行缓存，例如：expires: Fri, 01 Jan 1990 00:00:00 GMT

Cache-Control和Expires两者比较

Cache-Control使用的是相对时间，一般是设置多长时间后过期，Expires设置的是绝对时间，过了设置的时间后过期，而且这个时间是根据服务器的时间来确定的，可能存在客户端与服务端时间不同步的情况造成过期时间不准确。另外Cache-Control的优先级比expires高，如果都设置的情况下优先使用前者。

注意点：强缓存的判断过程在发起请求之前，所以如果命中缓存这里是不需要与服务器进行任何交互的

协商缓存

协商缓存是在强缓存失效后，并且资源设置了协商缓存标识，那么发起请求时会携带缓存标识，服务器接收到请求后会对比标识，判断资源是否有效。如果生效返回304，浏览器去缓存获取资源。如果无效则服务器直接查询相关资源返回。

协商缓存使用到的几个字段

• Last-Modified/If-Modified-Since
• Etag/If-None-Match

last-Modify是服务器资源的最新修改时间，但是这个时间修改了，但是资源未必一定有变更。
Etag是根据文件的内容生成的唯一标识，如果它变化了，那么资源肯定有变更，所以Etag相对于Last-Modified来说更加的准确，所有Etag的优先级要高于Last-Modified

If-Modified-Since与If-None-Match取对应缓存字段的值传递给后端，后端根据值去比对

最后对于HTTP缓存的流程我们大概了解了，但是这些资源到底缓存到哪里去了呢？

分两种形式memory cache/disk cache，前者表示内存缓存，后者表示硬盘缓存

• memory cache内存缓存，浏览器关闭资源被销毁，再次打开需要重新获取，一般会将脚本、字体、图片等存在内存中。
• disk cache硬盘缓存，关闭浏览器下次打开资源依旧是from disk cache，一般缓存一些非脚本文件，比如css

浏览器缓存对于大多数人都比价熟悉，这里就...