专栏首页前端重点笔记浏览器缓存机制

浏览器缓存机制

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 ArchibaldHTTP/2 push is tougher than I thought 这篇文章,文章中的几个结论:

  • 所有的资源都能被推送,并且能够被缓存,但是 Edge 和 Safari 浏览器支持相对比较差
  • 可以推送 no-cache 和 no-store 的资源
  • 一旦连接被关闭,Push Cache 就被释放
  • 多个页面可以使用同一个HTTP/2的连接,也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定,出于对性能的考虑,有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。
  • Push Cache 中的缓存只能被使用一次
  • 浏览器可以拒绝接受已经存在的资源推送
  • 你可以给其他域 三、缓存过程分析 浏览器与服务器通信的方式为应答模式,即是:浏览器发起HTTP请求 – 服务器响应该请求,那么浏览器怎么确定一个资源该不该缓存,如何去缓存呢?浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存标识存入浏览器缓存,浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。具体过程如下图:

第一次发起HTTP请求 由上图我们可以知道:

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从输入url到页面加载完成发生了什么详解

    这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度。当然我写的这...

    IT人一直在路上
  • js中关于假值和空数组的总结

    1、“假值”总共只有6个: false,undefined,null,0,""(空字符串),NaN 除此之外的所有值,都是“真值”,即在逻辑判断中可以当true...

    IT人一直在路上
  • Day3

    3.dict.setdefault(“stu005”,"liu")函数的作用,先检测字典中是否有key为“stu005”

    IT人一直在路上
  • MESI协议:Cache 一致性协议

    把所有的读写请求都通过总线(Bus)广播给所有的 CPU 核心,然后让各个核心去“嗅探”这些请求,再根据本地的情况进行响应。

    斯武丶风晴
  • 扒扒HTTP缓存

    摘要: 本文会从理论和实战两方面描述http缓存。理论层面会介绍:缓存命中、缓存丢失、Revalidations(重新验证)、命中率(Hit Rate)、字节...

    ImportSource
  • 性能优化第一弹——缓存大探究

    Hello大家好,今天我们的主题是缓存!为什么要谈缓存,相信做前端开发的同学们都对缓存又爱又恨,因为它对于性能影响真的很大。优秀的缓存策略能够减少网页渲染延迟,...

    萌兔IT
  • 用Java写一个简单的缓存操作类

    使用缓存已经是开发中老生常谈的一件事了,常用专门处理缓存的工具比如Redis、MemCache等,但是有些时候可能需要一些简单的缓存处理,没必要用上这种专门的缓...

    beifengtz
  • SpringBoot 整合 Cacheable

    本文由 Alone88 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名 最后编辑时间为...

    Alone88
  • MyBatis一级缓存详解

    缓存就是内存中的一个对象,用于对数据库查询结果的保存,用于减少与数据库的交互次数从而降低数据库的压力,进而提高响应速度。

    cxuan
  • 缓存有那么多种,分别是干什么的?

    只要是位正儿八经的程序员应该都知道“缓存”是什么,甚至我司的很多做运营的小姐姐现在和程序员小哥哥交流中都时不时冒出“缓存”这个词,让人压力山大。

    AI乔治

扫码关注云+社区

领取腾讯云代金券