浏览器缓存详解
写这篇博客主要是想深入的谈一谈自己所理解的浏览器缓存，之前只看到浏览器的network中显示 有from cache ,from disk.但是实际上不了解整个缓存机制。碰巧最近看到了几篇非常好的文章，然后自己也打算记录下。
四种浏览器端缓存
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个完成的请求过程来说，基本是发起请求-后端处理-浏览器响应渲染这三个阶段，浏览器端可以进行优化，比如缓存机制。可以减少一些请求，比如请求的比较频繁，数据未修改，就可以直接使用缓存中的数据，不需要重新请求服务器。 按照缓存存储的位置来划分的话浏览器端一共有四种缓存方式，分别为service worker 、内存（memory cache）、硬盘（disk cache）、push cache。
- service worker MDN是这样介绍的：
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。
白话来说呢就是，Service Worker 是运行在浏览器后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，这里需要注意的是传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。 Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。 当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。
-
memory cache
字表意思就是内存缓存，主要包含页面中已经获取到的资源，比如页面的脚本文件、样式文件、图片等，内存的读取肯定比磁盘快（磁盘需要进行I/O读写，所以比内存蛮）。内存中的缓存数据一般持续性很短，页面关闭就会释放。而且内存的大小一般容量都不是很大，相比较于磁盘来说是小很多了。os需要合理的分配每一块可用的内存。电脑本身启动的程序就会占用大部分的内存，所以可以使用切用来作为缓存数据的内存一般都很小了。
-
磁盘缓存 顾名思义就是存在硬盘里的数据，可以存储的数据量比较大，但是相对来说读取比较慢，比较内存缓存来说，硬盘缓存的有点主要体现在时效性上和容量上。硬盘缓存中存入的数据是根据http header中的字段判定的。哪些资源可以进行存储，哪些不进行存储。这里又要提到两个名词了 etag 和 last-modified。也可以称为协商缓存。 一般协商缓存存储在硬盘里，至于具体的存储条件，我们后续再聊。 对于文件的存储位置如何选择呢，大概可以这样记录。 1>.大文件基本存储到硬盘缓存（至少是非内存缓存）。 2>.经常需要访问的存储到硬盘。
-
push cache 这个也是我今天刚了解的新名词，译名被叫为”推送缓存“ ，是http/2中的内容，当上边的三种缓存都没有生效的时候，便可以使用推送缓存，这个有一定的局限性，他只在session中存在，一旦会话失效，此缓存也会跟着失效，时效性也很短。 这里就了解到几点结论： 1>. push cache 只能使用一次。 2>.所有资源都会被推送，而浏览器可以拒绝接受已存在的资源的推送。 3>.一旦连接被关闭，Push Cache 就被释放. 4>.多个页面可以使用同一个HTTP/2的连接，也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。 如果以上四种缓存都没有命中，只能去重新发起请求来获取资源了。
缓存的整个过程
浏览器和服务器通过请求应答的方式，发起请求-服务器响应请求-获取资源。那么，浏览器怎么确定当前的资源应不应该缓存呢？上边我们说过，是根据服务器端响应的标识来确定的，浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。 基本过程如下：
强缓存
强缓存不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的Network选项中可以看到该请求返回200的状态码，并且Size显示from disk cache或from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。
1.Expires 缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。 Expires 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效。 Expires:Wed,22Oct201808:41:00GMT表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。
2.Cache-Control 在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存。比如当 Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。 cache-control可以有多个值：每个值得意义我在这里解释一下。 public：所有内容都将被缓存（客户端和代理服务器都可缓存）。具体来说响应可被任何中间节点缓存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中间的proxy可以缓存资源，比如下次再请求同一资源proxy1直接把自己缓存的东西给 Browser 而不再向proxy2要。不需要到server去取数据。
private：所有内容只有客户端可以缓存，Cache-Control的默认取值。具体来说，表示中间节点不允许缓存，对于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 会老老实实把Server 返回的数据发送给proxy1,自己不缓存任何数据。当下次Browser再次请求时proxy会做好请求转发而不是自作主张给自己缓存的数据。
no-cache：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存，直接请求服务器。
max-age：max-age=xxx (xxx is numeric)表示缓存内容将在xxx秒后失效
s-maxage（单位为s)：同max-age作用一样，只在代理服务器中生效（比如CDN缓存）。比如当s-maxage=60时，在这60秒中，即使更新了CDN的内容，浏览器也不会进行请求。max-age用于普通缓存，而s-maxage用于代理缓存。s-maxage的优先级高于max-age。如果存在s-maxage，则会覆盖掉max-age和Expires header。
max-stale：能容忍的最大过期时间。max-stale指令标示了客户端愿意接收一个已经过期了的响应。如果指定了max-stale的值，则最大容忍时间为对应的秒数。如果没有指定，那么说明浏览器愿意接收任何age的响应（age表示响应由源站生成或确认的时间与当前时间的差值）。
min-fresh：能够容忍的最小新鲜度。min-fresh标示了客户端不愿意接受新鲜度不多于当前的age加上min-fresh设定的时间之和的响应。
3.Expires和Cache-Control两者对比
区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；Expires主要是用来兼容HTTP1.0。已经过时且存在弊端。expires时间根据本地时间而来，如果改变本地的时间。有可能会使当前的expires缓存失效。 强缓存判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容，那我们如何获知服务器端内容是否已经发生了更新呢？此时我们需要用到协商缓存策略。
对比缓存又叫协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，一般是一个hash值，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上，那么直接以常规GET 200回包形式将新的资源（当然也包括了新的ETag）发给客户端；如果ETag是一致的，则直接返回304知会客户端直接使用本地缓存即可。这里就避免了last-modified得秒级问题。只要数据变化就产生新的etag值。
精度上来看，Etag是优于last-modified的。至少精度准确。性能上来说etag要产生hash值，last-modified只需要记录当前修改时间就可以了，这里来说last-modified的性能是优于Etag的。
缓存机制
我们介绍了这么多，但是具体的使用的先后顺序是什么呢？首先呢 强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。
实际场景应用缓存策略
1.对于频繁变动的资源最好不要使用no-cache，Cache-Control:no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。 2. 不常变动的资源则可以使用 cache-control：max-age=长时间 （这里可以根据项目和资源而定）
页面刷新的几种方式
- 输入地址栏 回车，由于是新开tab，memory cache页面关闭则不可用。查找disk cache是否可用，如果可用则使用。
- F5 页面没有关闭，内存缓存有效，会出现memory cache的情况。随后使用 disk cache。
- ctrl+F5 全部去服务器请求信的资源，不适用任何缓存文件。
