浏览器缓存汇总

最新推荐文章于 2026-05-06 08:45:17 发布

原创最新推荐文章于 2026-05-06 08:45:17 发布 · 479 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#缓存

收录于

前端面经专栏收录该内容

4 篇文章

订阅专栏

本文详细探讨了浏览器缓存的机制，包括ServiceWorker、MemoryCache、DiskCache等位置，区分Expires与Cache-Control的强缓存，以及Last-Modified与Etag的协商缓存。涵盖了用户行为和常见策略，适合前端开发者深入理解HTTP缓存技术。

浏览器缓存

1. 缓存机制
2. 缓存方式
3. 缓存过程
- 3.1. Expires与Cache-Control的区别（强缓存）
- 3.2. Last-Modified与Etag的区别（协商缓存）
4. 用户行为
5. 常见策略

对浏览器缓存做一个整理，欢迎大家指正补充~
可参考前端基础-浏览器缓存/HTTP缓存机制(面试常考)

1. 缓存机制

在这里插入图片描述

2. 缓存方式

在这里插入图片描述
（1）该连接详细讲述四种缓存位置：
缓存存在那些位置？缓存位置可分Service Worker、Memory Cache、Disk Cache、Push Cache四种

1. Service Worker
   01：使用Service Worker传输协议必须是https
   02：注册Service Worker--->监听到install事件后可以缓存需要的文件--->再次访问时可以通过拦截请求的方式查			  询是否存在缓存，若存在则可以直接读取缓存文件，否则就去请求数据。	
2. Memory Cache
4. Disk Cache
5. Push Cache

3. 缓存过程

在这里插入图片描述

1.缓存方式中的每个方式都对应着缓存过程中的强缓存与协商缓存

3.1. Expires与Cache-Control的区别（强缓存）

3.2. Last-Modified与Etag的区别（协商缓存）

4. 用户行为

在这里插入图片描述

5. 常见策略

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mo小白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

邮件协议之IMAP指令讲解

qq_37638009的博客

11-25

1424

蓝色标志代表该指令涉及邮件内容数据的，其参数是可变的还需要进一步讲解的指令名功能说明 CAPABILITY 请求服务器支持的功能列表无参数 NOOP 更新服务器的一些状态无参数 LO...

参与评论您还未登录，请先登录后发表或查看评论

浏览器缓存机制（详）

qq_40147756的博客

12-21

2450

详细介绍浏览器的缓存机制

实战避坑：手把手教你用`suspendCancellableCoroutine`改造Android网络回调（附完整代码）

最新发布

weixin_30652491的博客

05-06

649

本文详细介绍了如何使用Kotlin协程中的`suspendCancellableCoroutine`将Android网络回调改造为更简洁、易维护的协程风格代码。通过实战示例和避坑指南，帮助开发者掌握挂起函数的关键应用，提升异步网络请求的处理效率，避免常见的内存泄漏和取消问题。

缓存存在那些位置？缓存位置可分Service Worker、Memory Cache、Disk Cache、Push Cache四种

m0_37217612的博客

08-11

4568

从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。 Service Worker Memory Cache Disk Cache Push Cache Service Worker Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协

浏览器有哪几种缓存，各种缓存的优先级是什么样的？

小草莓的博客

07-13

3355

如果服务器返回 304 Not Modified 响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。如果强制缓存未命中，但协商缓存可用，则会向服务器发送条件请求，询问资源是否更新。Service Worker 是一种特殊的 JS 脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。由于其可以完全控制网络请求，因此具有最高的优先级，即使是强制缓存也可以被它所覆盖。如果存在强制缓存，并且缓存没有过期，则直接使用缓存，不需要向服务器发送请求。④ Web Storage 缓存。

前端学习：浏览器缓存方式有哪些（cookie、localstorage、sessionstorage）

XSL_HR的博客

12-09

2049

浏览器缓存的问题在后台项目中会经常出现，本期文章会总体介绍浏览器缓存的几种方式。

浏览器缓存知识汇总

qq_43491453的博客

03-30

315

前言关于浏览器缓存，是前端攻城狮必备的知识，面试时出现的频率也是很高，今天我来带大家总结一下关于浏览器缓存的那些事，也当作对自己汲取知识的质量的一次评估，表达能力的一次提升。如有不足，请尽快指出，有人帮助挑出错误才是最幸福的，在错误中成长、完善自己。缓存缓存是指可以进行高速数据交换的存储器，它先于内存与CPU交换数据，因此速率很快。这是百度百科对缓存的解释。我认为，所谓浏览器缓存也可以借用...

各浏览器清空缓存汇总

fsh430623的专栏

