精华内容
下载资源
问答
  • 浏览器缓存机制
    千次阅读
    2020-08-10 14:24:03

    缓存可以说是网站性能优化非常有用的一种方式。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

    对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。

    一、缓存的位置

    从缓存的位置来说,主要是分为四种,如果这四种都没有命中,才回去发起网络请求,这四个位置是:service worker, memory cache, disk cache,push cache.

    (1)service worker

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

    Service Worker 实现缓存功能一般分为三个步骤:首先需要先注册 Service Worker,然后监听到 install 事件以后就可以缓存需要的文件,那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存,存在缓存的话就可以直接读取缓存文件,否则就去请求数据。

    当 Service Worker 没有命中缓存的时候,我们需要去调用 fetch 函数获取数据。也就是说,如果我们没有在 Service Worker 命中缓存的话,会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据,浏览器都会显示我们是从 Service Worker 中获取的内容。

    (2)memory cache

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

    那么既然内存缓存这么高效,我们是不是能让数据都存放在内存中呢?
    这是不可能的。计算机中的内存一定比硬盘容量小得多,操作系统需要精打细算内存的使用,所以能让我们使用的内存必然不多。

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

    内存缓存中有一块重要的缓存资源是preloader相关指令(例如<link rel="prefetch">)下载的资源。总所周知preloader的相关指令已经是页面优化的常见手段之一,它可以一边解析js/css文件,一边网络请求下一个资源。

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

    (3)disk cache

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

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

    浏览器会把哪些文件丢进内存中?哪些丢进硬盘中?
    
    对于大文件来说,大概率是不存储在内存中的,反之优先
    当前系统内存使用率高的话,文件优先存储进硬盘

    (4)push cache

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

    Push Cache 在国内能够查到的资料很少,也是因为 HTTP/2 在国内不够普及。

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

    如果以上四种缓存都没有命中的话,那么只能发起请求来获取资源了。

    那么为了性能上的考虑,大部分的接口都应该选择好缓存策略,通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的

    二、缓存过程

    浏览器与服务器通信的方式为应答模式,即是:浏览器发起HTTP请求 – 服务器响应该请求,那么浏览器怎么确定一个资源该不该缓存,如何去缓存呢?浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存标识存入浏览器缓存,浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的

    所以,浏览器每次发起请求,都会先从缓存中去寻找缓存结果和缓存标示,如果没有,才会向服务端发起http请求。而在服务器返回的结果中浏览器会将请求的结果和缓存的标示再次存入到浏览器的缓存中。

    浏览器缓存机制的关键,它确保了每个请求的缓存存入与读取,只要我们再理解浏览器缓存的使用规则,那么所有的问题就迎刃而解了。所以http请求缓存策略强缓存和协商缓存也就成为了方案之一。
     

    更多相关内容
  • 浏览器缓存机制

    2016-12-06 11:58:03
    浏览器缓存机制、Expires策略(http1.0)和Cache-control策略(http1.1)、Last-Modified/If-Modified-Since、ETag/If-None-Match
  • 浏览器缓存机制详细知识点梳理 在前端的性能优化中,浏览器缓存是很重要的一环。比如在页面前进或者后退,发现丝毫不卡顿很流畅,就是缓存机制的力量。 一、什么是缓存 浏览器缓存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,不用请求直接走缓存,最快的速度

    展开全文
  • 浏览器缓存机制详解

    千次阅读 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协议加密的使用。
    
    展开全文
  • 浏览器缓存机制剖析

    2021-02-25 17:49:19
    缓存一直是前端优化的主战场,利用好缓存就成功了一半。本篇从HTTP请求和响应的头域入手,让你对浏览器缓存有个整体的概念。最终你会发现强缓存,协商缓存和启发...浏览器缓存里,Cache-Control是金字塔顶尖的规则,它
  • 浏览器缓存知识1. 缓存过程分析2. 强缓存的原理2.1 Expires2.2 Cache-Control2.3 from memory cache 和 fromdisk cache2.4 强缓存的管理3 协商缓存3.1 Last-Modified / If-Modified-Since3.2 Etag / If-None-Match4 ...

    浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。

    1. 缓存过程分析

    浏览器与服务器通信的方式为应答模式,即是:浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存结果,是则将请求结果和缓存标识存入浏览器缓存中,简单的过程如下图:
    在这里插入图片描述由上图我们可以知道

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

    以上两点结论就是浏览器缓存机制的关键,他确保了每个请求的缓存存入与读取,只要我们再理解浏览器缓存的使用规则,那么所有的问题就迎刃而解了,本文也将围绕着这点进行详细分析。

    为了方便大家理解,这里我们根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分,分别是强制缓存和协商缓存 :

    • 1)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;
    • 2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;
    • 3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。
    • 4)当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。

    2. 强缓存的原理

    强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程,强制缓存的情况主要有三种(暂不分析协商缓存过程),如下:

    (1)不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求(跟第一次发起请求一致),如下图:
    在这里插入图片描述
    (2)存在该缓存结果和缓存标识,但是结果已经失效,强制缓存失效,则使用协商缓存(暂不分析),如下图
    在这里插入图片描述
    (3)存在该缓存结果和缓存标识,且该结果没有还没有失效,强制缓存生效,直接返回该结果,如下图:
    在这里插入图片描述
    那么强制缓存的缓存规则是什么?
    当浏览器向服务器发送请求的时候,服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Conctrol的优先级比Expires高。

    2.1 Expires

    Expires是HTTP/1.0控制网页缓存的字段,其值为服务器返回该请求的结果缓存的到期时间,即再次发送请求时,如果客户端的时间小于Expires的值时,直接使用缓存结果。

    Expires是HTTP/1.0的字段,但是现在浏览器的默认使用的是HTTP/1.1,那么在HTTP/1.1中网页缓存还是否由Expires控制?

    到了HTTP/1.1,Expires已经被Cache-Control替代,原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,如果客户端与服务端的时间由于某些原因(时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存直接失效,那么强制缓存存在的意义就毫无意义。、

    2.2 Cache-Control

    在HTTP/1.1中,Cache-Control是最重要的规则,主要用于控制网页缓存,主要取值为:

    • (1)public:所有内容都将被缓存(客户端和代理服务器都可缓存)
    • (2)private:所有内容只有客户端可以缓存,Cache-Control的默认取值
    • (3)no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
    • (4)no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
    • (5)max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效

    接下来,我们直接看一个例子,如下:
    在这里插入图片描述

    由上面的例子我们可以知道:
    (1)HTTP响应报文中expires的时间值,是一个绝对值
    (2)HTTP响应报文中Cache-Control为max-age=600,是相对值

    由于Cache-Control的优先级比expires,那么直接根据Cache-Control的值进行缓存,意思就是说在600秒内再次发起该请求,则会直接使用缓存结果,强制缓存生效。

    注:在无法确定客户端的时间是否与服务端的时间同步的情况下,Cache-Control相比于expires是更好的选择,所以同时存在时,只有Cache-Control生效。

    2.3 from memory cache 和 fromdisk cache

    (1)内存缓存(from memory cache):内存缓存具有两个特点,分别是快速读取和时效性:

    • 1、快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。
    • 2、时效性:一旦该进程关闭,则该进程的内存则会清空。
      (2)硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

    在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

    2.4 强缓存的管理

    6)如果缓存问题出现在ajax请求中,最有效的解决办法就是ajax的请求地址追加随机数;
    7)还有一种情况就是动态设置iframe的src时,有可能也会因为缓存问题,导致看不到最新的效果,这时候在要设置的src后面添加随机数也能解决问题;
    8)如果你用的是grunt和gulp这种前端工具开发,通过它们的插件比如grunt-contrib-connect来启动一个静态服务器,则完全不用担心开发阶段的资源更新问题,因为在这个静态服务器下的所有资源返回的respone header中,cache-control始终被设置为不缓存:

    实际应用中我们会碰到需要强缓存的场景和不需要强缓存的场景,通常有2种方式来设置是否启用强缓存:
    1)通过代码的方式,在web服务器返回的响应中添加Expires和Cache-Control Header;
    2)通过配置web服务器的方式,让web服务器在响应资源的时候统一添加Expires和Cache-Control Header。

    3 协商缓存

    协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:

    (1)协商缓存生效,返回304,如下
    在这里插入图片描述
    (2)协商缓存失败,返回200和请求结果,如下
    在这里插入图片描述
    同样,协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的,控制协商缓存的字段分别有:Last-Modified / If-Modified-Since和Etag / If-None-Match,其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

    3.1 Last-Modified / If-Modified-Since

    (1)Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间,如下:
    在这里插入图片描述
    (2)If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件,如下。
    在这里插入图片描述

    3.2 Etag / If-None-Match

    (1)Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成),如下:
    在这里插入图片描述
    (2)If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200,如下。
    在这里插入图片描述
    注:Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。

    4 总结

    强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;生效则返回304,继续使用缓存,主要过程如下:
    在这里插入图片描述

    展开全文
  • 浏览器缓存对于前端一点都不陌生,最常见的就是,新版本上线了,测试却说这怎么还没有变化呢?使用 ctr + F5 强制刷新之后,立马就好了。或者清除浏览器缓存,按住ctr+shift+delete,弹出如图: 我们会发现目前...
  • 前端浏览器缓存机制

    2021-05-08 18:09:00
    目录1 缓存定义及其优点2 强缓存2.1 expires 和 Cache-Control3 协商缓存4 浏览器缓存位置 1 缓存定义及其优点 什么是缓存? 当我们第一次访问网站的时候,电脑会把网站上的图片和数据下载到电脑上,当我们再次访问...
  • 浏览器缓存可以帮助我们在第⼀和第三步骤中优化性能。⽐如说直接使⽤缓存⽽不发起请求,或者发起了请求但后端存储的数据和前端⼀致,那么就没有必要再将数据回传回来,这样 就减少了响应数据。 一、 缓存位置 从...
  • 浏览器缓存机制之一(经典缓存)因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。周末天气不好,懒得出去了,正好找时间总结下...
  • 前端缓存/浏览器缓存机制 1. 缓存过程分析 浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存标识存入浏览器缓存,浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。 浏览器每次...
  • vuex、浏览器缓存机制、数据响应式的原理
  • 浏览器缓存机制分析及前端缓存清理发布时间:2018-06-03 16:56,浏览次数:857本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面的时候都会遇到一个问题,就是...
  • 1、浏览器缓存流程图; 2、浏览器缓存脑图文件
  • 浏览器缓存机制介绍与缓存策略剖析.pptx
  • 面试-浏览器缓存机制

    千次阅读 2022-03-13 23:45:00
    相信很多前端童鞋对于浏览器缓存都不太陌生,但是如果没有系统的归纳总结,可能三言两句很难说明白。如何才能完美的回答,这是一个值得思考的问题。 当然,我们不能为了应对面试才去掌握,而应该当作技能储备起来,...
  • 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 感谢...
  • 前端面试系列-浏览器缓存机制

    千次阅读 2019-03-04 15:53:00
    缓存位置 从缓存位置上来说分为四种,并且各自有优先级,当依次查找...Service Worker 的缓存与浏览器其他内建的缓存机制不同,它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性...
  • “ 激情过后,总要回归平静的生活。” 01 序 前端的工作与各大浏览器的关系紧密相连,尤其是对于性能这一块的联系及其重要。... 接下来我会从缓存位置,缓存策略来结合具体场景分析浏览器缓存机..
  • 浏览器缓存机制

    千次阅读 2022-05-19 21:17:34
    浏览器的缓存机制 定义: 浏览器的缓存机制就是把一个请求过的web资源拷贝一份副本存储存在浏览器中;缓存会根据进来的请求保存输出内容的副本,当一下个请求到来的时候,...Cache-Control (与浏览器缓存机制有关的属性)
  • 目录 **1. DNS 缓存** **2. CDN 缓存** **3. 浏览器缓存**
  • 缓存可以减缓网络OI消耗,提高访问速度。 通过网络获取内容速度慢而且开销巨大。...浏览器缓存机制有四个方面,按照获取资源时请求的优先级排序如下: 1、Memory Cach :内存中的缓存,是浏览器最先去命中一种...
  • 缓存可以减少网络IO消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些...但事实上,浏览器缓存机制有四个方面,它们按照...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 169,696
精华内容 67,878
关键字:

浏览器缓存机制

友情链接: DZCE.zip