首页
学习
活动
专区
工具
TVP
发布

HTTP缓存,浏览器缓存

前端缓存 可分为两大类:http缓存浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。...下面这张图是前端缓存的一个大致知识点: HTTP 缓存策略分为两种: 强缓存 和 协商缓存 ,这两种缓存策略都是服务端设置 HTTP Header 来实现的 (一)强缓存缓存的意思很简单,直接从浏览器缓存过的本地进行读取...,不会去请求服务器 s-maxage:这个和上面的一样,只不过这个设置的是代理服务器的缓存时间 privte:这个表示缓存只能被客户端的浏览器缓存,不能被代理服务器缓存 public:这个表示缓存既可以被浏览器缓存...,也可以被代理服务器缓存 no-store:这个属性表示不缓存,在任何情况下,都是与服务器进行最新的交互 no-cache:这个并非不缓存的意思,这个表示强制进行协商缓存,会在下面描述 (二)协商缓存...协商缓存表示在使用本地的缓存之前,会先向服务器发一个请求,与服务器协商当前浏览器缓存是否已经过期了,如果没过期,那么就使用本地的资源,如果过期了就去请求最新资源。

79950

浏览器缓存

HTTP header 缓存工作原理 浏览器发起请求的时候,根据请求头的 express 和 cache-control 来判断是否命中强缓存,如果是,怎直接从缓存读取资源,不会发起请求。...如果没有命中强缓存浏览器会发起一个请求到服务端,并通过 last-modified If-modified-since 和 etag if-none-match 判断资源是否命中协商缓存,如果命中,...不会 中断请求,服务器会将这个请求返回(304),但是不会返回资源,资源会从缓存中读取。...如果没有命中缓存,则发起请求,直接从服务器加载资源。...cookie:4kb,可以手动设置过期时间 localStorage:5M,不手动清除一直存在,可以跨标签访问 sessionStorage:5M,不可以跨标签访问,窗口回话结束自己清除 indexDB:浏览器数据库

76610
您找到你想要的搜索结果了吗?
是的
没有找到

浏览器缓存

浏览器访问服务器端,服务器给予响应时,服务器会根据需求/场景在响应头里告知浏览器,将以下数据缓存下来:把这次请求得到的响应体缓存到本地文件中标记这次请求的请求方法和请求路径根据服务器返回值,标记缓存(...过期)时间记录服务器这次响应时间,格式为格林威治时间标记录服务器给予的资源编号标记录资源的上一次修改时间,格式为格林威治时间当浏览器再次请求时,会优先去缓存里查找,有没有命中的缓存,没有的话,即立即请求...一般设置其中任意一个字段都可实现强缓存策略,当两个字段同时存在时,max-age优先级会高于Expires。如果命中了强缓存浏览器控制台的http状态码仍旧是200。...可以理解为,没有强缓存,但是会有协商缓存协商缓存如果设置了no-cache,以及max-age(max-age=0为立即过期)过期了,这么着就命中了协商缓存,此时浏览器向服务器端请求,服务器端返回304...,即缓存有效,使用缓存数据;如果返回200,即缓存失效,使用服务器端最新数据除此之外,两者还有以下一些区别:强缓存其实更多的发生在浏览器端,而 协商缓存更多的在服务器端在浏览器强制刷新的情况下,强缓存不会生效

35840

浏览器缓存

文章目录[隐藏] 强缓存 协商缓存缓存缓存时,客户端直接从缓训中获取数据。没有时,从服务端取数据。...协商缓存可以叫做对比缓存,请求时会带上资源标识符去到服务端进行比对,如果资源没有任何修改,则客户端直接缓存。...注意:协商缓存和强缓存的重要区别,强缓存下的客户端请求服务器接收不到,协商缓存下的客户端请求服务端时可以接受到只是做在服务端进行数据对比,判断资源是否更新; 协商缓存与强缓存的区别 强缓存都会访问本地缓存直接验证看是否过期...但协商缓存本地缓存会被忽略,会去请求服务器验证资源是否更新,如果没更新才继续使用本地缓存,此时返回的是 304,这就是协商缓存。协商缓存主要包括 Last-Modified 和 Etag。...,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 max-age=[秒] 秒 如果缓存资源的缓存时间值小于指定的时间值,

72630

浏览器缓存

浏览器缓存分为强缓存和协商缓存。...源; 强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓 存不对发送请求到服务器,但协商缓存会; 当协商缓存也没命中时,服务器就会将资源发送回客户端; 当 ctrl+f5...强制刷新⽹⻚时,直接从服务器加载,跳过强缓存和协商缓存; 当 f5 刷新⽹⻚时,跳过强缓存,但是会检查协商缓存; 强缓存缓存 表示在缓存期间不需要请求,state code 为 200, 有两种实现方式...:max-age (该字段是 http1.1 的规范,强缓存利⽤其 max-age 值来判断缓存资源的最⼤⽣命周期,它的值单位为秒) 协商缓存 如果缓存过期了,我们就可以使用协商缓存来解决问题。...协商缓存需要请求接口,如果缓存有效会返回304。

