首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浏览器 & HTTP 缓存策略

缓存策略 浏览器缓存策略是依靠 HTTP Header 来实现的,共分为两种: 强缓存 协商缓存缓存缓存是指在缓存期间,请求不会发送到服务器,浏览器直接返回缓存结果,需要设置 Header:...当浏览器发起请求验证资源时,如果资源没有改变,那么服务器返回 304 状态码,并且更新浏览器缓存有效期;如果资源发生改变,那么服务器返回 200 状态码,并且返回相应资源,更新浏览器缓存有效期。...如果什么缓存策略都没有设置,那么浏览器会采用一个启发式的算法,通常会读取 Response Header 中的 date 头,减去 last-modified 值的 10% 作为缓存时间。...整体流程图 image.png 实际场景 学习了上面的缓存策略,在实际场景中我们该如何应用呢?...来验证资源是否有效,这样对比完全不缓存来说,虽然无法减少 HTTP 请求到达服务器的次数,但是可以显著减少响应数据的大小 文件 HTML 文件不设缓存 CSS、JS以及图片等文件资源,可以设置一个较长的缓存有效期

58030

通过 Node.js 小示例学习浏览器缓存策略

单纯讲一些理论性的东西可能会很难理解,本文结合一些 Node.js 小示例来学习浏览器缓存策略。...在后端为了加速服务的访问速度,通常可以使用 Memcached、Redis 做数据缓存,那么在浏览器端又有哪些缓存策略呢? 一、浏览器缓存几个阶段 1....强缓存策略 浏览器端发起请求之后不会直接向服务器请求数据,直接先到达强缓存阶段,如果强缓存命中直接返回,如果没有命中进入下一阶段协商缓存策略。 2....存储策略 当强缓存->协商缓存都未命中,请求会直接到达服务器,获取最新资源设置缓存策略,进行返回。 二、强缓存缓存的实现分为 Expires、Cache-Control 两个。...,该文件会请求 http://localhost:3010/script.js 如果 url 等于 /script.js 设置 cache-control 的 max-age 进行浏览器缓存

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

    彻底弄懂浏览器缓存策略

    导语 浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概念就没了...,所以重新归纳总结一下,温故而知新 Web缓存介绍 Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。...在16年曾基于IndexDB做过一整套缓存策略,有不错的优化效果 ?...页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。 定义最优缓存策略 使用一致的网址:如果您在不同的网址上提供相同的内容,将会多次获取和存储该内容。...结语 通过了解浏览器各种缓存机制和存储能力特点,结合业务制定合适的缓存策略,善用缓存是基本功,可以用于时常审查负责的业务,可能就会发现个别业务并没有运用到位,共勉。

    2.5K30

    前端本地缓存概况之浏览器缓存策略

    浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)储存在本地(内存或者硬盘)。...(一般cdn都会配置该策略) 1、Expires 缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是:Expires = max-age + 到期时间(该到期时间为绝对时间)。...Expires 是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前,浏览器可以直接从浏览器缓存取数据,而无需再次请求。...市面上不同浏览器有不同策略机制,以下以Chrome浏览器采取的策略简单描述一下: 状态 类型 说明 200 form memory cache 不请求网络资源,资源在内存当中,一般脚本、字体会存在内存当中...html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpeg", "jpg": "image/jpeg", "js

    1.8K10

    一文搞懂浏览器缓存策略

    一、缓存的判断策略 浏览器对于所请求资源的缓存处理有一套完整的机制,主要包含以下三个策略:存储策略、过期策略、协商策略。...其中,存储策略发生在收到请求响应后,用于决定是否缓存相应资源;过期策略发生在请求前,用于判断缓存是否过期;协商策略发生在请求中,用于判断缓存资源是否更新。...浏览器在应用缓存策略时,具体的判断流程如下: ? 上图中的缓存判断流程是浏览器在应用缓存时完整的判断流程。但是在浏览器中访问资源的方式不同也会导致判断流程的不同。判断流程会根据不同方式跳过一些流程。...为明确表示其功能及用法,下表中分别区分了存储策略、过期策略、协商策略、请求头、响应头。 ? 注:乄表示半对,Last-Modified之所以是半对,是因为有可能会触发启发式缓存,也会缓存文件。...刷新浏览器,会发现图片会从缓存获取。 通过启发式缓存的公司可以计算出缓存的时间,修改本地时间超过缓存时间后,再刷新,会发现缓存失效。

    1.1K20

    浏览器缓存绕过同源策略(SOP)限制

    本文分享的Writeup是作者在做Keybase.io的漏洞众测中发现的SOP(同源策略)绕过漏洞,由于Keybase.io在用的多个API端点都启用了CORS(跨域资源共享)机制,这种缓解同源策略的机制某种程度上克服了同源策略的严格限制...而作者在测试中发现了Keybase的CORS策略错误配置,利用这种缺陷,可以操纵浏览器缓存获取用户敏感数据信息。一起来看看。...但是,我在服务端对该API的响应消息中发现了一个名为 ‘Etag’ 的消息头,这是一个浏览器缓存标记头,代表客户端请求资源未发生变化,那么浏览器就可以从用户的缓存内容中去取出然后响应给用户。...Payload与漏洞利用 我想起Twitter用户@Bitk_曾用过一个技巧,那就是用javascript的fetch API方法去强制从浏览器缓存中直接发起一个跨域请求,而恰巧 Keybase 在这里未曾对服务端响应头部署过任何缓存控制头...如下: 为了确认Payload是否被成功执行,从下图的浏览器请求信息中可以看到,fetch方法直接从浏览器缓存中读取了我的身份信息。

    1.3K10

    缓存策略

    策略 Cache-Aside 可能是最常用的缓存策略。...使用 Cache Aside 策略的系统可以在一定程度上抵抗缓存故障。如果缓存服务发生故障,系统仍然可以通过直接访问数据库进行操作。...然而,这种策略并不能保证数据存储和缓存之间的一致性,需要配合使用其它策略来更新或使缓存无效。另外,首次请求数据时,总是会导致缓存未命中,这种情况下需要额外的时间来将数据加载到缓存中。...Read-Through 策略 在上面的 Cache-Aside 策略中,应用程序需要与缓存和数据源“打交道”,而在 Read-Through 策略下,应用程序无需管理数据源和缓存,只需要将数据源的同步委托给缓存提供程序...Write-Through 策略 Write-Through 策略下,当发生数据更新(Write)时,缓存提供程序 Cache Provider 负责更新底层数据源和缓存

    55810

    缓存策略

    Web缓存的作用 减少网络带宽消耗 降低服务器压力 减少网络延迟,加快页面打开速度 HTTP缓存机制 缓存行为主要由缓存策略决定,而缓存策略由内容拥有者设置。...CDN缓存策略 CDN边缘节点缓存策略因服务商不同而不同,但一般都会遵循http标准协议,通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。...CACHE MANIFEST # wanz app v1 # 指明缓存入口 CACHE: index.html style.css images/logo.png scripts/main.js #...关于localStorage踩坑指南: jero 使用localStorage必须了解的点 构建可缓存站点的建议 来自alloyteam:如何构建可缓存站点 同一个资源保证URL的稳定性 给Css、js...前端工程与性能优化 参考: Web开发基本准则-55实录-缓存策略 【Web缓存机制系列】2 – Web浏览器缓存机制 HTTP协议详解 CDN缓存那些事 浅谈HTTP缓存机制

    98210

    缓存策略

    在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有: Web缓存的作用 减少网络带宽消耗 降低服务器压力 减少网络延迟,加快页面打开速度 HTTP缓存机制 缓存行为主要由缓存策略决定,而缓存策略由内容拥有者设置...CDN缓存策略 CDN边缘节点缓存策略因服务商不同而不同,但一般都会遵循http标准协议,通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。...CACHE MANIFEST # wanz app v1 # 指明缓存入口 CACHE: index.html style.css images/logo.png scripts/main.js #...关于localStorage踩坑指南: jero 使用localStorage必须了解的点 构建可缓存站点的建议 来自alloyteam:如何构建可缓存站点 同一个资源保证URL的稳定性 给Css、js...前端工程与性能优化 参考: Web开发基本准则-55实录-缓存策略 【Web缓存机制系列】2 – Web浏览器缓存机制 HTTP协议详解 CDN缓存那些事 浅谈HTTP缓存机制

    1.7K80

    HTTP缓存策略

    1.web缓存 缓存的作用就是提升网页加载速度。浏览器加载一个完整的网页势必会引用外部资源(图片,js,css)。若每次加载网页都要去加载这些外部资源则会引起不必要的时间和资源浪费,且会影响用户体验。...而解决上述问题需要一个优秀的缓存策略。除此之外,web缓存的优点还有很多,例如:减轻服务器压力 ,加快了客户端加载速度,节省网络带宽等。 web缓存缓存位置,缓存机制可大致分为三类。...1 数据库缓存。 2 服务器缓存。 3 客户端(浏览器缓存/HTTP缓存。undefined下面着重介绍HTTP缓存。...当然这需要一系列策略进行约定。 2.1 强缓存策略 所谓强缓存策略即在静态资源有效期内,使用该资源时直接使用本地资源,不请求服务器。...强缓存验证.jpg HTML时间和JS时间不一致,说明强缓存生效。

    58064

    SDWebImage 缓存策略

    首先,SDWebImage 的图片缓存采用的是 Memory(内存) 和 Disk(硬盘) 双重 Cache 机制,SDImageCache 中有一个叫做 memCache 的属性,它是一个 NSCache...对象,用于实现我们对图片的 `Memory Cache,其实就是接受系统的内存警告通知,然后清除掉自身的图片缓存。...Disk Cache,也就是文件缓存,SDWebImage` 会将图片存放到 NSCachesDirectory 目录中,然后为每一个缓存文件生成一个 md5 文件名, 存放到文件中。...Disk(硬盘)缓存清理策略:SDWebImage 会在每次 APP 结束的时候执行清理任务。 清理缓存的规则分两步进行。 第一步先清除掉过期的缓存文件。 如果清除掉过期的缓存之后,空间还不够。...那么就继续按文件时间从早到晚排序,先清除最早的缓存文件,直到剩余空间达到要求。

    1.6K10

    HTTP缓存,浏览器缓存

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

    93450

    浏览器缓存

    关于缓存的头部字段包括: cache-control(缓存头) 每个资源都可通过cache-controlHTTP标头定义其缓存策略 cache-control指令控制谁在什么条件下可以缓存响应以及可以缓存多少...> Last-Modified 缓存策略 至于缓存策略的制定,我们可以参照Google官方的这张图 ?...根据上面的基础知识和解读,我们可以知晓:在制定缓存策略时,需要牢记以下技巧: 使用一致的网址:如果您在不同的网址上提供相同的内容,将会多次获取和存储这些内容。提示:网址区分大小写。...我们发现,Base64格式的图片,几乎永远可以被塞进memory cache,这可以视作浏览器为节省渲染开销的“自保行为”;此外,体积不大的 JS、CSS 文件,也有较大地被写入内存的几率——相比之下,...较大的 JS、CSS 文件就没有这个待遇了,内存资源是有限的,它们往往被直接甩进磁盘。

    2.2K10

    浏览器缓存

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

    80310

    浏览器缓存

    浏览器缓存分为强缓存和协商缓存。...源; 强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓 存不对发送请求到服务器,但协商缓存会; 当协商缓存也没命中时,服务器就会将资源发送回客户端; 当 ctrl+f5...强制刷新⽹⻚时,直接从服务器加载,跳过强缓存和协商缓存; 当 f5 刷新⽹⻚时,跳过强缓存,但是会检查协商缓存; 强缓存缓存 表示在缓存期间不需要请求,state code 为 200, 有两种实现方式...选择合适的缓存策略 对于大部分的场景都可以使⽤强缓存配合协商缓存解决,但是在⼀些特殊的地 ⽅可能需要选择特殊的缓存策略 对于某些不需要缓存的资源,可以使⽤ Cache-control: no-store...,通常使⽤ Cache-Control: max-age=31536000 并配合策略缓存使⽤,然后对⽂件进⾏指纹处理,⼀旦⽂件名变动就会⽴刻下载新的⽂件

    76920
    领券