精华内容
下载资源
问答
  • 2021-12-10 17:59:22

    代码已经关联到github: 链接地址 文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:

    浏览器缓存

    浏览器再次发送请求时:

    1. 首先判断强缓存,强缓存生效直接使用强缓存(200 from memory、from disk 先从内存,再从硬盘)
    2. 如果强缓存不生效会判断
      1. 没有设置协商缓存就直接重新请求(200)
      2. 设置了协商缓存则由服务器判断缓存是否失效,没有失效就继续使用缓存(304,同强缓存的获取方式),失效则返回新的文件(200)

    缓存分类

    强缓存

    强缓存主要由响应消息头 Cache-ControlExpires 两个 Header 决定的,在一定时间内不向后端请求,直接使用内存或者磁盘内的缓存内容,前者的优先级更高。

    Cache-Control: max-age=31536000 //缓存时间 | no-store:禁止本地缓存 | no-cache:本地缓存,但是强制每次请求直接发送给源服务器,由服务器判断是否使用缓存
    Cache-Control: private;max-age=31536000 //默认是public 允许代理
    Expires: Wed, 21 Oct 2020 07:28:00 GMT //该时间之后请求过期 Cache-control 优先级比 Expires 优先级高
    

    注意请求头的消息头也可以设置Cache-Control , 表示客户端想要的缓存策略是什么。

    一般不经常变动的JS和CSS均会有一个很大的过期时间,搭配上版本号进行缓存策略,减少向后端的请求,如果均不设置只带版本号也可以,因为浏览器自动有缓存的策略。

    有些时候,我们会看到Cache-Control: max-age=31536000,那么浏览器帧的会缓存这个数据到一年吗,答案当然是否定的,设置这个值只是因为它是协议允许的最大值,浏览器不会缓存那么久,当缓存满了会优先删除旧的内容,但是CDN会,这样可以减少服务器的压力。

    协商缓存

    If-none-match/ETagsIf-Modified-Since/Last-Modified 参数决定,通常在强缓存失效后,向服务端通信,服务端确定是否使用缓存,前者优先级更高。

    • ETags 是服务器资源的一个唯一标识,请求响应时消息头会带上这个唯一标识,请求头带上上次请求返回的etag(If-none-match ),由服务器判断资源是否改变。
    • 请求响应时时消息头会带上上次修改时间(Last-Modified),请求时消息头会带上这个修改时间(If-Modified-Since ),由服务器判断资源是否改变。

    对于频繁变动的资源,服务器端需设置Cache-Control: no-cache 使浏览器每次都请求服务器,且增加返回请求头 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量,但是能显著减少响应数据大小。

    版本号

    • revving 技术 : 不频繁更新的文件会使用特定的命名方式:在 URL 后面(通常是文件名后面)会加上版本号。

    Service Work

    一个服务器与浏览器之间的中间人角色,如果网站中注册了service worker那么它可以拦截当前网站所有的请求,进行判断(需要编写相应的判断程序),如果需要向服务器发起请求的就转给服务器,如果可以直接使用缓存的就直接返回缓存不再转给服务器。

    简单使用

    Service Worker是浏览器在后台独立于网页运行的、用JavaScript编写的脚本。
    让我们来看看最小的Service Worker长什么样,以及怎么跑起来:

    // 不起眼的一行if,除了防止报错之外,也无意间解释了PWA的P:
    // 如果浏览器不支持Service Worker,那就当什么都没有发生过
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
            // 所以Service Worker只是一个挂在navigator对象上的HTML5 API而已
            // scope 参数是可选的,可以用来指定你想让 service worker 控制的内容的子目录。 在这个例子里,我们指定了 '/',表示 根网域下的所有内容。这也是默认值。 
            navigator.serviceWorker.register('/service-worker.js', {scope: './'}).then(function (registration) {
                console.log('我注册成功了');
            }, function (err) {
                console.log('我注册失败了');
            });
        });
    }
    

    复制代码以上代码,在load事件触发后,下载并注册了service-worker.js这个文件,Service Worker的逻辑,就写在这里:

    // service-worker.js
    // 虽然可以在里边为所欲为地写任何js代码,或者也可以什么都不写,
    // 都不妨碍这是一个Service Worker,但还是举一个微小的例子:
    
    //监听安装事件,install 事件一般是被用来设置你的浏览器的离线缓存逻辑
    this.addEventListener('install', function(event) {
      //通过这个方法可以防止缓存未完成,就关闭serviceWorker
      event.waitUntil(
        //caches api: https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage
        caches.open('v1').then(function(cache) {
          //指定要缓存的内容,地址为相对于跟域名的访问路径
          return cache.addAll([
            '/sw-test/',
            '/sw-test/index.html',
            '/sw-test/style.css',
            '/sw-test/app.js',
            '/sw-test/image-list.js',
            '/sw-test/star-wars-logo.jpg',
            '/sw-test/gallery/bountyHunters.jpg',
            '/sw-test/gallery/myLittleVader.jpg',
            '/sw-test/gallery/snowTroopers.jpg'
          ]);
        })
      );
    });
    
    //监听fetch,拦截请求
    this.addEventListener('fetch', function(event) {
      var response;
      
        event.respondWith(
        caches.match(event.request).then(function(response) {
          if (response) {
            console.log('Found response in cache:', response);
    
            return response;
          }
          console.log('No response found in cache. About to fetch from network...');
    
          return fetch(event.request).then(function(response) {
            console.log('Response from network is:', response);
            caches.open('v1').then(function(cache) {
              cache.put(event.request, response);
            });
        		return response.clone();
            
          }).catch(function(error) {
            console.error('Fetching failed:', error);
            throw error;
          });
        })
      );
      
    });
    
    
    
    应用
    1. 缓存静态资源,Service Worker的一大应用是可以利用CacheStorage API来缓存js、css、字体、图片等静态文件。我们可以在Service Worker的install阶段,指定需要缓存的具体文件,在fetch事件的回调函数中,检查请求的url,如果匹配了已缓存的资源,则不再从服务端获取,以此达到提升网页性能的目的。
    2. 离线体验,将整个页面缓存下来,比如404页面。

    详细见:Service Worker 从入门到出门

    缓存的位置

    缓存主要有4种:Service WorkerMemory CacheDisk CachePush Cache

    • Service Worker
    • Memory Cache,内存中的缓存,主要包含的是当前中页面中已经抓取到的资源(一般是小资源),例如页面上已经下载的样式、脚本、图片等,读取速度快,但是持续时间短,一般页面关闭就被释放。
    • Disk Cache,存储在硬盘中的缓存,能缓存各种资源,读取速度比内存慢,但是能缓存的数据多。
    • Push Cache,推送缓存是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被使用。它只在会话(Session)中存在,一旦会话结束就被释放。

    刷新对于缓存的影响

    1. 当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存。
    2. 当f5刷新网页时,跳过强缓存,但是会检查协商缓存。
    3. 浏览器地址栏中写入URL,回车 浏览器发现缓存中有这个文件了,不用继续请求了,直接去缓存拿。

    参考

    Service Worker 从入门到出门
    浏览器帧的会缓存一年吗

    DNS 缓存

    有DNS的地方,就有缓存。浏览器、操作系统、Local DNS、根域名服务器,它们都会对DNS结果做一定程度的缓存:

    • 首先查找浏览器自身的缓存
    • 然后是本机hosts,如果还是没有,则查找本地DNS服务器
    • 本地DNS服务器一般是动态分配的或者我们自己指定的地址(当然这里还有个路由器的缓存)
    • 再查找不到,则向根服务器发送递归查找,边缘DNS > 顶级DNS > 二级DNS > 三级DNS(也就是网站注册的)

    CDN缓存

    在浏览器本地缓存失效后,浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同,但一般都会遵循http标准协议,通过http响应头中的Cache-control判断资源是否过期
    其优势是:

    1. CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低。
    2. 大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源服务器的负载。
    更多相关内容
  • 关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站...
  • 闲言少叙,今天主要谈谈前端性能优化之浏览器缓存浏览器缓存 我前面写过浏览器缓存的文章,也写过html5离线缓存,关于这些缓存,我们很容易搞不清,例如:200 OK (FROM MemoryCache、FROM DiskCache) 及 304 NOT ...
  • 关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站...
  • 今天小编就为大家分享一篇react+django清除浏览器缓存的几种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 谷歌浏览器缓存清理工具
  • 浏览器缓存 浏览器缓存分为两种类型: 强缓存:也称为本地缓存,不向服务器发送请求,直接使用客户端本地缓存数据 协商缓存:也称304缓存,向服务器发送请求,由服务器判断请求文件是否发生改变。如果未发生改变...
  • 主要介绍了关于angularJs清除浏览器缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 浏览器缓存的意义在于提高了执行效率,但是也随之而来带来了一些问题,导致服务端修改了js、css,客户端不能更新 方法一 生成随机数字 代码如下: [removed][removed] 缺点,浏览器缓存失去意义,每次都动态加载。...
  • 主要介绍了解决微信浏览器缓存站点入口文件(IIS部署Vue项目),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 浏览器缓存中的人:通过浏览器缓存中毒持续进行HTTPS攻击
  • OutputCache是针对所有访问服务器资源的用户,本篇要介绍的浏览器缓存则是针对单个用户,让浏览器在我们的控制下彻底不持续访问服务器上的动态内容,也就是我们要让浏览器变成我们的缓存机制中的一部分,在某些特定...
  • 我们往往在服务器上对缓存设置进行各种优化方案,但是我们却很少注意到客户端缓存,准确的说是浏览器缓存机制。其实每种浏览器都有缓存策略,会暂时将每一个浏览过的文件缓存在一个特殊的文件夹里。我们就可以在...
  • 海报:浏览器缓存中的人:通过浏览器缓存中毒持续进行HTTPS攻击
  • 下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一、概述 缓存的思想可以应用在软件分层的各个层面。它是一种内部机制,对外界而言,是不可感知的。 数据库本身有缓存,持久层也可以缓存...二、缓存实现(浏览器缓存当前访问的JSP动态页面) (一)、服务端方法: 代
  • 选择file——select cache folder(f9)设置位置 Chrome浏览器在不同操作系统下缓存目录有固定的位置,即可以查看和复制Chrome浏览器保存的缓存文件
  • 客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下
  • 如果视频被储存在浏览器缓存文件夹中,VideoCacheView(支持64位)可以帮助你从缓存文件夹中找到该视频文件并保存到其他位置。 VideoCacheView会自动扫描IE、基于Mozilla的网页浏览器(包括FireFox)的整个缓存文件夹...
  • ChromeCacheView是一款读取Chrome浏览器缓存目录的小工具,无须安装,解压即可使用。它可以显示缓存文件的网址、类型、大小及其他信息
  • 主要介绍了JavaWeb如何实现禁用浏览器缓存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 浏览器缓存机制详解

    千次阅读 2022-01-25 10:12:25
    一、为什么需要缓存 在前端开发中,我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的 方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经 下载后的资源被重复利用。减少...

    一、为什么需要缓存

    在前端开发中,我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的
    方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经
    下载后的资源被重复利用。减少客户端和服务器之间的请求次数,减少带宽,减少网
    络负荷。
    

    二、什么是缓存

    对于web缓存,主要是针对一些web资源(html, js,图片,数据等),就是介于web
    服务器和浏览器之间的文件数据副本。当我们第一次打开某一个网页时,浏览器向服
    务器发起请求,请求所需要的资源。如果我们使用了web缓存,当我们下一次再次
    访问该网站页面的时候,我们可以根据一些缓存策略,来决定是否直接使用缓存中的
    一些资源,还是再次向服务端发起请求,从而避免再次向服务器发起请求,减少客户
    端和服务器之间通信的时延。
    

    三、缓存的作用

    1、减少网络带宽的消耗
    2、降低服务器压力
    3、减少网络延时,加快页面打开速度。
    

    四、浏览器的缓存机制

    对于浏览器端的缓存来说,规则是在http协议头和html的mate标签中定义的,他们
    分别从过期机制和校验值来判断是否直接使用该缓存,还是需要从服务器去获取更新
    的版本。
    1、新鲜度(过期机制):也就是缓存副本的有效期。一个缓存副本必须满足以下条件
    之一,浏览器才会认为它是有效的,足够新的,才会直接使用缓存。
    (*)http协议头中存在过期时间等信息,并且仍在有效期内。
    (*)浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度。
    2、校验值(验证机制):服务器相应中,在响应头中存在Etag标签,用来验证资源是
    否更改的标识,如果缓存的标识和服务器的标识相同则无需重新请求资源,如果不相
    同,则重新发送资源请求。
    

    五、浏览器缓存控制
    1、html中的mate标签设置缓存

    例如
    设置过期时间
    <meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"> 
    设置缓存
    <meta http-equiv="Pragma" content="no-cache"

    2、与缓存有关的字段

    Cache-control:max-age(单位为s),当某一个资源的响应头设置max-age=3600,
    则表示在1h时间内,服务器的资源发生变化,浏览器都不会想服务器发送该资源的请
    求,直接使用缓存。并且max-age会覆盖Expires。
    如下图所示
    

    在这里插入图片描述

    Cache-control:s-maxage,s-maxage表示CDN缓存,也就是代理缓存,如果设置s-maxage=60,表示60秒内无论cdn服务器的该资源发生怎么样的改变,都不会重新请求,并且s-maxage会覆盖max-age和Expires.
    
    Cache-control:public,指定是否是共享缓存,如果设置Cache-control的值设置为public,则表示多个浏览器之间可以共同使用该资源缓存。
    如果没有指定Cache-control是为private还是public,则默认是public.
    

    在这里插入图片描述

    Cache-control:private,表示该缓存是私有的,不存在用户共享。
    

    在这里插入图片描述

    Cache-control:no-cache;Cache-control的值设置为no-cache并不代表不缓
    存,浏览器是缓存的,但是当每一次访问该资源的时候,都要向服务器请求查看资源
    是否改变,如果改变,则直接重新下载,如果没有改变,则使用缓存。可以在设置完no-cache之后,在设置private,以及设置过期时间为过去的时间。
    
    Cache-control:no-store,表示严格不缓存,每一次资源必须从服务器上重新获取。
    
    Expires:缓存过期时间,Expires=max-age + 最后一次请求的时间。Cache-control和Expires相比,Cache-control的优先级更高。Expires需要和Last-modifyed来一起使用。
    

    在这里插入图片描述

    Last-Modified和if-modified-since:last-modified是响应头上的属性,if-modifyed-since
    是请求头的数据。该属性值需要cache-control配合使用。当再次向服务器发送请求
    该资源时,会携带if-modified-since的请求头字段,到服务器比对和last-
    modified是否相同。如果相同则直接返回304,直接使用缓存,如果不相同,则再次
    请求新的数据,返回200.
    
    ETag和if-None-Match:这俩个属性其实和last-modified和if-modified-since
    类似。不过Etag是服务器更加内容产生的hash字符串,并且Etag是响应头内容。
    if-None-match是请求头的内容。当再次向服务器发送请求某一个资源时,请求头会
    携带if-None-match属性,到达服务器后,和Etag进行比对。如果相同,则返回
    304,如果不相同则返回该资源,并且状态码为200.
    

    六、缓存报文头种类和优先级

    Cache-control和Expires比较
    Cache-control的优先级比Expires的优先级高。
    
    Last-Modified和ETag比较
    Etag的优先级要高于Last-modified,当在请求头中会先进行ETag比较,然后再进行Last-modified比较,如果两者都相等,则直接返回304,直接使用缓存资源。
    两者比较一下,你可能会觉得两者的功能差不多,但是为什么要在http1.1中新增Etag呢?
    1、Last-modified精确到秒,如果在一秒钟内修改多次文件,则无法准确拿到最新的文件。
    2、如果缓存文件,打开后但是不修改内容,导致Last-modified发生变化,下一次就没有办法使用缓存文件了。
    3、可能存在服务器没有获取准确的修改时间,或者代理服务器时间不一致的情况。
    
    Last-Modified/Etag和Cache-control/Expires比较
    Cache-control/Expries的优先级要比Last-Modified/Etag的优先级高,当第二次发送请求时,会首先查看Cache-control/Expries是否过期,如果没有过期,则任然使用该资源,如果过期了,则再次向服务器发送请求来请求最新的资源。到达服务器时通过比对Last-modified/Etag是否和原来的值相等,来判断资源是否改变,如果没有改变,则返回304。如果改变了,则返回最新的资源,并且状态码为200.
    

    七、有哪些请求不能进行缓存的

    无法被浏览器缓存的请求
    1、http信息头部cache-control:no-cache , pragma: nocache或者使用cache-control:max-age=0
    2、根据cookie,认证信息决定输入内容的信息是否可以被缓存的。
    3、经过https加密的请求。
    4、post请求无法被缓存。
    5、在http响应头中不存在last-modified/Etag和cache-control/expires等。
    

    八、使用缓存流程
    在这里插入图片描述

    上面的过程可以分为三个阶段:
    1、本地缓存阶段:如果本地存在缓存,并且通过检查本地资资源的缓存并没有过
    期,则直接使用本地缓存。
    2、协商缓存阶段:如果在本地存在该资源,但是本地资源已经过期,此时就需要封
    装http请求,向服务端发送请求,检查是否存在更改资源。如果资源没有更改,则直
    接返回304,直接在本地使用资源。
    3、缓存失败阶段:如果资源发生了更改,则重新返回最新的资源,并且返回状态码为
    200。如果此时不存在该资源,则直接返回404。
    

    九、用户行为与缓存的关系

    用户在浏览器采用一些操作,例如,返回上一阶段,下一阶段,刷新页面,强制刷新
    等操作,这些对于一些缓存属性的影响是不一样的。下面将进行详细解读。
    1、刷新(仅仅是F5刷新):此时对于cache-control/Expires是不生效的,但是last-modified/Etag都生效的,所以此时会向服务器发起请求,用来判断目标文件是否发生变化。
    2、强制刷新(F5刷新+ctrl):此时对于cache-control/expires和last-modified/Etag都不生效,此时必须从服务器拿到新数据。
    3、回车或者转向:此时所有的缓存都生效。
    

    十、从缓存角度改善站点

    1、同一个资源保证只有一个稳定的url地址。
    2、css,js,图片资源增加http缓存头,入口html文件不被缓存。
    3、减少对cookie的依赖
    4、减少对http协议加密的使用。
    
    展开全文
  • 浏览器缓存机制详细知识点梳理 在前端的性能优化中,浏览器缓存是很重要的一环。比如在页面前进或者后退,发现丝毫不卡顿很流畅,就是缓存机制的力量。 一、什么是缓存 浏览器缓存Brower Caching是浏览器对之前请求...

    浏览器缓存机制详细知识点梳理

    在前端的性能优化中,浏览器缓存是很重要的一环。比如在页面前进或者后退,发现丝毫不卡顿很流畅,就是缓存机制的力量。

    一、什么是缓存

    浏览器缓存Brower Caching是浏览器对之前请求过的文件进行缓存,以便再次访问的时候提高页面展示的速度。比如当我们第一次访问CSDN网站的时候,PC会把从网站上的图片和数据下载到电脑上。当再次访问CSDN网站的时候,网站直接从PC加载,这就是缓存。

    二、为什么需要缓存?缓存有哪些优势?

    (1)浏览器缓存是将文件保存在客户端,减少重复请求浪费网络带宽,只产生很小的网络消耗。

    ps:打开本地资源也会产生网络消耗

    (2)缓解服务器的压力,不用重复请求数据

    (3)提升前端性能,提高访问速度,提供更好的用户体验

    三、web缓存的类别

    ①数据库缓存

    将查询后的数据放在内存中进行缓存,下次再查询,直接从内存缓存中获取,提高响应速度

    ②CDN缓存

    发送web请求,cdn计算出路径短且快的路。管理员部署,把经常访问的放入cnd加快响应

    ③代理服务器缓存

    与浏览器缓存机制类似,但代理服务器面向更广大的群体,规模更大。不只是为一个用户服务,而是为一群用户服务。

    ④浏览器缓存

    每个浏览器都实现HTTP缓存。浏览器使用HTTP协议与服务器交互,根据与服务器约定的规则进行缓存工作

    四、浏览器缓存的位置

    浏览器缓存的位置一般为四类:Server Worker、Memory Cache、Disk Cache、Push Cache

    五、浏览器缓存过程

    浏览器缓存过程:强缓存、协商缓存

    六、浏览器缓存判断流程图

    第一次请求

    在这里插入图片描述

    再次请求

    在这里插入图片描述

    七、缓存位置

    1、Server Worker

    Server Worker 是运行在浏览器的独立线程,一般用来缓存。Server Worker 涉及请求拦截,so传输协议是HTTPS来保障安全。

    Server Worker 是“外建”的缓存机制,可以自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的,这是与其他内建缓存机制的区别。

    2、Memory Cache

    内存中的缓存,主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等,占据该进程一定的内存资源,但是缓存持续性很短,会随着进程的释放而释放。一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。

    内存缓存特点:①读取速度快 ②时效性:页面关闭进程的内存清空释放

    3、Disk Memory

    硬盘中的缓存。在所有浏览器缓存中,Disk Cache 覆盖面基本是最大的,绝大部分的缓存都来自 Disk Cache。为什么呢?cuz根据 HTTP Herder 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。

    硬盘缓存比内存缓存读取速度慢,读取需要对硬盘进行I/O操作,会导致重新解析缓存内容,造成读取路的复杂。

    Memory Cache 和 Disk Cache的相同和不同比较

    Memory CacheDisk Cache
    相同点只能存储一些派生类资源文件只能存储一些派生类资源文件
    不同点退出Tag进程时数据会被清除退出Tag进程时数据不会被清除
    存储资源一般脚本、图片、字体一般非脚本css等

    CSS文件加载一次就可以渲染,不会频繁的读取,存储在Disk Cache;js脚本可能会随时会被执行,存储在Memory Cache,若存储在硬盘中,会因为I/O开销大导致浏览器失去响应。

    三级缓存原理

    ①先去内存查找,找到直接加载

    ②内存找不到,硬盘中找,找到直接加载

    ③硬盘找不到进行网络请求

    ④请求获取的资源缓存到硬盘和内存

    prefetch cache 预取缓存

    html代码的link标签带有prefetch,prefetch是预加载的一种方式,被标记为prefetch的资源会在浏览器空闲的时间加载

    4、Push Cache

    推送缓存,是HTTP/2的内容,并没有严格执行HTTP头部的缓存指令。在Server Worker、Memory Cache、Disk Cache都没有命中的时候,它会被使用。在Session中存在,Session结束就会被释放,缓存时间短暂。

    八、强缓存

    (1)HTTP报文

    浏览器缓存机制就是HTTP缓存机制,这个机制HTTP报文的缓存标识进行的。

    • HTTP请求报文

    请求行—HTTP行(通用信息头、请求头、实体头)—请求报文主体(post才有)

    • HTTP响应(Response)报文

    状态行 – HTTP头(通用信息头,响应头,实体头) – 响应报文主体

    (2)浏览器并不会向服务器发送任何请求,直接从本地缓存中读取文件,返回200
    200 form memory cache200 from disk cache
    不访问服务器!直接从内存中获取。浏览器关闭,资源将被释放,数据将不存在。下次打开页面不是from memory cache不访问服务器!直接从硬盘中获取。浏览器关闭,资源不会被释放,数据依然存在,下次打开页面依然是from disk cache

    控制强制缓存的字段分别是Expires和Cache-Control,Cache-Control优先级比Expires高

    (3)Expires

    http1.0规范,它设置一个值绝对时间的GMT格式的时间字符串,这个是资源失效时间(客户端的时间小于Expires的值),在这个时间之前都是名中缓存。

    Expires:Mon,16 Oct 2066 23:59:59 GMT
    

    缺陷:Expires控制缓存原理是客户端的时间和服务端返回的时间作对比,若两个时间偏差大的话,会造成强制缓存直接失效

    (4)Cache-Control

    http1.1规范,替代Expires,它利用的是相对时间,利用header信息字段的max-age值判断。

    max-age=5000//代表资源的有效期是5000秒
    

    除此之外还有常见的几个值

    public可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器
    private只能被终端用户缓存,不允许CDN等中间缓存器对其缓存(默认取值)
    no-cache客户端缓存,发送请求到服务器确实是否使用协商
    no-store禁止缓存,级禁止强缓存和协商缓存,每次都需要重新请求数据
    max-age缓存内容有效时间
    (5)Expires和Cache-Control

    Cache-Control的优先级比Expires高,Expires是绝对时间,Cache-Control是相对时间

    九、协商缓存
    (1)浏览器向服务器发起请求,命中缓存返回304,失效返回200和请求结果

    向服务器发起请求,服务器根据这个请求的Request header的一些参数来判断是否命中协商缓存;命中返回304状态码并且会带上新的response header告诉浏览器可以从缓存中读取资源。没有命中返回200状态码和请求的结果。

    (2)协商缓存成功,返回304流程图

    在这里插入图片描述

    (3)协商缓存失效,返回200流程图

    在这里插入图片描述

    (4)Last-Modified/If-Modified-Since、ETag/If-None-Match

    协商换头字段Last-Modified/If-Modified-Since 和ETag/If-None-Match是成对出现的,呈现一一对应的关系

    Last-Modified/If-Modified-Since 是http1.0的头字段,ETag/If-None-Match是http1.1的头字段

    Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效

    一些概念

    ①Last-Modified

    浏览器向服务器发送资源最后的修改时间

    ②If-Modified-Since

    当资源过期时,发现响应头具有Last-Modified声明,则再次向服务器请求时带上头if-modified-since,表示请求时间。服务器收到请求后,发现有if-modified-since则与被请求资源的最后修改时间进行对比(Last-Modified),若最后修改时间较新,说明资源又被改过,则返回最新资源,返回200;若最后修改时间较小,说明资源无新修改,返回304 ,使用缓存文件。

    ③ETag

    http1.1属性,由服务器生成返回给前端,帮助服务器控制web端的缓存验证,服务器会生成并且返回当前资源文件的一个唯一标识

    ④If-None-Match

    当资源过期时,发现响应头具有Etag声明,则再次向服务器请求时带上头if-none-match(唯一标识Etag值)。服务器收到该请求后,发现有If-None-Match则根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200。

    Etag为什么会出现?

    Last-Modified/If-Modified-Since有个缺陷,在短时间内变化,Last-Modified并不会发生变化。在周期性内变化,一个周期内修改为原来的样子,还是可以使用缓存,但是Last-Modified不是这么工作的,所以Etag出现了。

    Last-Modify/If-Modify-Since 和ETag/If-None-Match的区别

    • Etag/If-None-Match 返回的是一个校验码,而Last-Modified/If-Modified-Since 不是。Etag可保证每一个资源的唯一性,资源变化Etag也会变化。服务器根据If-None-Match值来判断是否命中缓存
    • Last-Modifed/If-Modified-Since的时间精度是秒,而Etag可以更精确
    • Etag优先级高于Last-Modified,服务器先验证Etag;Etag可以和Last-Modified一起使用,服务器先验证Etag,一致才会继续比对last-Modified,最后才会返回304。
    十、强缓存和协商缓存的区别

    ①强缓存不发送请求到服务器,协商缓存发送请求到服务器

    ②强缓存资源更新浏览器不知道,因为没有发送请求到服务器;协商缓存资源更新浏览器都知道,因为发送了请求到服务器

    ③大部分web默认用协商缓存

    十一、总结

    当浏览器再次访问一个资源

    ①看是否命中强缓存,命中使用强缓存

    ②没有命中强缓存,发送请求到服务器看是否命中协商缓存

    ③若命中协商缓存,服务器返回304告诉浏览器可以使用本地缓存

    ④没有命中协商缓存,返回最新的资源

    十二、刷新对强缓存和协商缓存的区别

    ①当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存

    ②当f5刷新网页时,跳过强缓存,检查协商缓存

    ③浏览器地址栏中写入URL,不用请求直接走缓存,最快的速度

    展开全文
  • 让浏览器做缓存需要给浏览器发送指定的Http头,告诉浏览器缓存多长时间,或者坚决不要缓存。作为.net的程序员,其实我们一直都在用这种方法,在OutputCache指令中指定缓存的Location为Client时,其实就是给浏览器...
  • 【浅解】浏览器缓存

    千次阅读 2022-03-29 12:11:10
    本章包含:1、缓存概念,2、web缓存的种类,3、浏览器缓存的种类,4、http缓存,5、强制缓存,6、协商缓存,7、Cookie,8、cookie、localStorage的异同

    缓存

    为什么有缓存?

    缓存在活中其实很常见。往往初次打开一个新的软件或者网页的时候都会相对较慢, 但是再次打开就会快很多, 这就是缓存的功劳。大大提高了效率,也大大提高了用户体验。

    什么数据可以缓存?

    不能缓存的数据

    • 实时更新替换的数据(例如: 弹幕,留言,评论,经常更换的广告图片)
    • 网页的 HTML 结构, 在网页使用过程中结构会随着操作发生变化
      缓存中的数据
    • 静态资源很少发生改变的图片(例如:商品图片,用户头像,网站logo)
    • 使用过的视频数据,音频数据都会在缓存里

    技术层面的缓存 - Web 缓存

    在前端开发中,性能一直都是重点问题,判断一个网站的性能就是看网页打开的速度。然而提高网页反应速度就要使用 Web 缓存。

    Web 缓存的优点 :

    • 节约了网络的资源
    • 提高了网络的效率
    • 缩短网页请求资源的距离
    • 减少网络延迟
    • 减少带宽
    • 降低网络负荷

    Web 缓存的种类 :

    1 . 数据库缓存

    • 通过缓存数据库查询结果,加快访问速度,减少数据库访问次数,缓解数据库压力,以提高 web 应用速度
      2 . 代理服务器缓存
    • 在不能访问服务器时,使用代理服务器满足的 HTTP 请求(例: 跨域 Porxy)
      3 . CDN 缓存
    • 通过在网络各处放置节点服务器, 快速可靠地分发静态内容,
      4 . 浏览器缓存
    • 加速浏览,浏览器在用户磁盘上对请求过的资源进行存储,当再次请求这个页面时,浏览器就可以从本地取出资源响应给用户,这样就可以加速页面浏览

    浏览器缓存

    浏览器缓存包含 : HTTP 缓存、indexDB、cookie、localstorage 、sessionStorage

    1 . http 缓存(强制缓存 & 协商缓存)

    强制缓存

    什么是强制缓存

    • 请求的资源本地缓存中有,资源从本地缓存获取,不需要发起请求
    • 想理解强制缓存,先知道什么是缓存控制

    缓存控制

    在http中,控制缓存开关的属性有两个:PragmaCache-Control

    Pragma

    Pragma 有两个情况 Pragma 和 Expires 。

    • Pragma 的值为 no-cache : 表示禁用缓存
    • Expires 的值是一个时间(格林尼治标准时间) : 表示该缓存的有效时间
      注意 : 当 http 响应头中同时出现 PragmaCache-Control , 缓存控制执行优先级从高到低是 Pragma ==> Cache-Control ==> Expires

    Cache-control

    Cache-Control 在 http 请求头和响应头中,用来控制 http 缓存的

    cache-control.png

    常见 请求头 中的Cache-Control 指令

    • Cache-Control: max-age=<seconds> : 缓存存储的最大周期
    • Cache-Control: max-stale[=<seconds>] : 客户端愿意接收一个已经过期的资源
    • Cache-control: no-cache : 重新验证是否缓存(协商缓存验证)
    • Cache-control: no-store : 禁止缓存

    常见 响应头 中的Cache-Control 指令

    • Cache-control: must-revalidate 资源过期后重新请求
    • Cache-control: no-cache 请求是验证是否缓存(协商缓存验证)
    • Cache-control: no-store 不使用任何缓存
    • Cache-control: private 同意本地浏览器缓存
      详情查看官方文档

    强制缓存的执行流程

    流程情景1 - 初次请求

    浏览器会向服务器发起请求 ==> 服务器接收到浏览器的请求 ==> 响应资源并在响应头中携带 Cache-Control 给客户端( Cache-Control 值为缓存的最大过期时间)

    流程情景2 - 再次请求相同的数据

    浏览器会先查看Cache-Control 是否过期 ==> 没有过期 ==> 浏览器直接从缓存中拉取资源(此过程不用经过服务器)

    流程情景3 - Cache-Control 过期

    cache-control 过期了 ==> 没有办法拉取缓存中的数据 ==> 继续执行流程情景1

    协商缓存

    是什么协商缓存
    协商缓存,也叫对比缓存。一种服务端的缓存策略

    • 服务端判断客户端的资源
      • 返回 304表示缓存中的资源和请求的资源一致 ,
      • 返回 200 表示从服务器返回的最新的资源。
    • 想理解协商缓存,先知道什么是缓存校验

    缓存校验

    如何确定缓存数据有效,校验缓存是否是最新的(和服务器中最新的数据一样)

    • 在响应头中有两个属性(资源标识),ETagLast-Modified 用来帮助服务器控制客户端的缓存校验。

    Last-Modified

    • 值为资源的最后修改时间,对应请求头的属性为 If-Modified-Since 
      Etag
    • ETag 是 HTTP1.1 中加入的新属性
    • 表示资源的唯一标识,所谓唯一,和id一样,具有唯一性。对应请求头为 If-None-Match 。
      • Etag 的本质是一个字符串
        注意 : 当响应头中同时存在 Last-Modified 和 Etag ,会优先使用 Etag(更加精确)

    协商缓存的执行流程

    流程情景1 - 初次请求

    客户端向服务器发出请求 ==> 服务器收到请求 ==> 响应资源和相对应的资源标(EtagLast-Modified)识给客户端

    流程情景2 - 再次请求

    浏览器再次发起请求 ==> 请求头会携带If-None-Match (或 If-Modified-Since) 去找服务器 ==> 服务器将If-None-Match (或 If-Modified-Since) 和自己的Etag(或 Last-Modified) 的值对比(两种情况)

    • 如果相等,则返回 304 ,表示缓存资源和客户端资源一致
    • 如果不相等,则返回 200,并返回资源和新的Etag (或Last-Modified) 的值。

    Last-Modified 和 Etag的异同点

    相同点 : Last-Modified 和 Etag 用来帮助服务器控制客户端缓存校验的属性

    不同点 :

    1. 存储的值不同
      • Last-Modified存储的值是最后修改数据的时间, 而请求头中携带的If-Modified-Since是浏览器中缓存的时间
      • Etag中存储的是一个字符串,和id一样的具有唯一性,而请求头中携带的If-None-Match是浏览器上传收到数据时携带的Etag
    2. 服务器对比方式不同
      • Last-Modified : 如果缓存的时间和最后修改的时间一致,则缓存命中,响应 304,否则不命中,向服务端请求资源,响应 200 和最新的资源,并在响应头中携带这次的 last-modified,把这次的 last-modified 存到 if-modified-since
      • Etag 内容比对,用来判断缓存内容的 if-none-match 和服务器内容的 Etag 是否相等,如果相等则说两处的资源相等,缓存命中响应 304,否则请求资源,响应 200 和最新的资源,并在响应头中携带新的 Etag,

    协商缓存流程图

    协商缓存.png
    注意 : 刷新浏览器页面,强制缓存会失效,而协商缓存有效。

    2 . indexDB

    IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

    详情参考官方文档:

    3 . Cookie

    Cookie 是什么

    • Cookie 直意为小甜饼。用于数据缓存,cookie 存放数据量非常小,它的大小限制为4KB以内。可以缓存用户登录信息(例如:token)。

    Cookie 的作用

    • Cookie 缓存的数据始终在同源 http 中携带,在浏览器和服务器之间传递
    • Cookie 缓存可以做数据持久化,Cookie 数据在设置的 Cookie 过期时间之前都有效(数据在缓存中关闭浏览器窗口不能删除 Cookie 数据)

    cookie的使用

    • 下载依赖包 :npm i js-cookie 或者 yarn add js-cookie
    • 导入 : import Cookies from 'js-cookie'
    • 存入数据语法 : Cookies.set('键', '值',{ expires: 7, path: '' })
      • 第三参数为一个对象, 对象的属性有expirespath
      • expires : 创建一个过期 cookie,值为天数
      • path : Cookie只对当前路径的页面有效
    • 使用数据语法 : Cookies.get('键')

    注意 : Cookies 中有路径的概念,可以限制 Cookies 数据所属路径

    4 . localStorage

    1 . localStorage 作用 : 本地存储

    • 经典场景 : 免登录
      2 . localStorage 语法 :
    • 2.1 存数据 : localStorage.setItem('属性名',属性值)
    • 2.2 取数据 : localStorage.getItem('属性名')
    • 2.3 删数据 : localStorage.removeItem('属性名')
    • 2.4 清空数据 : localStorage.clear()

    3 . localStorage 特点 :

    • 3.1 localStorage 是 永久存储 的, 除非 手动清除 ,否则一直存在。
    • 3.2 localStorage 只能存储 字符串类型 数据。 如果是其他类型,则会自动转成字符换格式存储。

    5 . sessionStorage

    1 . sessionStorage 作用 : 临时存储

    • 经典场景 : 页面间传值

    2 . sessionStorage 语法和 localStorage 完全一致 :

    • 2.1 存数据 : sessionStorage.setItem('属性名',属性值)
    • 2.2 取数据 : sessionStorage.getItem('属性名')
    • 2.3 删数据 : sessionStorage.removeItem('属性名')
    • 2.4 清空数据 : sessionStorage.clear()

    3 . sessionStorage 特点 :

    • 3.1 sessionStorage 页面关闭后就 自动清除 了。
    • 3.2 sessionStorage 只能存储 字符串类型 数据。 如果是其他类型,则会自动转成字符换格式存储。

    cookie、localStorage、sessionStorage异同

    CookielocalStoragesessionStorage
    数据保存的期限一般由服务器生成,可设置保存时间。需要手动清除,否则永久保存仅在当前页面有效,关闭页面或浏览器后被清除
    存放数据大小4KB以内5MB或更大5MB或更大
    与服务器关系每次都会携带在HTTP头中,在浏览器和服务器之间传递保存与客户端硬盘中,不参与和服务器的通信保存在客户端内存中,不参与和服务器的通信
    展开全文
  • 主要介绍了Nginx服务器中设置本地浏览器缓存的简单方法,需要的朋友可以参考下
  • 浏览器缓存机制剖析

    2021-02-25 17:49:19
    缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存和启发...浏览器缓存里,Cache-Control是金字塔顶尖的规则,它

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 478,777
精华内容 191,510
关键字:

浏览器缓存