73520

节点缓存VS浏览器缓存

浏览器缓存策略: 强制缓存:当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control...协商缓存:强制缓存失效后,浏览器携带缓存标识向服务器发起请求,一般是使用 if-modified-since/Last-Modified 和 if-none-match/Etag 由服务器来决定浏览器缓存的资源是否可以使用...一般情况下,节点缓存浏览器缓存是独立的,并不会相互影响。但腾讯云在特定平台的特定场景下,两者会出现关联性。...问题描述: 客户反馈将域名vodtest.xiaobli.xyz “全部文件不缓存” 的策略删除后,访问如下url文件,CDN节点和浏览器均会缓存住,不符合预期。...如下所示,该域名无浏览器缓存过期配置。在这种场景下,浏览器缓存多久取决于访问某资源时,服务器响应的Cache-Control 或Expires。

1.2K81

web浏览器缓存机制_网站利用浏览器缓存

浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。...1.关于浏览器缓存 记得去年看《HTTP权威指南》的时候,有一章是专门讲浏览器缓存的,一年时间过得太快,逝去的时光还真是如同人群中消失的好姑娘,眼看她嫁给别人。...我这里把浏览器缓存分为经典的浏览器缓存(以下简称为经典缓存)和HTML5应用缓存这两类。...3.用户行为与缓存 用户行为也会影响浏览器缓存机制。...4.参考资料 浏览器缓存机制 《HTTP权威指南》 Is Chrome ignoring Control-Cache: max-age?

85620

PHP 浏览器缓存_php缓存引擎

浏览器缓存动态内容,缓存的内容在浏览器本地,而内容由web服务器生成,任何一方都不可能完成这一系列过程,他们之间有一种沟通机制,这就是缓存协商....如何协商 当浏览器向web服务器请求内容时,服务器需要告诉浏览器那些内容可以被缓存,一旦浏览器知道某个内容可以缓存后,下次当浏览器需要请求这个内容时,它便不会直接向服务器请求完整内容,而是询问服务器是否可以使用本地的缓存...,服务器在收到浏览器的询问后需要作出过段的回应,是允许浏览器使用本地缓存还是将最新内容传回浏览器....浏览器缓存截止期 Expires告诉浏览器该内容在何时过期,暗示浏览器在该内容过期之前不需要询问服务器,而直接使用本地缓存即可....请求页面 ctrl+f5 它使得网页及其所有组件直接向web服务器发送请求,并且不使用缓存协商. f5 它等同于单机浏览器的刷新按钮,它允许浏览器在请求中附加表的缓存协商,但不允许浏览器直接使用本地缓存

2.1K30

浏览器缓存机制浅析--HTTP缓存

非HTTP协议定义缓存 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。..." content="no-cache"> 上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。...Cache-Control Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。...无法被浏览器缓存的请求: HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache(HTTP1.0),或Cache-Control:max-age=0等告诉浏览器不用缓存的请求...,也不包含Cache-Control/Expires的请求无法被缓存 用户行为与缓存 浏览器缓存行为还有用户的行为有关!!!

88620

浏览器缓存机制

什么是浏览器缓存 浏览器通常会将常用资源缓存在个人电脑的磁盘和内存中。 缓存是性能优化中简单高效的一种优化方式,它可以显著减少网络传输所带来的损耗。...对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以在第一和第三个步骤汇总优化性能。...Service Worker的缓存浏览器其他内建的缓存机制不同,它可以让我们自由决定缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的。...缓存策略 通常浏览器缓存策略分为两类:强缓存和协商缓存,并且缓存策略都是通过设置http Header字段实现的。...协商缓存 当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据header中的部分信息判断是否命中缓存。如果命中,返回304。

71420

浏览器缓存机制

网络请求 Service Worker Service Worker是运行在浏览器背后的独立线程,一般可以用于实现缓存。...Service缓存浏览器其他内建的缓存机制不同,他可以让我们自由控制缓存那些文件,如何缓存文件,如何读取缓存,并且缓存是持续的。...Push cache中的缓存只能被使用一次 浏览器可以拒绝接受已经存在的资源推送 你可以给其他域名推送资源 缓存策略 ---- 通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置...协商缓存可以通过设置两个HTTP Header实现:Last-Modified 和Etag 当浏览器发起请求验证资源时,如果资源没有做修改,那么服务端就会返回304状态码,并且更新浏览器缓存有效期。...那么如果没设置任何缓存策略,浏览器会怎么处理? 这时,浏览器会采用一个启发式的算法,通常会取响应头中的Date减去Last-Modified值的10%作为缓存时间。

