前言大家好我是木斯佳。相信很多人都感受到了在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, h1h2, h1h2h3, ...]通过二分查找快速定位滚动位置对应的消息索引二分查找的作用给定滚动距离scrollTop在前缀高度表中二分查找第一个大于scrollTop的位置时间复杂度从O(n)降为O(log n)滚动时实时计算不卡顿// 前缀高度表constprefixHeights[100,250,450,700,1000]// 滚动到300px二分查找找到索引2450300起始索引为2五、上下文摘要压缩机制的实现思路回答思路AI对话中历史消息过长时用摘要压缩替代原始消息。实现步骤触发条件消息token数超过阈值如4000 tokens选择压缩内容保留系统消息最近N条压缩中间消息调用LLM生成摘要将中间消息发送给模型生成简短摘要替换上下文用摘要替代原始消息继续对话asyncfunctioncompressContext(messages,maxTokens4000){lettokensestimateTokens(messages)if(tokensmaxTokens)returnmessagesconstsystemmessages.find(mm.rolesystem)constrecentmessages.slice(-6)// 保留最近6条consttoCompressmessages.slice(1,-6)constsummaryawaitgenerateSummary(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条或最大存储容量如50MBclassConversationStorage{constructor(maxItems50){this.maxItemsmaxItems}save(conversation){constitemsthis.getAll()if(items.lengththis.maxItems){// 删除最久未使用的constoldestitems.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,speed30){for(leti0;itext.length;i){element.textContenttext[i]awaitnewPromise(rsetTimeout(r,speed))}}十、大模型返回中断如何处理断点续传/重连回答思路结合SSE的断线恢复机制。方案自动重连SSE原生支持监听onerror触发重连断点续传携带Last-Event-ID服务端从断点继续推送消息缓存前端缓存已收到的内容重连后追加超时重试设置超时时间超时后主动重连functionconnectWithResume(){letlastIdlocalStorage.getItem(last_event_id)consturllastId?/events?lastId${lastId}:/eventsconstsourcenewEventSource(url)source.onmessage(e){constdataJSON.parse(e.data)localStorage.setItem(last_event_id,data.id)appendMessage(data.content)}}十一、Vue3和Vue2的区别维度Vue2Vue3响应式Object.definePropertyProxyAPI风格Options APIComposition 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工程化的新概念。MCPModel Context ProtocolAnthropic提出的模型上下文协议用于标准化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 Vue2Proxy、Composition API、TS支持、体积更小分片上传Blob.slice、并发上传、秒传哈希、断点续传观察者模式松耦合、广播通知、动态添加观察者归并排序O(n log n)时间O(n)空间Transformer自注意力、多头注意力、位置编码MCP/Skill模型上下文协议、预定义能力单元、动态工具调用 最后一句京东零售这场一面是一场“工程化AI应用”的优质面试。从虚拟列表的二分查找优化到上下文摘要压缩、本地持久化LRU淘汰再到MCP和Skill这些AI工程化前沿概念面试官既考基础深度又问技术广度。用户反馈“跟美团一样舒服”说明面试官是懂业务、懂技术、也懂沟通的人。这样的面试即使没过也能让人学到东西。