浏览器缓存机制

1.为何要使用浏览器缓存

　　1.1减小网络请求

　　1.2加快浏览器响应时间

解释：在用户浏览网络的时候，同一个域名下的网页大部分是有不少共同文件的，好比第三方js文件，css文件，因此咱们不可能当用户每浏览一个网页或者刷新同一个网页时，全部文件都从新请求，那样的页面加载时间将会大大延长，用户体验也至关很差。

浏览器是如何缓存的呢？

话很少说，先上一个思惟导图。 

2.缓存位置

从缓存位置上来讲一共有四种，且各自有优先级，查找缓存时会依次查找，当都没有找到时，才会去请求网络。

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

2.1Service Worker

　Service Worker 是运行在浏览器背后的独立线程，通常能够用来实现缓存功能。使用 　　Service Worker的话，传输协议必须为 HTTPS。由于 Service Worker 中涉及到请求拦截，因此必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其余内建的缓存机制不一样，它可让咱们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，而且缓存是持续性的。

至于Service Worker实现缓存功能的步骤能够直接看图：

　

步骤分为如下部分：

• register 这个是由 client 端发起，注册一个 serviceWorker，这须要一个专门的 sw 处理文件
• install 注册成功后，此时 sw 中会触发 install 事件， 需知 sw 中都是事件触发的方式进行的逻辑调用
• activate 安装后要等待激活，也就是 activated 事件，只要 register 成功后就会触发 install ，但不会当即触发 activated，这个稍后再说
• idle 在 activated 以后就能够开始对 client 的请求进行拦截处理，sw 发起请求用的是 fetch api
• terminate 这一步是浏览器自身的判断处理，当 sw 长时间不用以后，处于闲置状态，浏览器会把该 sw 暂停，直到再次使

Service Worker详解见 深刻理解service worker

3.Memory Cache

Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据确定比磁盘快,内存缓存虽然读取高效，但是缓存持续性很短，会随着进程的释放而释放。 一旦咱们关闭 Tab 页面，内存中的缓存也就被释放了。

那么既然内存缓存这么高效，咱们是否是能让数据都存放在内存中呢？
这是不可能的。计算机中的内存必定比硬盘容量小得多，操做系统须要精打细算内存的使用，因此能让咱们使用的内存必然很少。

当咱们访问过页面之后，再次刷新页面，能够发现不少数据都来自于内存缓存

须要注意的事情是，内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并不是仅仅是对URL作匹配，还可能会对Content-Type，CORS等其余特征作校验

4.Disk Cache

Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，可是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

在全部浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源须要缓存，哪些资源能够不请求直接使用，哪些资源已通过期须要从新请求。而且即便在跨站点的状况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache，关于 HTTP 的协议头中的缓存字段，咱们会在下文进行详细介绍。

5.Push Cache

Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，而且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并不是严格执行HTTP头中的缓存指令。

Push Cache 在国内可以查到的资料不多，也是由于 HTTP/2 在国内不够普及。这里推荐阅读Jake Archibald的 HTTP/2 push is tougher than I thought 这篇文章，文章中的几个结论：

• 全部的资源都能被推送，而且可以被缓存,可是 Edge 和 Safari 浏览器支持相对比较差
• 能够推送 no-cache 和 no-store 的资源
• 一旦链接被关闭，Push Cache 就被释放
• 多个页面可使用同一个HTTP/2的链接，也就可使用同一个Push Cache。这主要仍是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不一样的tab标签使用同一个HTTP链接。
• Push Cache 中的缓存只能被使用一次
• 浏览器能够拒绝接受已经存在的资源推送
• 你能够给其余域

  3、缓存过程分析

  浏览器与服务器通讯的方式为应答模式，便是：浏览器发起HTTP请求 – 服务器响应该请求，那么浏览器怎么肯定一个资源该不应缓存，如何去缓存呢？浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存标识存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来肯定的。具体过程以下图：

   

   

  第一次发起HTTP请求

  由上图咱们能够知道：

  • 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识

  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

  以上两点结论就是浏览器缓存机制的关键，它确保了每一个请求的缓存存入与读取，只要咱们再理解浏览器缓存的使用规则，那么全部的问题就迎刃而解了，本文也将围绕着这点进行详细分析。为了方便你们理解，这里咱们根据是否须要向服务器从新发起HTTP请求将缓存过程分为两个部分，分别是强缓存和协商缓存。

 

原文出处：https://www.cnblogs.com/liutianzeng/p/11294955.html