漫话前端缓存
前端缓存主要分为浏览器缓存和http缓存。通过下图，我们先大致了解一下前端缓存的分类。
01
浏览器缓存
图2来自chrom的开发者工具，该图很清晰的可以看到浏览器的缓存分类，在平时的开发过程中，最常用的缓存主要有cookie，localStage，seeionStage这三种缓存，那么这三种缓存有什么区别呢？
- 用途：
- cookie主要存储用户的相关信息，可以在客户端和服务器之间来回传递，而localStage和seeionStage则不能
- 大小：
- cookie存储的大小只有几K（不同浏览器里面略有差异），localStage和seeionStage则可以达到几M
- 生命周期：
- cookie会设定一个有效期，过期即清除，相比于cookie，localStage是只有当用户手动清除的时候才会被清理，seeionStage则是在浏览器关闭当前tab时进行清除
02
Http缓存
http缓存包含强制缓存和协商缓存两种：
强制缓存
强制缓存的步骤：
- 第一次发起请求，服务器返回资源，并在响应报头添加强制缓存参数。
- 根据缓存参数决定是否将返回资源缓存
- 第二次发起请求，浏览器根据缓存数据库的有效期决定是否从缓存中拿取，如果缓存有效则返回200状态，反之则再次请求服务器
- 重复以上步骤
强制缓存的优点：
- 减少了客户端与服务端之间的请求，降低了流量消耗
- 加快了页面的响应速度
- 减少了服务器的访问压力
强制缓存的相关字段：
Expires，cache-control，pragma
Expires是http1.0的字段，表示缓存到期时间（当前时间+缓存有效期）
Expires：Tue, 20 Nov 2018 07:35:04 GMT
该字段采用绝对时间，该字段由服务器返回，并与浏览器时间作对比，判断缓存是否有效，这时会发现，如果时差或者浏览器设置时间与服务器不一致，就会导致缓存无效
cache-control是http1.1的字段，该字段采用相对时间，可以很好地解决Expires的缺点
cache-control:max-age=172800
cache-control还有其他几个常见的取值：
- no-store:不缓存，无论何时访问多少次都会直接从服务器拿取数据
- no-cache:表面意思是不缓存，实际上会把请求的资源放入缓存中，类似max-age = 0
- public:表示客户端和代理服务器都可缓存
- private:表示只有客户端可缓存
Pragma是HTTP1.0中的字段，相当于Cache-Control: no-cache，但是HTTP的响应头不支持这个属性，所以它不能拿来完全替代HTTP/1.1中定义的Cache-control头。主要用于兼容http1.0的客户端。
当Expires和cache-control同时存在时，cache-control的优先级要高于Expires，通常为了兼容http1.0的客户端两组会同时使用
那当开发人员更新了资源发布到服务器后，由于强制缓存有效，因而没有向服务器请求新的资源，从而导致了新发布的内容没有及时的在网页上展示出来。这就是强制缓存所导致的弊端，针对这个问题最常用的解决办法就是在文件名后面加上hash或者版本号（还有一些其他的解决办法，此处不再一一讲解），让浏览器认为是在访问一个新的资源。
协商缓存（对比缓存）
协商缓存是在强制缓存超过有效期时，浏览器拿到缓存中的标识来与服务器做对比，如果缓存依然是最新资源，则返回304状态，如果不是，服务器则返回新的资源，然后再写入缓存。
协商缓存跟强制缓存不相同的是，它会请求服务器，当缓存有效时，返回304状态，返回资源依然从缓存中读取，当缓存不是最新资源时，才会返回响应资源，再次写入缓存。
对比缓存两组字段：
1、Last-Modified和If-Modified-Since
Last-Modified是服务器在第一次响应请求时，告诉浏览器最后修改的时间
If-Modified-Since是当缓存有效期已过时，将缓存中的last-Modidied写入If-Modified-Since，然后再与服务器上的Last-Modified做对比，如果相等则返回304，否则说明资源被改动，重新请求数据
2、Etag和If-None-Match
Etag是被访问资源的特殊标识，它与Last-Modified和If-Modified-Since工作原理大致相同，只是与Last-Modified的赋值不相同，Last-Modified一般采用的是更新时间，而Etag则采用hash(一般采用hash)
那为何有两组字段，因为Last-Modified和If-Modified-Since最低单位是秒，如果在一秒之内更新资源缓存是不会被更新的，而Etag和If-None-Match则解决了上述问题，所以Etag的优先级高于Last-Modified
以上涉及到的都是一些基本的理论知识，若要更进一步的理解前端缓存，还需更多的实践操练。
