面试题——什么是浏览器缓存

本文详细介绍了浏览器缓存的工作原理,包括强缓存和协商缓存。强缓存避免了服务器交互,直接使用本地资源;协商缓存通过与服务器沟通确认资源是否更新。缓存机制涉及HTTP头如expires、cache-control、last-modified和etag,有效减少请求次数,提升性能和用户体验。

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

1、浏览器缓存是设置在ajax请求头的;

2、浏览器缓存大部分都是后端开发设置的,前端开发设置的不多;前端面试总是讲这个问题,是考验一下前端开发对浏览器原理的理解

3、浏览器缓存分为两个;强缓存和协商缓存

4、强缓存和协商缓存不是对立的;强缓存发生在浏览器端不会请求服务器;强缓存失效请求服务器,服务器进行协商缓存的判断

5、强缓存主要考验面试者对浏览器原理的理解;

6、强缓存分为内存缓存和硬盘缓存(内存访问速度快,但是关闭 页面浏览器就会清楚内存;硬盘缓存是缓存再硬盘里;浏览器关闭页面了重新打开照样可以获取;浏览器不会清楚硬盘内容)

7、强缓存内存缓存一般是img、js等信息,js等会经常变化的信息;硬盘缓存主要缓存css这种不经常变化的信息

8、强缓存http1.1之后有设置有效期,有效期内先查内存,再查硬盘获取信息;不请求后端服务

9、清缓存有效期过期了,请求后端服务,后端服务开始根据请求头判断协商缓存的操作

10、协商缓存是后端存储的,查询后端存储直接返回,不去重新查询数据库等;

11、协商缓存还是要判断数据是否更新的,没有更新就直接换回缓存内容,更新数据了者重新查询数据库请求

原文地址:面试题什么是浏览器缓存_码农有梦想的博客-优快云博客_浏览器缓存面试题

一.是什么:

        缓存的概念:

        浏览器会将请求后的资源进行存贮为离线资源,当下次需要该资源时,浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。

        强缓存:

        只要没到有效期,就继续使用本地离线资源,不向服务器发请求

        协商缓存:

        本质是用本地缓存的资源和服务器资源相比对,看看是否一致或者说是有更新,如果未更新,继续使用离线资源;如果已更新则重新发请求

        缓存机制流程图

 

二:流程图解读:

        1.进入浏览器时,先判断是否有缓存,初次进入时没有缓存,就会向服务器发请求拿资源,返回缓存字段、标识(为方便记忆简称为ecle)expires、cache-control、last-modefied、etag,并将资源注入缓存,加载页面。

        2.第二次进入浏览器,判断是否有缓存, 如果有缓存,根据expires或者cache-control判断缓存是否过期,如果缓存未过期,走强缓存,使用本地离线资源加载页面。

 

        expires:是HTTP/1.0版本的响应头,是绝对时间(到具体某个时间就过期),以电脑本地时间为基准,如果修改本地时间将会影响expires到期时间

        cache-control:是HTTP1.1版本响应头,是相对时间(缓存还有***秒失效),优先级高于expires

         3. 如果有缓存,经expires或者cache-control判断缓存过期了,那么就会走协商缓存,会向浏览器发请求并携带请求头 if-none-match(值为etag)和if-modified-since(值为last-modified),浏览器会开始比对看本地离线资源和服务器上的资源是否一致,服务器上的是否是更新的版本,如果没有更新,协商缓存失效,返回状态码304,继续使用本地离线资源,不会发起请求;如果已经更新,协商缓存生效,返回状态码200,那重新发起请拿资源,和缓存标识(ecle),并将资源注入缓存。

三:强缓存和协商缓存区别

        强缓存:不会和服务器交互,不会发起请求

        协商缓存:会和服务器交互,来判断资源有没有变化

四:缓存的好处

        1.减少请求次数,缓解服务器压力

        2.提升性能,增强用户体验,使用本地资源肯定会比请求服务器更快

        3.减少带宽消耗,当我们使用缓存时,只会产生很小的网络消耗。

原文地址:22年前端常问面试题_1浏览器缓存机制_前端小蜜疯的博客-优快云博客_前端缓存机制 面试题

(如有侵权,请联系我删除)

### 关于前端缓存机制的高端面试题 #### 1. Service Worker 的工作原理及其应用场景 Service Worker 是一种运行在主线程之外的 JavaScript 工作线程,尽管它无法直接操作 DOM,但它能够实现离线缓存、消息推送以及网络代理等功能[^1]。通过配置 Service Worker,开发者可以灵活控制哪些文件需要被缓存、如何匹配这些缓存以及如何读取它们。当请求未命中缓存时,Service Worker 将自动调用 `fetch` API 获取数据。 ```javascript self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); }); ``` #### 2. `<keep-alive>` 标签的作用及其实现细节 `<keep-alive>` 是 Vue.js 提供的一个内置组件,主要用于创建一个缓存空间以保存组件的状态或避免重复渲染[^2]。它的典型应用包括列表页和购物车之间的切换场景,在这种情况下,用户无需每次点击都重新加载整个页面内容,从而显著提升用户体验。 ```vue <template> <div> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> export default { data() { return { currentComponent: 'ListPage' }; } }; </script> ``` #### 3. JSONP 跨域通信的工作流程及其局限性 JSONP(JSON with Padding)是一种利用 `<script>` 标签跨域加载资源的技术[^3]。其核心思想是在目标服务器返回一段可执行的 JavaScript 代码,并将其作为回调函数的一部分传回客户端。然而需要注意的是,这种方式仅支持 GET 请求,因此对于安全性较高的接口并不适用。 ```html <script> function handleResponse(data) { console.log(data); // 处理接收到的数据 } </script> <script src="https://example.com/api?callback=handleResponse"></script> ``` #### 4. HTTP 缓存策略详解 HTTP 协议提供了多种缓存机制来减少不必要的网络传输开销。主要包括强缓存(Strong Caching)、协商缓存(Negotiated Caching)两种形式: - **强缓存**:依赖响应头字段如 `Cache-Control` 或者 `Expires` 来决定是否可以直接使用本地副本而无需再次验证; - **协商缓存**:即使设置了过期时间,仍可通过发送特定条件头部信息(例如 ETag/Last-Modified),让服务端确认当前版本的有效性后再决定是否更新。 #### 5. 浏览器内存缓存与磁盘缓存的区别 浏览器内部维护着两层不同类型的存储结构——Memory Cache 和 Disk Cache。前者通常驻留在 RAM 上,具有极高的访问效率但生命周期较短;后者则持久化到硬盘设备里,适合长期保留静态资产却可能带来稍慢的速度表现[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值