前言
大家好，我是木斯佳。
相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。
这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址
温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。
面经原文内容
📍面试公司：京东零售JDY
🕐面试时间：4月14日早上10:30，时长25分钟
💻面试岗位：前端一面
📝面试体验：面试官很友善，跟美团一样舒服，无手撕，一半八股一半项目
❓面试问题：
- 两个项目中哪个难度更高，为什么
- 虚拟消息列表解决什么问题
- 前缀高度表 + 二分查找在虚拟列表中解决什么问题
- 上下文摘要压缩机制的实现思路
- 本地持久化机制如何实现，用什么结构存储
- 存储溢出如何处理，有无删除逻辑
- 流式响应与非流式响应的区别
- 流式返回慢时界面如何优化
- 大模型返回中断如何处理（断点续传/重连）
- Vue3 和 Vue2 有什么区别
- 大文件分片上传怎么实现
- 秒传、断点续传的实现原理
- 了解哪些设计模式
- 观察者模式的优点是什么
- 了解哪些排序算法
- 归并排序的时间、空间复杂度是多少
- 是否了解 Transformer 原理
- 解释 MCP 和 Skill 的原理
来源：牛客网 前端死了咩
💡木木有话说（刷前先看）
京东零售这场一面，是一份“质量比较高”的面经。中规中矩，结合了传统前端高频八股与新AI生产力内容。设计模式我最近半个月都看到比较少问，其实设计模式相关的东西也是非常值得同学们专门去刷刷的，对一些代码的理解会有帮助。
总体来讲，这份面经非常适合用来检验AI应用开发+工程化的能力——既有深度，又有广度。
📝 京东零售JDY前端一面·深度解析
🎯面试整体画像
| 维度 | 特征 |
|---|---|
| 面试风格 | 友善引导型 + 工程实战型 + AI应用型 |
| 难度评级 | ⭐⭐⭐⭐（四星，虚拟列表优化、上下文压缩、MCP等较深） |
| 考察重心 | 虚拟列表高级优化、上下文管理、本地持久化、流式响应、AI工程化概念 |
| 特殊之处 | 无手撕，但问到了MCP和Skill等较新的AI工程化概念 |
🔍逐题深度解析
三、虚拟消息列表解决什么问题
回答思路：虚拟列表解决长列表渲染的性能问题。
具体问题：
- DOM节点过多：消息量大时（如上千条），浏览器渲染大量DOM节点，内存占用高
- 滚动卡顿：每次滚动都涉及大量DOM的重排重绘
- 首屏加载慢：一次性渲染所有消息导致白屏时间长
解决方案：只渲染可视区域内的消息，动态替换，保持DOM节点数恒定。
四、前缀高度表 + 二分查找在虚拟列表中解决什么问题
回答思路：这是虚拟列表的进阶优化，用于处理可变高度的列表项。
问题：消息高度不一致（文本长短不同、带图片等），无法用固定高度预估位置。
前缀高度表：
- 存储每条消息的累积高度，如
[h1, h1+h2, h1+h2+h3, ...] - 通过二分查找快速定位滚动位置对应的消息索引
二分查找的作用：
- 给定滚动距离
scrollTop，在前缀高度表中二分查找第一个大于scrollTop的位置 - 时间复杂度从O(n)降为O(log n)，滚动时实时计算不卡顿
// 前缀高度表constprefixHeights=[100,250,450,700,1000]// 滚动到300px，二分查找找到索引2（450>300），起始索引为2五、上下文摘要压缩机制的实现思路
回答思路：AI对话中历史消息过长时，用摘要压缩替代原始消息。
实现步骤：
- 触发条件：消息token数超过阈值（如4000 tokens）
- 选择压缩内容：保留系统消息+最近N条，压缩中间消息
- 调用LLM生成摘要：将中间消息发送给模型，生成简短摘要
- 替换上下文：用摘要替代原始消息，继续对话
asyncfunctioncompressContext(messages,maxTokens=4000){lettokens=estimateTokens(messages)if(tokens<=maxTokens)returnmessagesconstsystem=messages.find(m=>m.role==='system')constrecent=messages.slice(-6)// 保留最近6条consttoCompress=messages.slice(1,-6)constsummary=awaitgenerateSummary(toCompress)return[system,{role:'system',content:`历史摘要：${summary}`},...recent]}六、本地持久化机制及存储结构
回答思路：前端本地存储对话历史、用户设置等。
实现方式：
- IndexedDB：存储大量结构化数据（消息列表），支持索引、事务
- localStorage：存储轻量配置（用户设置、会话ID）
存储结构：
// IndexedDB 结构constdbSchema={conversations:{keyPath:'id',indexes:['updatedAt','title']},messages:{keyPath:'id',indexes:['conversationId','timestamp']}}// 示例数据{id:'conv_123',title:'React讨论',updatedAt:Date.now(),messages:[...]// 或单独存储}七、存储溢出如何处理（删除逻辑）
回答思路：实现LRU（最近最少使用）淘汰策略。
实现：
- 记录每条会话的最后访问时间
- 存储总大小超过阈值时，删除最久未访问的会话
- 可设置最大会话数（如50条）或最大存储容量（如50MB）
classConversationStorage{constructor(maxItems=50){this.maxItems=maxItems}save(conversation){constitems=this.getAll()if(items.length>=this.maxItems){// 删除最久未使用的constoldest=items.sort((a,b)=>a.lastAccessed-b.lastAccessed)[0]this.delete(oldest.id)}this.store(conversation)}}八、流式响应与非流式响应的区别
| 维度 | 非流式响应 | 流式响应 |
|---|---|---|
| 数据返回 | 一次性返回完整数据 | 分块逐步返回 |
| 用户感知 | 等待时间长，空白期 | 逐字显示，无空白 |
| 实现方式 | 普通HTTP请求 | SSE、WebSocket、Fetch + ReadableStream |
| 适用场景 | 短文本、API接口 | AI对话、大文件、实时日志 |
九、流式返回慢时界面如何优化
回答思路：从用户体验和性能两个维度优化。
优化策略：
- 骨架屏/占位符：先展示消息容器，再逐字填充
- 打字机效果：控制显示速度，避免闪现太快
- 优先渲染首屏：先展示已收到的内容，不等全部
- 加载提示：显示“正在输入中…”动画
- 预加载：提前建立连接，减少首字延迟
// 打字机效果asyncfunctiontypewriter(text,element,speed=30){for(leti=0;i<text.length;i++){element.textContent+=text[i]awaitnewPromise(r=>setTimeout(r,speed))}}十、大模型返回中断如何处理（断点续传/重连）
回答思路：结合SSE的断线恢复机制。
方案：
- 自动重连：SSE原生支持，监听
onerror触发重连 - 断点续传：携带
Last-Event-ID，服务端从断点继续推送 - 消息缓存：前端缓存已收到的内容，重连后追加
- 超时重试：设置超时时间，超时后主动重连
functionconnectWithResume(){letlastId=localStorage.getItem('last_event_id')consturl=lastId?`/events?lastId=${lastId}`:'/events'constsource=newEventSource(url)source.onmessage=(e)=>{constdata=JSON.parse(e.data)localStorage.setItem('last_event_id',data.id)appendMessage(data.content)}}十一、Vue3和Vue2的区别
| 维度 | Vue2 | Vue3 |
|---|---|---|
| 响应式 | Object.defineProperty | Proxy |
| API风格 | Options API | Composition API（推荐） |
| TypeScript | 支持较弱 | 原生支持 |
| 体积 | 较大 | 更小（tree-shaking） |
| 性能 | 初始化递归遍历 | 懒递归，性能更好 |
| 新特性 | - | Teleport、Suspense、Fragment |
十二、大文件分片上传实现
回答思路：参考之前面经的断点续传。
核心：Blob.slice分片 + 并发上传 + 合并通知。
十三、秒传、断点续传的实现原理
秒传：
- 上传前计算文件哈希（如MD5）
- 服务端检查哈希是否存在，存在则直接返回成功，无需上传
断点续传：
- 服务端记录已上传的分片
- 前端跳过已上传分片，只传缺失部分
十四、了解哪些设计模式
常见设计模式：
- 单例模式：全局状态管理（Vuex/Pinia）
- 观察者模式：响应式系统、事件总线
- 工厂模式：创建不同类型的组件
- 策略模式：表单校验规则
- 装饰器模式：高阶组件（HOC）
- 发布-订阅模式：跨组件通信
十五、观察者模式的优点
优点：
- 解耦：目标和观察者之间松耦合，彼此不需要知道对方细节
- 动态关系：运行时可以添加/删除观察者
- 广播通信：一个目标变化，可以通知多个观察者
- 符合开闭原则：增加新观察者无需修改目标代码
Vue中的应用：响应式系统中，数据（目标）变化时，自动通知依赖它的组件（观察者）更新。
十六、了解哪些排序算法
常见排序：
- 冒泡排序、选择排序、插入排序（O(n²)）
- 归并排序、快速排序、堆排序（O(n log n)）
- 计数排序、桶排序、基数排序（非比较排序）
十七、归并排序的时间、空间复杂度
- 时间复杂度：O(n log n)（最好、最坏、平均都是）
- 空间复杂度：O(n)（需要额外数组存储临时数据）
十九、是否了解Transformer原理
回答思路：Transformer是LLM的核心架构（如GPT、BERT）。
核心组件：
- 自注意力（Self-Attention）：计算序列中每个词与其他词的相关性
- 多头注意力（Multi-Head Attention）：多个注意力头并行，捕捉不同维度的关系
- 前馈网络（Feed-Forward）：对注意力输出做非线性变换
- 位置编码（Positional Encoding）：注入位置信息
- 残差连接 + 层归一化：稳定训练
Transformer = Encoder（编码器）+ Decoder（解码器） Encoder：输入 → 多头注意力 → 前馈网络 → 输出 Decoder：输出 → 掩码多头注意力 → 编码器-解码器注意力 → 前馈网络 → 输出二十、解释MCP和Skill的原理
回答思路：这是AI工程化的新概念。
MCP（Model Context Protocol）：Anthropic提出的模型上下文协议，用于标准化AI Agent与外部工具/数据的交互方式。
核心：
- 定义工具（Tools）、资源（Resources）、提示（Prompts）的统一接口
- AI可以动态发现和调用工具，无需硬编码
Skill（如Cursor的Skill、Copilot的Skill）：
- 预定义的能力单元，封装特定任务的Prompt + 工具调用
- 例如：代码审查Skill、生成单元测试Skill、解释代码Skill
原理：
- 开发者定义Skill（名称、描述、指令、可调用的工具）
- AI根据用户意图自动选择合适的Skill
- 执行Skill的指令，调用相关工具，返回结果
示例：
# test-generator.skillname:生成单元测试description:为指定函数生成单元测试用例instructions:|分析用户提供的代码，生成完整的Jest单元测试tools:-read_file-search_code📚知识点速查表
| 知识点 | 核心要点 |
|---|---|
| 虚拟列表 | 解决长列表性能，固定/可变高度，前缀高度表+二分查找 |
| 上下文压缩 | 历史消息超长时生成摘要，保留系统消息+最近N条 |
| 本地持久化 | IndexedDB（大量数据）+ localStorage（轻量配置），LRU淘汰 |
| 流式响应 | 分块返回，打字机效果，预加载，骨架屏 |
| 断点续传 | Last-Event-ID，重连后继续推送 |
| Vue3 vs Vue2 | Proxy、Composition API、TS支持、体积更小 |
| 分片上传 | Blob.slice、并发上传、秒传（哈希）、断点续传 |
| 观察者模式 | 松耦合、广播通知、动态添加观察者 |
| 归并排序 | O(n log n)时间，O(n)空间 |
| Transformer | 自注意力、多头注意力、位置编码 |
| MCP/Skill | 模型上下文协议、预定义能力单元、动态工具调用 |
📌 最后一句：
京东零售这场一面，是一场“工程化+AI应用”的优质面试。从虚拟列表的二分查找优化，到上下文摘要压缩、本地持久化LRU淘汰，再到MCP和Skill这些AI工程化前沿概念，面试官既考基础深度，又问技术广度。用户反馈“跟美团一样舒服”，说明面试官是懂业务、懂技术、也懂沟通的人。这样的面试，即使没过，也能让人学到东西。
