浏览器缓存机制

缓存位置


缓存位置分为四种,并有如下优先级,当依次查找缓存且没有命中的时候,才会去请求网络

  1. service Worker
  2. Memory Cache
  3. Disk Cache
  4. Push Cache
  5. 网络请求

Service Worker

Service Worker是运行在浏览器背后的独立线程,一般可以用于实现缓存。使用service worker,传输协议必须为HTTPS。因为service worker 中涉及到请求拦截。

Service Worker 实现缓存一般有三步:(1)首先注册Service Worker,(2)然后监听到insatll事件后就可以缓存需要的文件,(3)在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存,若存在直接读取,否则就去请求数据,步骤如下:

// index.js
if(navigator.serviceWorker){
  navigator.serviceWorker
  .register('sw.js')
  .then(function(registration){
    console.log('service worker注册成功')
  })
  .catch(function(err){
    console.log('注册失败')
  })
}
// sw.js
// 监听install事件,回调中缓存所需文件
self.addEventListener('install',e=>{
  e.waitUntill(
    caches.open('may-cache').then(function(cache){
      return cache.addAll(['./index.html','./index.js'])
    })
  )
})
// 拦截所有请求事件
// 如果缓存中已经有数据就直接用缓存,否则去请求数据
self.addEventListner('fetch',e =>{
  e.respondWith(
    caches.match(e.request).then(function(response){
      if(response){
        return response
      }
    })
  )
})

看控制台

在cache中也可以发现我们所需的文件已被缓存

当刷新页面后发现缓存的数据从Service Worker中读取

Service缓存与浏览器其他内建的缓存机制不同,他可以让我们自由控制缓存那些文件,如何缓存文件,如何读取缓存,并且缓存是持续的。

如果我们没有在Service Worker命中缓存,会根据缓存查找优先级去查找数据。但是不管我们是在Memory Cache中还是从网络请求中获取的数据,浏览器都会显示我们是从Service Worker中获取的内容。

Memory Cache

Memory cache也就是内存中的缓存,读取内存中的数据肯定比磁盘块。但是缓存持续性短,会随着进程的释放而释放。一旦我们关闭Tab页面,内存中的缓存也就被释放了。

当我们访问过页面以后,再次刷新页面,发现很多数据都来自于内存缓存

但是内存的容量比硬盘小得多,操作系统需要精打细算内存的使用,所以能让我们使用的内存必然不多。

Disk Cache

Disk cache指存储在硬盘中的缓存,读取速度慢一点,相比memory cache胜在容量和时效性上。

在所有浏览器缓存中,Disk Cache覆盖面基本是最大的。他会根据HTTP Header中的字段判断哪些资源需要缓存,哪些不需要请求直接使用,哪些已经过期需要重新请求。并且即使在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。

Push Cache

Push cache是HTTP/2中的内容,当以上三种缓存都没有命中时,他才会被使用。并且缓存时间很短暂,只在回话(Session)中存在,一旦回话结束就被释放。

  • 所有资源都能被推送,但是Edge和safari兼容性不太好
  • 可以推送no-cache和no-store的资源
  • 一旦连接被关闭,Push Cache就被释放
  • 多页面可以使用相同的HTTP/2连接,也就是说能使用相同的缓存
  • Push cache中的缓存只能被使用一次
  • 浏览器可以拒绝接受已经存在的资源推送
  • 你可以给其他域名推送资源

缓存策略


通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置HTTP Header来实现的。

强缓存

强缓存可以通过设置两种HTTP Header实现:Expires 和 Cache-Control。强缓存表示在缓存期间不需要请求,state code 为200。

Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires是HTTP/1的产物,表示资源会在那个时间后过期,需要再次请求。并且Expires受限于本地时间,如果修改了本地时间,可能会造成缓存失效。

Cache-Control

Cache-control: max-age=30

Cache-Control出现在HTTP/1.1,优先级高于Expires。该属性值表示资源会在30秒后过期,需要再次请求。

Cache-Control可以在请求头或者响应头中设置,并且可以结合使用多种指令

协商缓存

如果缓存过期了,就需要发起请求验证资源是否有更新。协商缓存可以通过设置两个HTTP Header实现:Last-Modified 和Etag

