- 综合排序
- 最热优先
- 最新优先
- 来自专栏晴天小屋
HTTP缓存,浏览器缓存
前端缓存 可分为两大类：http缓存和浏览器缓存。我们今天重点讲的是http缓存，所以关于浏览器缓存大家自行去查阅。 下面这张图是前端缓存的一个大致知识点： HTTP 缓存策略分为两种： 强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的 （一）强缓存 强缓存的意思很简单，直接从浏览器缓存过的本地进行读取 ，不会去请求服务器 s-maxage：这个和上面的一样，只不过这个设置的是代理服务器的缓存时间 privte：这个表示缓存只能被客户端的浏览器缓存，不能被代理服务器缓存 public：这个表示缓存既可以被浏览器缓存 ，也可以被代理服务器缓存 no-store：这个属性表示不缓存，在任何情况下，都是与服务器进行最新的交互 no-cache：这个并非不缓存的意思，这个表示强制进行协商缓存，会在下面描述 （二）协商缓存 协商缓存表示在使用本地的缓存之前，会先向服务器发一个请求，与服务器协商当前浏览器的缓存是否已经过期了，如果没过期，那么就使用本地的资源，如果过期了就去请求最新资源。
1.2K50编辑于 2023-03-19 - 来自专栏踏浪的文章
浏览器缓存
HTTP header 缓存工作原理 浏览器发起请求的时候，根据请求头的 express 和 cache-control 来判断是否命中强缓存，如果是，怎直接从缓存读取资源，不会发起请求。 如果没有命中强缓存，浏览器会发起一个请求到服务端，并通过 last-modified If-modified-since 和 etag if-none-match 判断资源是否命中协商缓存，如果命中， 不会 中断请求，服务器会将这个请求返回（304），但是不会返回资源，资源会从缓存中读取。 如果没有命中缓存，则发起请求，直接从服务器加载资源。 cookie：4kb，可以手动设置过期时间 localStorage：5M，不手动清除一直存在，可以跨标签访问 sessionStorage：5M，不可以跨标签访问，窗口回话结束自己清除 indexDB：浏览器数据库
1K10发布于 2021-06-09 - 来自专栏李白偷偷偷猪
浏览器缓存
浏览器缓存分为强缓存和协商缓存。 源； 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓 存不对发送请求到服务器，但协商缓存会； 当协商缓存也没命中时，服务器就会将资源发送回客户端； 当 ctrl+f5 强制刷新⽹⻚时，直接从服务器加载，跳过强缓存和协商缓存； 当 f5 刷新⽹⻚时，跳过强缓存，但是会检查协商缓存； 强缓存 强缓存 表示在缓存期间不需要请求，state code 为 200， 有两种实现方式 :max-age （该字段是 http1.1 的规范，强缓存利⽤其 max-age 值来判断缓存资源的最⼤⽣命周期，它的值单位为秒） 协商缓存 如果缓存过期了，我们就可以使用协商缓存来解决问题。 协商缓存需要请求接口，如果缓存有效会返回304。
96820编辑于 2022-11-15 - 来自专栏前端小学生
浏览器缓存
当浏览器访问服务器端，服务器给予响应时，服务器会根据需求/场景在响应头里告知浏览器，将以下数据缓存下来：把这次请求得到的响应体缓存到本地文件中标记这次请求的请求方法和请求路径根据服务器返回值，标记缓存（ 过期）时间记录服务器这次响应时间，格式为格林威治时间标记录服务器给予的资源编号标记录资源的上一次修改时间，格式为格林威治时间当浏览器再次请求时，会优先去缓存里查找，有没有命中的缓存，没有的话，即立即请求 一般设置其中任意一个字段都可实现强缓存策略，当两个字段同时存在时，max-age优先级会高于Expires。如果命中了强缓存，浏览器控制台的http状态码仍旧是200。 可以理解为，没有强缓存，但是会有协商缓存协商缓存如果设置了no-cache，以及max-age（max-age=0为立即过期）过期了，这么着就命中了协商缓存，此时浏览器向服务器端请求，服务器端返回304 ，即缓存有效，使用缓存数据；如果返回200，即缓存失效，使用服务器端最新数据除此之外，两者还有以下一些区别：强缓存其实更多的发生在浏览器端，而 协商缓存更多的在服务器端在浏览器强制刷新的情况下，强缓存不会生效
61740编辑于 2023-05-30 - 来自专栏java springboot docker
浏览器缓存
文章目录[隐藏] 强缓存 协商缓存 强缓存 有缓存时，客户端直接从缓训中获取数据。没有时，从服务端取数据。 协商缓存可以叫做对比缓存，请求时会带上资源标识符去到服务端进行比对，如果资源没有任何修改，则客户端直接缓存。 注意：协商缓存和强缓存的重要区别，强缓存下的客户端请求服务器接收不到，协商缓存下的客户端请求服务端时可以接受到只是做在服务端进行数据对比，判断资源是否更新； 协商缓存与强缓存的区别 强缓存都会访问本地缓存直接验证看是否过期 但协商缓存本地缓存会被忽略，会去请求服务器验证资源是否更新，如果没更新才继续使用本地缓存，此时返回的是 304，这就是协商缓存。协商缓存主要包括 Last-Modified 和 Etag。 ，在使用缓存前，不管缓存资源是否过期了，都必须进行校验 客户端提醒缓存服务器，在使用缓存前，不管缓存资源是否过期了，都必须进行校验 max-age=[秒] 秒 如果缓存资源的缓存时间值小于指定的时间值，
1K30编辑于 2023-03-30 - 来自专栏IMWeb前端团队
浏览器缓存
本文作者：IMWeb 存勖闲 原文出处：IMWeb社区 未经同意，禁止转载 原文链接：http://www.cun-xu.cn/index.php/2018/12/26/浏览器缓存/ 今天我们来说一下浏览器缓存的问题 浏览器缓存是一种操作简单、效果显著的前端性能优化手段。 不过，这些响应通常只为单个用户缓存，因此不允许任何中间缓存对其进行缓存。例如，用户的浏览器可以缓存包含私人信息的HTML网页，但CDN却不能进行缓存。 会告诉浏览器不要对该资源缓存，及每一次都得向服务器发送一次响应。 Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前可以直接从浏览器缓存取数据，而无需再次请求。
2.6K10发布于 2019-12-03 - 来自专栏腾讯云 CDN 专家服务
节点缓存VS浏览器缓存
浏览器缓存策略： 强制缓存：当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control 协商缓存：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，一般是使用 if-modified-since/Last-Modified 和 if-none-match/Etag 由服务器来决定浏览器缓存的资源是否可以使用 一般情况下，节点缓存和浏览器缓存是独立的，并不会相互影响。但腾讯云在特定平台的特定场景下，两者会出现关联性。 问题描述： 客户反馈将域名vodtest.xiaobli.xyz “全部文件不缓存” 的策略删除后，访问如下url文件，CDN节点和浏览器均会缓存住，不符合预期。 如下所示，该域名无浏览器缓存过期配置。在这种场景下，浏览器缓存多久取决于访问某资源时，服务器响应的Cache-Control 或Expires。
1.5K81发布于 2021-06-01 - 来自专栏WebJ2EE
【浏览器】：缓存
缓存的种类有很多,其大致可归为两类： 私有缓存（例：浏览器缓存） 共享缓存（例：代理缓存） 4. 缓存原理？ 4.1. Cache-Control: no-store 示例：禁止浏览器缓存CSS、JS、PNG、HTML文件 4.3.1.2. 用户行为与浏览器 5.1. 地址栏访问 IE11、Edge、Chrome、Firefox：完整缓存策略 5.2. Ctrl + F5 按Ctrl+F5，浏览器将放弃自身缓存，同时也不会向向服务端确认新鲜度，直接从拉取资源。 如何清理浏览器缓存？ 各浏览器都可通过 [Ctrl+Shift+Delete] 快捷键完成缓存清理。 6.4. Targets of caching operations？
1.1K30发布于 2020-11-20 浏览器缓存
浏览器缓存缓存位置Service WorkerService Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。 注意点：必须是 HTTPS。 协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么该请求的缓存失效，返回 200，重新返回资源和缓存标识，再存入浏览器中； 如果强缓存和协商缓存都没有设置，那么浏览器会采用启发式的算法，通常会取响应头中的 协商缓存强缓存失效之后，浏览器在请求头中携带相应的缓存tag（缓存标识）来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。 否则返回304，告诉浏览器直接用缓存。 状态码- 否则，返回304，告诉浏览器直接从缓存获取资源
30620编辑于 2024-09-28- 来自专栏前端学习文档
浏览器缓存
source=cloudtencent 浏览器缓存主要包含 cookie、 在 HTML5 新标准中新增了本地存储 localStorage 和会话存储 sessionStorage。 cookie 是一些缓存数据，主要存储在你的电脑中。当你发起网络请求时也会携带当前域名端口下的 cookie 信息传输给后端。 创建 cookie 默认情况下，没有设置过期时间，当浏览器关闭时 cookie 就会被删除（关闭当前选项卡不会删除）。 document.cookie = 'name=libai' // 'age=18; class=A; name=libai' 删除 cookie 直接给 cookie 设置一个已过期的时间，那么关闭浏览器后则会被删除 ）时，sessionStorage 缓存会被销毁。
62100编辑于 2023-05-26 - 来自专栏全栈程序员必看
web浏览器缓存机制_网站利用浏览器缓存
浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存，也用到了经典的缓存如设置max-age，Etag之类，而之前一直就是在用着没有去深究其中原理。 1.关于浏览器缓存 记得去年看《HTTP权威指南》的时候，有一章是专门讲浏览器缓存的，一年时间过得太快，逝去的时光还真是如同人群中消失的好姑娘，眼看她嫁给别人。 我这里把浏览器缓存分为经典的浏览器缓存(以下简称为经典缓存)和HTML5应用缓存这两类。 3.用户行为与缓存 用户行为也会影响浏览器缓存机制。 4.参考资料 浏览器缓存机制 《HTTP权威指南》 Is Chrome ignoring Control-Cache: max-age?
1.2K20编辑于 2022-11-03 - 来自专栏全栈程序员必看
php清除浏览器缓存代码,js清除浏览器缓存
本篇文章的内容是js清除浏览器缓存，在这里分享给大家，也可以给有需要的朋友做一下参考，大家一起来看一看吧 一、meta方式 一开始百度后的做法，但是在360中并不适应 二、动态引入js+时间戳去除静态html 的缓存–动态引入js文件 动态引入js文件以及在js文件后边添加动态参数 代码 window.οnlοad=function(){ var script=document.createElement
9.2K20编辑于 2022-09-09 - 来自专栏前端客栈
浏览器缓存机制浅析--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的请求无法被缓存 用户行为与缓存 浏览器缓存行为还有用户的行为有关！！！
1.1K20发布于 2019-08-29 - 来自专栏全栈程序员必看
PHP 浏览器缓存_php缓存引擎
浏览器缓存动态内容,缓存的内容在浏览器本地,而内容由web服务器生成,任何一方都不可能完成这一系列过程,他们之间有一种沟通机制,这就是缓存协商. 如何协商 当浏览器向web服务器请求内容时,服务器需要告诉浏览器那些内容可以被缓存,一旦浏览器知道某个内容可以缓存后,下次当浏览器需要请求这个内容时,它便不会直接向服务器请求完整内容,而是询问服务器是否可以使用本地的缓存 ,服务器在收到浏览器的询问后需要作出过段的回应,是允许浏览器使用本地缓存还是将最新内容传回浏览器. 浏览器缓存截止期 Expires告诉浏览器该内容在何时过期,暗示浏览器在该内容过期之前不需要询问服务器,而直接使用本地缓存即可. 请求页面 ctrl+f5 它使得网页及其所有组件直接向web服务器发送请求,并且不使用缓存协商. f5 它等同于单机浏览器的刷新按钮,它允许浏览器在请求中附加表的缓存协商,但不允许浏览器直接使用本地缓存
2.6K30编辑于 2022-11-07 - 来自专栏linjinhe的专栏
浏览器缓存机制
浏览器通过HTTP头部的字段来控制文件的缓存：要不要缓存以及缓存的过期时间。 Cache-Control/Expires Cache-Control和Expires控制文件的缓存，在缓存文件的有效时间内，浏览器直接使用本地文件，不与服务器交互。 Cache-Control: private 告诉浏览器不要缓存这个文件。 Ctrl+F5 强制使上面两种浏览器缓存失效: Cache-Control:no-cache Pragma:no-cache 利用浏览器缓存 理想的缓存机制应该是这样的： 缓存文件没更新，尽可能使用缓存 ，不用和服务器交互； 当用户刷新时，尽可能减少浏览器和服务器之间的数据传输； 缓存文件有更新时，第一时间能使用到新的文件； 缓存的文件要保持完整性，不使用被修改过的缓存文件； 缓存的容量大小要能设置或控制
1.2K60发布于 2018-06-06 - 来自专栏女程序员的日常_Lin
浏览器缓存机制
网络请求 Service Worker Service Worker是运行在浏览器背后的独立线程，一般可以用于实现缓存。 Service缓存与浏览器其他内建的缓存机制不同，他可以让我们自由控制缓存那些文件，如何缓存文件，如何读取缓存，并且缓存是持续的。 Push cache中的缓存只能被使用一次 浏览器可以拒绝接受已经存在的资源推送 你可以给其他域名推送资源 缓存策略 ---- 通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 协商缓存可以通过设置两个HTTP Header实现：Last-Modified 和Etag 当浏览器发起请求验证资源时，如果资源没有做修改，那么服务端就会返回304状态码，并且更新浏览器缓存有效期。 那么如果没设置任何缓存策略，浏览器会怎么处理？ 这时，浏览器会采用一个启发式的算法，通常会取响应头中的Date减去Last-Modified值的10%作为缓存时间。
1.5K20发布于 2020-02-25 - 来自专栏ShanSan的云原生之路
浏览器缓存机制
什么是浏览器缓存 浏览器通常会将常用资源缓存在个人电脑的磁盘和内存中。 缓存是性能优化中简单高效的一种优化方式，它可以显著减少网络传输所带来的损耗。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以在第一和第三个步骤汇总优化性能。 Service Worker的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由决定缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。 缓存策略 通常浏览器的缓存策略分为两类：强缓存和协商缓存，并且缓存策略都是通过设置http Header字段实现的。 协商缓存 当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据header中的部分信息判断是否命中缓存。如果命中，返回304。
84720发布于 2020-07-06 - 来自专栏前端技术总结
图解浏览器缓存
浏览器缓存，是浏览器端保存数据，用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和加快页面速度,从而提高用户体验。 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.4K476发布于 2018-09-22 - 来自专栏前端搬砖日记
浏览器缓存机制
什么是浏览器缓存？ Browser Caching 是浏览器将网络资源存储在本地的一种行为。 优点有： 减少冗余数据的传输 减轻服务器的压力 缩短网页的加载速度 可以看出，浏览器缓存与性能优化有着千丝万缕的联系。 浏览器缓存的分类 协商缓存 强缓存 听名字可以看出来，这两类缓存，一个属于细心的暖男，另一个则是强硬的霸道总裁。 我们先来了解一下浏览器缓存的过程： 首先，浏览器会去检查该资源有关缓存的HTTP Header。一个expires，一个cache-control，看是否命中强缓存。 协商缓存 所谓协商缓存，就是协商嘛，这种情况下客户端和服务端地位是平等的，不像之前说的强缓存，服务端一个header字段，浏览器就要唯命是从。
55110发布于 2020-07-01 - 来自专栏生如夏花绚烂
浏览器缓存机制
而第二次的响应信息为304 未修改 意味着浏览器要从本地取缓存，节省了图片在网络上的请求时间 这是就是浏览器的缓存机制 当我们第一次请求某图片时正常下载图片，返回状态码为200，基于一个前提是图片不会经常变动 ，服务器在返回200的同时还会返回该图片的”签名（Etag）“ 当浏览器再次访问该图片时，会去服务器校验Etag，如果图片没有发生变化返回状态码304，浏览器直接使用缓存中的图片，从而减轻服务器压力。
53410编辑于 2022-09-14
腾讯云开发者
