虾皮一面|前端|2026.1.6下午17:00--18:00

虾皮一面详细面经

本次虾皮一面以“自我介绍+项目深挖+技术细节提问+现场编程+校招沟通”为主线,核心围绕简历中的核心项目、前端底层原理展开,整体难度偏实战,注重技术落地细节,以下是完整面经梳理:

一、面试开场

面试官先明确了本次面试的四大模块:自我介绍、项目细节提问、基础技术点考察、双向问答。我完成自我介绍后,面试官立刻聚焦简历中的第一个核心项目(笔记项目)展开深度追问。

二、核心项目1:笔记项目(重点追问模块)

1. 语义检索与离线缓存

  • 向量检索相关:面试官重点问语义检索的实现逻辑,核心追问“向量如何实现语义匹配”,以及余弦距离、欧氏距离的概念(我对这两个距离概念仅能简单作答,细节掌握不足);
  • 缓存存储介质:简历中写了使用indexDB做离线缓存,但面试官提及测试时看到缓存实际存在localStorage,我如实说明实际落地是localStorage,面试官指出简历表述与实际不符的问题;
  • 离线缓存边界:追问“离线文本大于5MB时的处理方案”,我因忘记具体处理逻辑,未能清晰作答;
  • 协同冲突处理:询问“网络恢复后,离线数据同步到后端的冲突解决方式”,我表示未做过相关处理;面试官补充这是“协同模式下的冲突”,并提及CRDT算法,要求我讲解该算法的实现逻辑(举例“两个文档内容合并后保证一致性”),我的回答未达到面试官预期。

2. 缓存策略与缓存问题

  • 三级缓存策略:面试官让我简述项目中的三级缓存策略,我说明实际落地的是“前端两级(10秒、30秒)+ 后端一级(300秒)”的架构;追问“笔记更新后,缓存是等待过期还是主动处理”,我回答“会主动删除旧缓存,请求数据库更新数据”;
  • 缓存击穿:提问“高并发场景下的缓存击穿问题(第一个请求查库,其余请求排队,第一个请求拿到数据写入redis后,其他请求从redis取数)”,我按自己的理解完成作答。

3. 协同架构与WebSocket

  • 架构重构:面试官提及简历中的“重构协同架构”,但我当时未梳理清重构逻辑,无法详细作答;
  • WebSocket协同:

三、核心项目2:vue3pdf阅读器项目

面试官围绕该项目的核心技术点提问,部分问题因表述问题未完全听懂,核心提问方向:

  • 虚拟滚动算法的实现逻辑;
  • 内存泄露问题的解决方法;
  • 高清适配的实现方式;
  • Web Worker处理大文件:询问“几百兆PDF传入Web Worker时,超出处理范围的解决方案”,我因未听懂问题仅被动回应,面试官见我未理解便跳过该问题。

四、现场编程(事件循环/宏微任务)

面试官询问完项目后,切入实习相关话题,随即现场出了一道宏任务/微任务(事件循环) 的代码题(属于技术校验类题目)。我完成代码作答后,面试官指出我的答案“偏底层细节,未抓核心逻辑”,并建议我后续补充事件循环模块的知识。

五、校招相关沟通与面试收尾

  1. 业务方向:面试官询问我校招期望的业务方向,提及初期会做平台类任务、开发端相关工作,可能涉及hotnote,核心技术栈为React;
  2. 后续流程:告知接下来可能会有广告投放相关的技术面,最后是HR面,本次技术面至此结束。

六、面试复盘

  1. 薄弱点:对CRDT算法、事件循环核心逻辑、Web Worker处理大文件等底层原理掌握不深,部分项目细节(如离线缓存边界处理)记忆模糊;
  2. 注意点:简历中的技术点需与实际落地一致(如indexDB/localStorage),避免表述偏差;
  3. 建议:后续需重点补充事件循环、协同冲突处理、大文件处理等知识点,梳理项目中的技术细节,形成完整的落地逻辑。
#虾皮##发面经攒人品##卷__卷不过你们,只能卷__了#
全部评论
可以看看我发的,有协同的demo
1 回复 分享
发布于 01-09 14:50 广东
我的天,这么详细!大佬
点赞 回复 分享
发布于 01-08 18:34 广东

相关推荐

查看15道真题和解析
点赞 评论 收藏
分享
一面(1.8 21.00 48min)项目相关1. 实习经历主要做什么事情?2. Web上主要做什么?管理后台还是员工用的?3. 你在里面主要负责什么事情?4. 配置项大概包含什么内容?5. 子集和孙集的策略是怎么划分的?6. 配置驱动渲染是指什么意思?什么配置来驱动渲染的?7. 为什么有的配置项会展示,有的不会展示?8. 你怎么判断哪个组件需要做什么事情?9. (追问)如果要在某个特定组件上加一次请求,怎么处理?10. 你觉得这里面比较难的地方在哪里?React状态管理1. 用到React的什么库?2. Redux、Zustand、MobX这三个有什么区别?3. (追问)为什么说Zustand是单例?什么东西是单例?4. MobX的响应式绑定一般用什么东西来做?5. Object.defineProperty和Proxy的差别是什么?React原理1. 讲一下你对React的理解?2. React是怎么做异步可中断渲染的?3. 可中断是在哪里中断?4. 可中断的任务是怎么去执行的?5. 5毫秒任务是在什么时候开始执行的?6. 为什么是5毫秒?7. (关键问题)React怎么保证在每帧渲染之前去执行这个任务?手写题1. 手写useRequest - 包含多个追问:○ manual写在哪里?○ run函数每次渲染都生成一次,怎么让它稳定?○ fn变了但run保持稳定,同时能获取最新的fn,怎么处理?○ useRef初始化的问题○ run函数要返回Promise吗?反问因为时间太晚, 希望面试官早点回家,就说了一下这次面试我学到了很多, 也很开心。                                              20分钟约2面二面(1.9 5.00 23min)基础/学习类:前端学了多久?自学的吗?学习渠道是什么?平时AI了解多吗?什么场景用AI?项目类:SDK监控是什么?技术栈是什么?项目是自学项目还是实际业务?聊一个实际工作中的项目技术原理类: React Fiber架构了解吗?展开讲讲手写代码:  Promise.all其他: 实习时间安排反问: 业务是啥20分钟oc总结:效率特别高
发面经攒人品
点赞 评论 收藏
分享
评论
3
8
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务