当浏览器发起请求验证资源时,如果资源没有做修改,那么服务端就会返回304状态码,并且更新浏览器缓存有效期。

Last-Modified 和If-Modified-Since

Last-Modified表示本地文件最后修改日期,If-Modified-Since会将Last-Modified的值发给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来,否则返回304状态码。

但是Last-Modified存在一些弊端:

  • 如果本地打开缓存文件,即使没做修改,也会改变Last-Modified的时间,所以导致服务器不能命中缓存发送同样的内容
  • 因为Last-Modifed是按照秒进行计算的,颗粒度太大了,如果在极快的时间内进行文件修改,那么会导致资源还是会被命中,不会返回正确资源

所以出现了ETag

ETag和If-None-Match

ETag相当于文件指纹,if-none-match会将当前的Etag发送给服务器,询问该资源ETag有没有变化,有变动的话就将新的资源发送回来。并且ETag优先级比Last-Modified高。

那么如果没设置任何缓存策略,浏览器会怎么处理?

这时,浏览器会采用一个启发式的算法,通常会取响应头中的Date减去Last-Modified值的10%作为缓存时间。

如何设置缓存策略


频繁变动的资源

首先需要使用Cache-Control: no-cache使浏览器每次都请求资源,然后配合Etag或者Last-Modified来验证资源是够有效。这样虽然不能节省请求次数,但是减少相应数据大小。

频繁变动的资源

这里指除了HTML外的代码文件,因为HMTL文件一般不缓存或者缓存时间很短。

那么我们可以对文件名进行hash处理,只要当代码修改后才会生成新的文件名。所以我们可以给文件设置缓存有效期一年 Cache-Control:max=age=31536000,这样只有当HTML文件引用的文件名变化了,就会下载最新文件,否则一年内一直缓存。

每张故作坚强的笑脸背后,是怎样风雨漂泊的一生---Lin

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-22

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 强缓存和协商缓存

    控制 强缓存的两个header字段是:expires 和 cached-control。

    用户3258338
  • HTTP

    http是一个计算机世界里专门在两点之前传输文字、图片、音频、视频等超文本数据的约定和规范。

    用户3258338
  • 读书笔记-《了不起的node.js》-3

    PHP中当遇到sleep时程序会阻塞住,在阻塞设定时间之前,不会有任何操作,也就是说是同步的;

    用户3258338
  • 聊聊Yii2和ThinkPHP5的文件缓存

    写PHP的老王
  • 亿级流量峰值,如何攻破?

    许多大型互联网系统,如电商、社交、新闻等App或网站,动辄日活千万甚至上亿,每分钟的峰值流量在数十万以上,架构上如何应对如此高的流量峰值呢?

    程序IT圈
  • 关于缓存和数据库强一致的可行方案

    我们在日常工作中经常会遇到要求缓存和数据库强一致性的问题,我们平常的做法是,确保数据库插入成功,然后再更新缓存,但有时候数据库插入成功后,缓存出现问题或者缓存系...

    小程故事多
  • 针对缓存的攻击和防御

    2.从缓存取不到的数据,在数据库中也没有取到,这时也可以将key-value对写为key-null,缓存有效时间可以设置短点,如30秒

    ydymz
  • 使用缓存技术10年了,总结了如下经验!

    一位七牛的资深架构师曾经说过这样一句话:“Nginx+业务逻辑层+数据库+缓存层+消息队列,这种模型几乎能适配绝大部分的业务场景。

    范蠡
  • 缓存穿透、击穿、雪崩什么的傻傻分不清楚?

    对于缓存,大家肯定都不陌生,不管是前端还是服务端开发,缓存几乎都是必不可少的优化方式之一。在实际生产环境中,缓存的使用规范也是一直备受重视的,如果使用的不好,很...

    Java3y
  • 缓存与数据库一致性问题深度剖析

    当我们在做数据库与缓存数据同步时,究竟更新缓存,还是删除缓存,究竟是先操作数据库,还是先操作缓存?本文带大家深度分析数据库与缓存的双写问题,以供大家参考。

    黄泽杰

扫码关注云+社区

领取腾讯云代金券