04-20

238

清除方法： ☆ I E：IE各版本清除操作大同小异，请参考操作： 1、点击工具菜单。如果您没找到该菜单，请按键盘上的 Alt 键来显示菜单。 2、选择删除浏览的历史记录。 3、选中 Internet 临时文件复选框。 4、点击删除按钮。5、将文件删除后，点击确定。 ☆火狐浏览器Firefox要清空 Mozilla Firefox 的缓存，请按以下步骤操作： 1、单击浏览器顶部...

清除浏览器缓存的方法汇总

qzw_wmh的博客

12-17

1660

一：清除浏览器缓存的方法 1、用随机数 URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了 eg: <script> document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr&quo

360浏览器怎么清除缓存_操作系统和 Web 浏览器清除和刷新 DNS 缓存方法汇总

weixin_39517520的博客

11-14

1601

DNS 缓存是一个临时数据库，用于存储有关「以前」的 DNS 查询信息。换句话说，无论何时访问网站，您的 Windows、Linux 或 mac OS 操作系统和 Chrome、Firefox 等Web 浏览器都会记录域名和其相对应的 IP 地址。这样就消除了对远程 DNS 服务的重复查询需要，以允许操作系统和网页浏览器能够通过 DNS 缓存快速解析网站的 URL。但是，在某些情况下，例如：要对网...

JS知识点汇总(四)--闭包&浏览器缓存

qq_42445025的博客

06-30

307

若不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，闭包会携带包含其它的函数作用域，因此会比其他函数占用更多的内存。一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的。foo()函数的执行结果返回给bar，而此时变量a仍在使用，还没被销毁，然后执行bar()函数。这个说法来源于MDN-闭包。还有种说法：闭包是指有权访问另外一个函数作用域中的变量的函数。

Vue进阶（幺捌柒）浏览器缓存问题解决_vue 浏览器缓存

2401_86358943的博客

09-11

1401

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

强缓存和协商缓存

miin_ying的博客

11-02

238

视频：2022经典前端面试题：浏览器缓存、http缓存、强制缓存、协商缓存_哔哩哔哩_bilibili文件:【建议收藏】45000+字前端面试题及答案汇总，前端八股文 - 知乎 (zhihu.com)

Vue进阶（幺捌柒）浏览器缓存问题解决

IT全栈华强工作室

08-24

8117

vue 项目打包部署上线之后，每一次都会有浏览器缓存问题，导致系统用户访问上个迭代批次的旧资源（css/js资源），若当前迭代批次项目包中不存在旧资源，系统就是出现404错误信息，需要系统用户手动清除缓存才能解决以上问题，导致用户体验非常不好。浏览器缓存（Browser Caching）机制是为了节约网络资源提升页面渲染性能，浏览器在用户磁盘上会对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，进而提升页面性能。

浏览器缓存问题

前端

12-22

1386

其实这不是客户端的事情，而是服务器的事情，服务器可以设置缓存机制，这个功能是为了提高网站的访问速度，当客户端发出 GET 请求的时候，服务器(网页服务器，或者数据交互的服务器)会从缓存中调用你要访问的内容，这个时候服务器就可以判断这个页面是不是更新过了，如果未更新过那么他会给你返回一个 304 状态码。例如，微服务中项目加载的微服务，在微服务更新后，点击菜单从新打开页面的时候，总是出现页面未更新的情况，此时需要保证index.html文件不缓存，或者是协商缓存（发生变更就要去服务器重新获取）

「2021」高频前端面试题汇总之浏览器原理篇

公众号：前端充电宝

01-15

4214

目录一、浏览器安全1. 什么是XSS ？（1）概念（2）攻击类型2. 如何防御XSS？3. 什么是CSRF ？（1）概念（2）攻击类型4. 如何防御CSRF二、进程与线程1. 进程与线程的概念2. 进程和线程的区别3. 浏览器渲染进程的线程4. 进程之前的通信方式5. 僵尸进程和孤儿进程是什么？6. 死锁产生的原因？如果解决死锁的问题？三、浏览器缓存1. 说一说浏览器的缓存机制2. 协商缓存和强缓存的区别（1）强缓存（2）协商缓存3. 为什么需要浏览器缓存？4. 用户点击刷新按钮或者按 F5、按 Ctr

浏览器缓存汇总

浏览器缓存

1. 缓存机制

2. 缓存方式

3. 缓存过程

3.1. Expires与Cache-Control的区别（强缓存）

3.2. Last-Modified与Etag的区别 （协商缓存）

4. 用户行为

5. 常见策略

3.2. Last-Modified与Etag的区别（协商缓存）