关于浏览器缓存 你知道多少？

最新推荐文章于 2025-06-04 10:30:45 发布
最新推荐文章于 2025-06-04 10:30:45 发布
阅读量2.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 性能优化 缓存 文章标签： http缓存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Phoebe_16/article/details/80649217
本文介绍了浏览器缓存资源的方式，包括强缓存和弱缓存两种类型。强缓存通过设置资源过期时间来避免重复请求；弱缓存则通过与服务器协商确认资源的有效性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

浏览器第一次请求资源时，必须下载所有的资源，然后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也可能是弱缓存。

强缓存 本地缓存 状态码200
不发送请求 根据Expire或Cache-Control（优先级高于Expires），让原始服务器为文件设置一个过期时间，在多长时间内可以将这些内容视为最新的，判读是否命中强缓存
Memory cache 将资源存到内存中，从内存中获取
Disk cache 将资源缓存到磁盘中，从磁盘中获取
区别：当退出进程时，内存中的数据会被清空，磁盘中的不会

弱缓存 协商缓存 状态码304
发送请求到服务器，确认资源是否有效（有没有被改动过） 根据Last-Modified或ETag（是一个文件的唯一标识符，只要文件发生变化，这个标识就会发生变化）判断是否命中协商缓存

谈谈浏览器的缓存过期时间
wjxbj的博客
03-08 979
一.浏览器为什么要缓存？什么会缓存下来？          首先当我们访问网页的时候，很多大的图片从服务器上传输过来的时候，试想一下，如果浏览器不把图片缓存下来而是每次都要到服务器去取，那么每次都给服务器和网络造成了巨大的负担。         对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题...
关于浏览器缓存你知道多少
chern1992的博客
07-05 1622
在前端开发中，我们在提到性能优化的时候总会提到一点：合理设置缓存。我们该如何从这方面入手来考虑提高网站性能呢？ 前言 我们都知道 HTML5 引入了应用程序缓存，可以在没有网络的情况下进行访问，同时，HTML5 还引入了 storage 本地存储。这些都属于应用缓存。 本篇文章主要内容是和浏览器缓存相关的，也可以说是 HTTP 缓存。 什么是浏览器缓存 MDN 上是这样解释浏览器缓存的： A browser cache holds all documents downloaded via.
浏览器缓存有哪些
LuckXinXin的博客
04-16 472
1）强缓存：强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器 2）协商缓存：当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），若未命中请求，则将资源返回客户端，并更新本地缓存数据（200） ...
探索Chrome缓存：浏览器缓存文件查看器指南
最新发布
weixin_42443533的博客
06-04 1082
Chrome浏览器缓存机制是为了优化网页加载速度而设计的一种存储技术。通过保存用户的浏览历史、下载的文件和网站数据等信息，当用户再次访问相同内容时，浏览器可以迅速加载这些预先存储的数据，从而减少页面加载时间并节省带宽资源。“Chrome缓存文件查看器”应运而生，旨在解决开发者和IT专业人员面临的缓存管理问题。在最初的开发阶段，主要目标是为用户提供一个直观、易于操作的界面，通过该界面可以查看、搜索以及管理Chrome浏览器中的缓存文件。
浏览器缓存(http缓存)
weixin_43502666的博客
01-13 666
浏览器缓存是指用户在访问web页面时,将一些静态资源(js,css,图片)缓存到本地硬盘(大:1T)或内存(8G,16G)中,当下次访问页面时,不用向服务端发送请求请求资源,直接从本地加载资源,可以提高用户体验 分类:强缓存和协商缓存 一、强缓存:是指用户第一次请求资源成功后,会将响应头字段中的cache-control和expires字段缓存到本地内存中,以便下次直接加载而不是重新向服务端发送请求; (1)expries表示资源的过期时间，即在该时间前，浏览器可以使用缓存的资源(需要注意expries有一
浏览器有哪几种缓存?各种缓存之间的优先级
weixin_43962020的博客
08-25 1209
如果服务器返回 304 Not Modified 响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。如果强制缓存未命中，但协商缓存可用，则会向服务器发送条件请求，询问资源是否更新。Service Worker 是一种特殊的 JS 脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。由于其可以完全控制网络请求，因此具有最高的优先级，即使是强制缓存也可以被它所覆盖。如果存在强制缓存，并且缓存没有过期，则直接使用缓存，不需要向服务器发送请求。
浏览器的本地缓存有哪些？有什么区别
m0_63542260的博客
06-18 506
HTTP缓存是针对网络请求的响应内容进行缓存，Web Storage和IndexedDB是用于存储网页中的数据，而Cookies主要用于在客户端和服务器之间传递状态信息。它们是HTML5提供的一种在客户端存储数据的机制，可以在浏览器关闭后依然保留数据。其中LocalStorage的数据在浏览器关闭后仍然存在，而SessionStorage的数据在会话结束后被清除。这是一个在浏览器中存储结构化数据的数据库，可以存储大量数据，并支持高效的检索。它提供了比Web Storage更强大的存储能力和查询能力。
浏览器缓存机制介绍与缓存策略剖析.pptx
05-27
浏览器缓存机制介绍与缓存策略剖析 浏览器缓存机制是指浏览器在请求资源时，对已经请求过的资源进行缓存，以便下次请求时可以直接从缓存中获取，从而提高页面加载速度和减少服务器的压力。本文将详细介绍浏览器缓存...
关于angularJs清除浏览器缓存的方法
01-19
浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像...
js清除浏览器缓存的几种方法
10-20
在Web开发过程中，浏览器缓存是提升页面加载速度和用户体验的一个重要机制，但有时候它也会导致网页显示不及时更新的问题。为此，了解如何使用JavaScript来清除或避免浏览器缓存变得至关重要。本文介绍了几种使用...
JavaWeb如何实现禁用浏览器缓存
08-25
在JavaWeb开发中，有时我们需要确保用户每次访问页面时都能获取到最新的内容，而不是从浏览器缓存中读取旧的数据。这是因为浏览器缓存虽然能够提高网页加载速度，但可能会导致用户看到过时的信息，特别是在进行迭代...
简述浏览器端的九大缓存
weixin_30561177的博客
08-01 547
前言 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为九种，这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式——Application右侧就有浏览器的8种缓存机制。 webStorage分类 一、客户端 　...
浏览器缓存时间
qq_37377136的博客
06-01 2147
官方地址：http://nginx.org/en/docs/http/ngx_http_headers_module.html 一、缓存时间 句法: expires [modified] time; expires epoch | max | off; 默认: expires off; 内容: http, server, location, if in location 如果响应代码等于200、201（1.3.10），204、206、301、302、303、304、307（1.1。），则启用或禁用添加或修
浏览器缓存小知识
温暖前端的博客
07-23 1048
浏览器缓存是指浏览器在本地磁盘对用户已访问过的网页资源进行存储,以便在用户再次访问同一网页时可以直接从本地加载,而不需要再次从服务器请求数据,从而提高页面加载速度,降低服务器压力和带宽消耗。浏览器缓存是提高网站性能的重要手段之一。合理利用缓存可以显著减少网络传输,加快页面加载速度,改善用户体验。同时也可以减轻服务器压力,降低网站带宽成本。
浏览器缓存机制
Eno_Lin的博客
03-31 554
此时浏览器会重新请求新的文件，但在新文件未过期之前，仍然会被缓存，提高了页面加载速度和降低了网络流量消耗。但实际情况下，由于浏览器、代理服务器等各种因素的影响，资源的缓存时间可能会比 max-age 短，也可能会比 max-age 长，因此你可能在十分钟左右就可以看到更新的资源了。为了提高页面加载速度和减少服务器负担，浏览器会对这些静态资源进行缓存，使得用户在下一次访问同一个网页时，可以直接从本地缓存中获取相应的资源文件，而不必再次向服务器发送请求获取资源，从而提高了页面加载速度和降低了网络流量消耗。
浏览器默认缓存时间-(为什么浏览器时而缓存，时而不缓存)
小结巴巴的博客
08-05 7191
1、浏览器默认缓存时间 　　firefox 的缓存时间时长 　　（访问时间 - 最后修改时间）÷ 10 　　例子： 　　假设 7点0分 访问的 5点0分修改的 index.html , 　　那么缓存时间为 　　2*60*60÷ 10 = 720 秒 　　页面缓存时间为 720 秒 2、设置页面禁止缓存 <meta http-equiv="Ca...
浏览器数据缓存方式详细对比分析
七公子77的技术博客
02-21 777
缓存方式存储大小生命周期作用域传输方式适用场景Cookie4KB可设置过期时间可跨域随请求发送会话管理、用户身份标识5MB永久存储同源不发送长期存储用户偏好、静态数据5MB会话有效同源不发送临时存储表单数据、页面间数据传递IndexedDB无限制永久存储同源不发送大量结构化数据、离线应用Cache API无限制手动控制同源不发送静态资源缓存、PWA无限制独立于页面同源不发送离线缓存、后台同步、消息推送。
Chrome或Firefox浏览器对静态资源文件的缓存时长是多久
qq_35640866的博客
12-26 1208
注意：加了这个标头后，浏览器在请求这个站点的js/css/图片资源时，每次都会重新发起HTTP连接请求，虽然请求的Header里会带上 If-Modified-Since，但是HTTP连接本身也是很耗资源的，所以要根据场景来选择性添加，问题解决很简单，在IIS的站点=》HTTP响应标头里，添加一个Header：Cache-Control，值为no-cache，1、在 2018年12月1号 12点0分1秒到 12点11分59秒，这12分钟内，浏览器不会发起http请求；
webStorage统称
weixin_51908141的博客
11-27 4678
浏览器的存储
如何解决浏览器缓存问题？
12-13
浏览器缓存是为了提高网页加载速度而存在的一种机制，但它有时会导致用户看到过时的内容。以下是几种常见的解决浏览器缓存问题的方法： 1. **强制刷新**： - 在大多数浏览器中，可以通过按下 `Ctrl + F5`（Windows）或 `Cmd + Shift + R`（Mac）来强制刷新页面并清除缓存。 2. **清除浏览器缓存**： - 手动清除浏览器缓存可以解决大多数缓存问题。不同浏览器的清除方法略有不同，但通常可以在设置或历史记录中找到清除缓存的选项。 3. **使用HTML元标签**： - 在HTML文件的<head>部分添加以下元标签，可以告诉浏览器不要缓存页面： ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> ``` 4. **配置服务器缓存头**： - 服务器可以通过设置HTTP头来控制缓存行为。例如，使用Apache服务器时，可以在.htaccess文件中添加以下代码： ``` <IfModule mod_headers.c> Header set Cache-Control "no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires "0" </IfModule> ``` 5. **版本控制**： - 在引用静态资源（如CSS、JavaScript文件）时，可以在文件名后添加版本号或哈希值。例如： ```html <link rel="stylesheet" href="styles.css?v=1.0.1"> <script src="script.js?v=1.0.1"></script> ``` 这样，每次文件更新时，浏览器会将其视为新的资源，从而加载最新的版本。 6. **使用Service Worker**： - Service Worker可以更精细地控制缓存行为。通过编写自定义的Service Worker脚本，可以实现更复杂的缓存策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值