1.3K20

浏览器缓存机制

浏览器通过HTTP头部的字段来控制文件的缓存:要不要缓存以及缓存的过期时间。...Cache-Control/Expires Cache-Control和Expires控制文件的缓存,在缓存文件的有效时间内,浏览器直接使用本地文件,不与服务器交互。...Cache-Control: private 告诉浏览器不要缓存这个文件。...Ctrl+F5 强制使上面两种浏览器缓存失效: Cache-Control:no-cache Pragma:no-cache 利用浏览器缓存 理想的缓存机制应该是这样的: 缓存文件没更新,尽可能使用缓存...,不用和服务器交互; 当用户刷新时,尽可能减少浏览器和服务器之间的数据传输; 缓存文件有更新时,第一时间能使用到新的文件; 缓存的文件要保持完整性,不使用被修改过的缓存文件; 缓存的容量大小要能设置或控制

99560

图解浏览器缓存

浏览器缓存,是浏览器端保存数据,用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和加快页面速度,从而提高用户体验。...1.2 强缓存的过程 强缓存浏览器直接从本地缓存中获取数据,不与服务器进行交互。...这里我画了两张图,浏览器第一次请求: 1.jpg 浏览器再次请求: 2.jpg 对于强缓存,chrome浏览器的状态码: 200 OK(from disk cache)或是200 OK (from memory...cache) 例如:请求某个图片后,当浏览器再次访问这个图片时,发现有这个图片的缓存,且缓存没过期,所以就使用缓存。...2.3 协商缓存的过程 浏览器第一次请求: 1.jpg 浏览器再一次请求: 3(1).jpg Last-Modified、If-Modified-Since: · 浏览器第一次向服务器请求一个资源,服务器在返回这个资源的同时

4.1K476

浏览器缓存图解

浏览器缓存有多种形式,持久化或者会话存储。以chrome为例,打开调试面板,找到Application选项卡,就可以看到它所支持的各种缓存模式,如下图: ?...chrome application.png 上图没有http缓存(因为它体现在请求头,在Network选项卡查看更为合适),其实,这恰巧是利用缓存做前端性能优化的重要方法,所以,把它也纳入浏览器缓存表格...sessionstorage 本地缓存页面关闭时清空 不推荐 cookie 不支持跨域(同localstorge)可通过设置domain和path实现共享域名分为session cookie(关闭浏览器清空...)和持久性cookie(定义有效期)httponly设置为true时,JS无法获取cookie值常用于身份验证(逐渐被token替代) 可以用用 webSQL 非HTML5规范,是一种特定的浏览器特性集成在浏览器中的本地数据库类似...下图为http缓存流程图: ? 浏览器缓存.png 协商缓存并非是一种被强缓存“低级”的策略,对于一些特殊的应用场景或资源,协商缓存优于强缓存

53310

浏览器缓存机制

什么是浏览器缓存? Browser Caching 是浏览器将网络资源存储在本地的一种行为。...优点有: 减少冗余数据的传输 减轻服务器的压力 缩短网页的加载速度 可以看出,浏览器缓存与性能优化有着千丝万缕的联系。...浏览器缓存的分类 协商缓存缓存 听名字可以看出来,这两类缓存,一个属于细心的暖男,另一个则是强硬的霸道总裁。...我们先来了解一下浏览器缓存的过程: 首先,浏览器会去检查该资源有关缓存的HTTP Header。一个expires,一个cache-control,看是否命中强缓存。...协商缓存 所谓协商缓存,就是协商嘛,这种情况下客户端和服务端地位是平等的,不像之前说的强缓存,服务端一个header字段,浏览器就要唯命是从。

45710

浏览器缓存机制

Push Cache 中的缓存只能被使用一次 浏览器可以拒绝接受已经存在的资源推送 你可以给其他域 三、缓存过程分析 浏览器与服务器通信的方式为应答模式,即是:浏览器发起HTTP请求 – 服务器响应该请求...,那么浏览器怎么确定一个资源该不该缓存,如何去缓存呢?...浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存标识存入浏览器缓存浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。具体过程如下图: ? ?...第一次发起HTTP请求 由上图我们可以知道: 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中...以上两点结论就是浏览器缓存机制的关键,它确保了每个请求的缓存存入与读取,只要我们再理解浏览器缓存的使用规则,那么所有的问题就迎刃而解了,本文也将围绕着这点进行详细分析。

80820

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券