前端八股文面经大全：京东零售JDY前端一面（2026-04-14）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在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)，滚动时实时计算不卡顿

javascript 复制代码

// 前缀高度表
const prefixHeights = [100, 250, 450, 700, 1000]
// 滚动到300px，二分查找找到索引2（450>300），起始索引为2

五、上下文摘要压缩机制的实现思路

回答思路：AI对话中历史消息过长时，用摘要压缩替代原始消息。

实现步骤：

触发条件：消息token数超过阈值（如4000 tokens）
选择压缩内容：保留系统消息+最近N条，压缩中间消息
调用LLM生成摘要：将中间消息发送给模型，生成简短摘要
替换上下文：用摘要替代原始消息，继续对话

javascript 复制代码

async function compressContext(messages, maxTokens = 4000) {
  let tokens = estimateTokens(messages)
  if (tokens <= maxTokens) return messages
  
  const system = messages.find(m => m.role === 'system')
  const recent = messages.slice(-6)  // 保留最近6条
  const toCompress = messages.slice(1, -6)
  
  const summary = await generateSummary(toCompress)
  return [system, { role: 'system', content: `历史摘要：${summary}` }, ...recent]
}

六、本地持久化机制及存储结构

回答思路：前端本地存储对话历史、用户设置等。

实现方式：

IndexedDB：存储大量结构化数据（消息列表），支持索引、事务
localStorage：存储轻量配置（用户设置、会话ID）

存储结构：

javascript 复制代码

// IndexedDB 结构
const dbSchema = {
  conversations: {
    keyPath: 'id',
    indexes: ['updatedAt', 'title']
  },
  messages: {
    keyPath: 'id',
    indexes: ['conversationId', 'timestamp']
  }
}

// 示例数据
{
  id: 'conv_123',
  title: 'React讨论',
  updatedAt: Date.now(),
  messages: [...]  // 或单独存储
}

七、存储溢出如何处理（删除逻辑）

回答思路 ：实现LRU（最近最少使用） 淘汰策略。

实现：

记录每条会话的最后访问时间
存储总大小超过阈值时，删除最久未访问的会话
可设置最大会话数（如50条）或最大存储容量（如50MB）

javascript 复制代码

class ConversationStorage {
  constructor(maxItems = 50) {
    this.maxItems = maxItems
  }
  
  save(conversation) {
    const items = this.getAll()
    if (items.length >= this.maxItems) {
      // 删除最久未使用的
      const oldest = items.sort((a, b) => a.lastAccessed - b.lastAccessed)[0]
      this.delete(oldest.id)
    }
    this.store(conversation)
  }
}

八、流式响应与非流式响应的区别

维度	非流式响应	流式响应
数据返回	一次性返回完整数据	分块逐步返回
用户感知	等待时间长，空白期	逐字显示，无空白
实现方式	普通HTTP请求	SSE、WebSocket、Fetch + ReadableStream
适用场景	短文本、API接口	AI对话、大文件、实时日志

九、流式返回慢时界面如何优化

回答思路：从用户体验和性能两个维度优化。

优化策略：

骨架屏/占位符：先展示消息容器，再逐字填充
打字机效果：控制显示速度，避免闪现太快
优先渲染首屏：先展示已收到的内容，不等全部
加载提示：显示"正在输入中..."动画
预加载：提前建立连接，减少首字延迟

javascript 复制代码

// 打字机效果
async function typewriter(text, element, speed = 30) {
  for (let i = 0; i < text.length; i++) {
    element.textContent += text[i]
    await new Promise(r => setTimeout(r, speed))
  }
}

十、大模型返回中断如何处理（断点续传/重连）

回答思路：结合SSE的断线恢复机制。

方案：

自动重连 ：SSE原生支持，监听onerror触发重连
断点续传 ：携带Last-Event-ID，服务端从断点继续推送
消息缓存：前端缓存已收到的内容，重连后追加
超时重试：设置超时时间，超时后主动重连

javascript 复制代码

function connectWithResume() {
  let lastId = localStorage.getItem('last_event_id')
  const url = lastId ? `/events?lastId=${lastId}` : '/events'
  const source = new EventSource(url)
  
  source.onmessage = (e) => {
    const data = 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）：注入位置信息
残差连接 + 层归一化：稳定训练

text 复制代码

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的指令，调用相关工具，返回结果

示例：

yaml 复制代码

# test-generator.skill
name: 生成单元测试
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工程化前沿概念，面试官既考基础深度，又问技术广度。用户反馈"跟美团一样舒服"，说明面试官是懂业务、懂技术、也懂沟通的人。这样的面试，即使没过，也能让人学到东西。