2025京东前端面试高频题解析：从JS原理到工程化实战

开头≥200字前100字融入核心关键词2025年了前端面试题的考察方式跟两年前比变化非常大。以前大家刷前端面试八股文背一背就要去面京东现在这套行不通了——面试官会更在意你有没有真正写过、踩过、优化过的东西而不是单纯背概念。这次我把京东前端面试中反复出现的题目整理了一遍覆盖JS基础、TypeScript、Vue/React、浏览器网络、工程化性能、手写代码和项目深挖几个大块适合准备跳槽的初中级前端同学参考也适合想检验自己知识体系是否完整的人自测。每个题目我会给出答案解析更重要的是讲清楚面试官为什么这么问、怎么回答能拿高分以及哪些地方最容易翻车。我这两年帮不少朋友做过面试复盘自己也把京东这几年的面经翻了个底朝天。下面这套题是我根据2024到2025年真实面经、网上公开的高频题目整理的不代表官方题库但覆盖面和出题思路非常接近。看完你大概会对京东前端的考察重点有个清晰判断。1. 先说最扎心的JS基础题怎么答才能不掉坑京东前端的面试很少直接问你闭包是什么这种送分题而是会换着花样考你——看起来是道基础题实际上是在测你理解得深不深。这一章节我把出现频率最高的几类JS题目拆开来讲。1.1 原型链与 instanceof背答案是过不了关的先看这道经典题function Foo() {} Foo.prototype.say function() { console.log(hello) } const f new Foo() console.log(f instanceof Foo) // true console.log(f instanceof Object) // true console.log(Foo instanceof Function) // true console.log(Function instanceof Object) // true很多人能答对结果但被追问instanceof 的原理是什么就卡壳了。instanceof 做的事情是沿着对象的隐式原型链__proto__一直往上找看能不能找到构造函数显式原型prototype指向的那个对象。找到返回 true走到原型链尽头还没找到就返回 false。面试官这里真正想确认的是你对原型链这个JS核心机制的理解边界。常见误区有两个第一以为f instanceof Foo是在检查 f 是不是 Foo 造出来的其实它检查的是原型链上的引用关系第二不知道instanceof的右侧必须是一个构造函数有prototype属性的对象否则会直接报错。我建议的回答思路是先用一句话说明原理再手动实现一个简易版本最后补一个边界说明。手写版本大致长这样function myInstanceof(obj, Constructor) { if (obj null || (typeof obj ! object typeof obj ! function)) { return false } let proto Object.getPrototypeOf(obj) while (proto) { if (proto Constructor.prototype) return true proto Object.getPrototypeOf(proto) } return false }这里为什么要用Object.getPrototypeOf而不是直接读__proto__因为在ES5之后的规范里__proto__更多是浏览器实现的历史遗留而getPrototypeOf是标准API。这种细节能体现你真的在写代码而不只是看过博客。1.2 闭包与循环为什么 let 能救场var 不能京东爱考的一道题for (var i 0; i 5; i) { setTimeout(() console.log(i), 100) } // 输出5 5 5 5 5 for (let i 0; i 5; i) { setTimeout(() console.log(i), 100) } // 输出0 1 2 3 4第一段代码输出5个5原因在于var声明的 i 是函数作用域的全局只有一份。循环结束 i 变成55个定时器回调里读的都是同一个 i。第二段代码用let每次循环都会基于当前 i 的值创建一次新的绑定5个回调分别捕获了5个不同的 i。这里值得展开的是let到底做了什么。语言规范里 for 循环的每次迭代都会生成一个词法环境let声明的变量绑定在这个新环境上所以闭包捕获的是当下的值而不是最终值。如果你用var想要达到同样效果就得借助 IIFE立即执行函数表达式或者把值传参进函数for (var i 0; i 5; i) { (function(j) { setTimeout(() console.log(j), 100) })(i) }面试时如果能把这个演进过程讲清楚——从 IIFE 到 let 块级作用域再到追问那 const 在 for 循环里为什么不行——面试官会认为你对作用域机制的理解是成体系的而不是零散记了几个答案。const 不行是因为每次迭代要重新绑定新值而 const 不允许重新赋值所以用 const 声明普通的for (let i 0; i 5; i)会报错但它可以用于for...of因为每次迭代也是新绑定同时没有对 i 的自增赋值。1.3 事件循环这道题能筛掉大半候选人京东前端面试中事件循环几乎是必考的。难度通常是这样一道题console.log(script start) setTimeout(() { console.log(timeout 1) Promise.resolve().then(() console.log(promise 1)) }, 0) Promise.resolve().then(() { console.log(promise 2) setTimeout(() console.log(timeout 2), 0) }) console.log(script end)正确输出顺序是script start → script end → promise 2 → timeout 1 → promise 1 → timeout 2。但很多人会答成 script start → script end → promise 2 → timeout 1 → promise 1 → timeout 2这个答案其实是对的。我见过不少人以为timeout 1会先于promise 2输出因为他们把宏任务队列理解成一个先入先出的普通队列。实际上每执行完一个宏任务浏览器会清空当前所有微任务然后再取下一个宏任务。所以 JavaScript 的调度模型应该是单个宏任务 → 清空微任务队列 → 渲染如果需要→ 下一个宏任务。面试时我会建议大家把答案组织成三层执行栈 → 微任务Microtask→ 宏任务Macrotask。微任务包括 Promise.then/catch/finally、MutationObserver、queueMicrotask宏任务包括 setTimeout、setInterval、I/O、UI 渲染、事件回调。Node 端还要额外注意process.nextTick的优先级高于 Promise 微任务。这道题真正的分水岭在 async/await 的时机判定async function async1() { console.log(async1 start) await async2() console.log(async1 end) } async function async2() { console.log(async2) } async1() console.log(after async1) // 输出async1 start → async2 → after async1 → async1 end关键在于await后面的代码在语法上等价于.then()里的回调所以async1 end会被当成微任务延后执行。把 await 想象成把后面的代码装进 Promise.then 里很多执行顺序问题就迎刃而解。1.4 this 指向与手写 call/apply/bind这道题单独拎出来说是因为太多人栽在 this 上。京东这道手写题出现频率很高手写call和bind并且要求不能用Function.prototype自带的方法。手写call的思路是把函数作为目标对象的一个属性调用函数内部的 this 自然就指向了目标对象Function.prototype.myCall function(context, ...args) { context context ?? window const fn Symbol(fn) context[fn] this const result context[fn](...args) delete context[fn] return result }为什么要用Symbol因为如果用普通字符串属性名可能会覆盖对象上的同名属性。用Symbol可以最大程度避免污染和冲突再用delete清理掉临时属性。这是一个能体现工程意识的细节。bind 的实现则要处理参数累加和new 调用两个问题Function.prototype.myBind function(context, ...bindArgs) { const fn this const boundFn function(...callArgs) { const isNew this instanceof boundFn const ctx isNew ? this : context return fn.apply(ctx, [...bindArgs, ...callArgs]) } boundFn.prototype Object.create(fn.prototype) return boundFn }new 调用时 this 指向新对象不能用预先传入的 context这是最容易忽略的边界。我在实际面试中见过有候选人能把 call 写得很顺但 bind 一遇到 new 场景就漏掉判断。这提醒我们基础题不是靠背是要把各种边界情况都想清楚。2. TypeScript 类型题从会用到会写工具类型的差距2025年的前端面试TypeScript 基本是默认技能。京东对 TS 的考察不是问 TS 和 JS 的区别 这种泛泛的问题而是直接上类型体操。这一章我们看几个高频考点。2.1 手写 Partial、Pick、Record 这些工具类型先看题目不使用内置工具类型手写PartialT、PickT, K和RecordK, V。// Partial把所有属性变为可选 type MyPartialT { [P in keyof T]?: T[P] } // Pick从 T 中选取 K 这些键 type MyPickT, K extends keyof T { [P in K]: T[P] } // Record用 K 中的每个键创建对象值类型为 V type MyRecordK extends keyof any, V { [P in K]: V }这几道题看着不难但里面藏了三个关键知识点keyof取出对象键联合类型、in做映射遍历、泛型约束extends限制传入参数的范围。面试官考 Pick 的时候如果追问一句为什么 K 需要extends keyof T答不上来就说明只是背过答案。原因很简单如果不约束 K用户可能传入 T 里根本不存在的键类型系统就失控了。2.2 infer 与条件类型ReturnType 的进阶考法京东在这个方向上有道高频题手写ReturnTypeT理解infer的作用。type MyReturnTypeT extends (...args: any) any T extends (...args: any) infer R ? R : neverinfer R的意思是在类型匹配过程中声明一个待推断的类型变量如果T能匹配函数类型就把函数返回值类型推断出来赋给 R。这里有几个容易出错的细节函数参数类型必须写(...args: any)而不是(...args: any[])因为any[]会无法匹配某些具体函数签名extends后面是条件类型的判断分支。再进阶一点京东考过一道根据实际业务包装出来的类型题给定一个 async 函数提取其返回 Promise 内部的类型。type AwaitedValueT T extends Promiseinfer U ? U : T type Result AwaitedValuePromise{ data: string } // Result 为 { data: string }这个AwaitedValue其实就是 TS 内置Awaited的简化版。做这道题时我会再补充一层思考如果 Promise 里再套 Promise 怎么办2024 年后 TS 内置的Awaited是递归推导的你可以在面试时主动提一句内置的 Awaited 会递归解包我这里是简化版这会让面试官觉得你不只满足于完成题目还会主动研究边界。2.3 实际业务场景的类型封装除了类型体操京东也喜欢考工程中真实遇到的类型问题。比如这道后端返回的数据结构是{ code: number; data: T; message: string }要求封装一个通用的请求方法让调用方拿到已经剥掉外层结构的类型。interface ApiResponseT { code: number data: T message: string } async function requestT(url: string): PromiseT { const res await fetch(url) const body: ApiResponseT await res.json() return body.data } // 调用方这里不需要手动断言就能拿到正确类型 const user await requestUser(/api/user)这种题考察的不是某个 API 背没背而是你是否能在项目里写出让团队受益的通用封装。回答时可以顺带提一提如果后端 code 不是 0 怎么办、怎么在类型层面做错误处理、要不要用fp-ts的Either等等。这属于加分项但提一嘴会让面试官觉得你有架构视野。3. Vue 和 React 的核心设计差异面试官真正想听的是什么京东技术栈里 Vue 和 React 都有大量使用所以面试中框架题通常是二选一或者对比题。无论哪种考察核心都是同一个你对框架的设计取舍理解有多深而不是你背了多少 API。我分开讲。3.1 Vue响应式原理和 diff 优化是重叠考区Vue 方向的基础题一定是Vue2 和 Vue3 的响应式有什么区别。标准答案大家都会背Vue2 用Object.defineProperty递归劫持Vue3 用Proxy代理整个对象。但面试官真正想看你能不能说出为什么 Vue3 要换。我的回答思路是这样的第一Object.defineProperty只能劫持已有属性新增属性和删除属性都检测不到所以 Vue2 需要额外提供Vue.set和Vue.deleteProxy可以监听get、set、has、deleteProperty、ownKeys等十余种操作新增删除属性天然支持。第二Object.defineProperty需要递归遍历对象的所有属性才能实现深层响应式对象层级越深初始化越慢Proxy是懒代理——只有当访问到某个嵌套对象时才去代理它初始化性能更好。第三数组的监听方式不同。Vue2 需要重写push、pop、shift、unshift、splice、sort、reverse这些方法来触发更新Vue3 的Proxy直接拦截数组操作天然支持以索引访问或修改。更深一层京东面试官可能会接着问 Vue3 的 diff 优化。这时候要能说清楚三个点静态标记PatchFlag、静态提升和 Block Tree。PatchFlag模板编译时给动态节点打上标记比如文本变化是TEXTclass 变化是CLASSprops 变化是PROPS。更新时只对比带标记的节点和属性。静态提升把不变的静态节点提升到渲染函数外面每次渲染直接复用不用重新创建减少内存开销。Block Tree把模板结构看成一棵树用dynamicChildren数组记录带有 PatchFlag 的动态节点diff 时只遍历这个数组跳过静态子树。为什么 Vue3 能用这些优化而 Vue2 不行因为 Vue3 的模板编译是提前编译到 render 函数的编译器在编译期就能分析出哪些部分静态、哪些部分动态而这些静态信息在运行时被利用起来做精准更新。Vue2 的虚拟 DOM 是全量 diff运行时没有任何标记信息可以用来跳过节点。3.2 ReactFiber 和 useState 的底层逻辑React 方向京东高频题是Fiber 解决了什么问题和useState 是怎么实现的。Fiber 的答案要分成三层第一层React15 的 diff 过程是同步递归的组件树一旦很大更新时主线程会被长时间占用页面出现掉帧卡顿。第二层Fiber 把一个大的更新任务拆成一个个小的工作单元每个单元执行完都可以让出主线程给浏览器渲染的时间所以可以做到可中断的渲染。第三层Fiber 本身就是一棵树每个节点保存了组件的状态、副作用、兄弟节点引用、父节点引用和子节点引用。有了这些链表结构React 才能在渲染过程中暂停、恢复、丢弃和复用工作单元。useState 的原理题我在面经里看到过不少变体但核心都是useState 的实现依赖 Fiber 节点上维护的 hook 链表。每次函数组件调用useState会按调用顺序访问链表上的 hook 节点读取或更新对应的 state。这种基于顺序的机制决定了 hooks 不能写在条件语句和循环里——因为顺序一旦变化React 就无法建立上一次渲染和本次渲染的对应关系。如果你能把这个因果链说清楚比单纯背 hooks 不能写在 if 里 有说服力得多。React 和 Vue 的对比题我会建议从三个维度组织答案更新粒度Vue 是组件级响应式自动追踪、React 默认从根节点往下 diff、模板 vs JSX 的可优化空间Vue 模板编译能做静态分析React JSX 更灵活但需要手动 memo、状态更新模型的差异Vue 依赖响应式系统自动收集依赖React 依赖不可变数据和单向数据流。这些差异不是谁好谁坏而是设计目标不同面试官想听的是你能不能用取舍的角度看框架。3.3 key 的作用虚拟 DOM diff 的核心锚点key 这道题几乎是所有框架方向的必问题。但大家的回答大多停在key 用于标识节点复用这个层面。要拿高分需要把 diff 的细节讲出来。在 React 中当对比两个子列表时如果没有 keyReact 会按照索引一一对比导致节点的复用和内容错位。有 key 之后React 会基于 key 建立映射表做更精确的匹配能复用则复用不能复用再重新创建。Vue 的 diff 也很相似但具体算法是双端比较头头、尾尾、头尾、尾头配合 key 能够提高节点移动的识别效率。更关键的是不要用数组索引当 key——除非你的列表是纯静态的。原因在于当数组头部插入或删除元素时索引会全部变化React/Vue 会认为所有节点都变了导致不必要的重新渲染、状态丢失甚至输入框内容错位。真正稳定的 key 应该来自数据本身比如业务 ID 或唯一标识。4. 浏览器与网络URL 从输入到渲染怎么讲才能让面试官眼前一亮浏览器和网络部分的题目考察的不是你会不会背诵完整流程而是你有没有把各个环节理解成一串有因果关系的问题。这一章挑三组最高频的题。4.1 从输入 URL 到页面渲染完整链路里的细节输入 URL 回车后发生了什么这道经典题大多数人的回答是DNS 解析 → TCP 连接 → 发送 HTTP 请求 → 服务器返回 HTML → 浏览器解析渲染。这个骨架没问题但没有细节支撑面试官会觉得你是背的。我建议按下面这个层级展开每个环节解释为什么DNS 解析查浏览器缓存 → 系统缓存 → 路由器缓存 → 递归到根域名服务器。这里可以提一下 DNS 缓存命中能省几十到几百毫秒。TCP 连接现代浏览器基本都走 HTTPS所以还要加上 TLS 握手。HTTP/1.1 有队头阻塞问题所以浏览器默认会开 6 个左右的 TCP 连接并发请求。服务器响应返回 HTML 后浏览器按字节流解析 HTML。遇到link和script时会触发额外的请求。这里要重点讲render-blocking资源也就是 CSS 和普通 script 会阻塞渲染。构建 DOM 树与 CSSOM 树HTML 解析成 DOMCSS 解析成 CSSOM两者合成 Render Tree。布局Layout与绘制Paint计算每个节点的几何位置然后光栅化、合成图层。面试官喜欢追问的点有三个一是defer和async的区别二是 CSS 为什么放在head而脚本为什么放在/body前三是重排Reflow和重绘Repaint的触发条件。把这三个点想透整个环节的答案才能从背诵变成理解。4.2 浏览器缓存强缓存与协商缓存的完整字段表这道题不难但要答全。缓存分两层强缓存和协商缓存。强缓存相关的响应头是Cache-ControlHTTP/1.1 标准和ExpiresHTTP/1.0 字段。Cache-Control的常用值包括max-age相对时间、no-cache每次都要去服务器验证、no-store完全不缓存、public/private。Expires是绝对时间依赖客户端本地时间如果本地时间被改就会导致缓存失效所以 HTTP/1.1 里用Cache-Control: max-age取代它。协商缓存相关的头有两对Last-Modified/If-Modified-Since和ETag/If-None-Match。服务器返回Last-Modified表示资源最后修改时间浏览器下次请求带If-Modified-Since如果资源没变返回 304。但Last-Modified的精度是秒同一秒内多次修改可能判断不出来所以出现了ETag——一个基于文件内容生成的 hash 值更准确。优先级上ETag高于Last-Modified。可以画一个判断顺序浏览器发起请求 → 先查强缓存命中直接用本地副本200 from memory cache / disk cache → 没命中则带上协商缓存字段去服务器 → 服务器返回 304 复用本地资源或者返回 200 带新资源。面试加分点我能提一下Service Worker属于更上层的缓存代理以及memory cache和disk cache的差异——memory cache 读取快但生命周期短进程结束后就没了disk cache 持久化但读取速度不如内存。另外不要忽略Vary响应头它在缓存内容因Accept-Encoding、User-Agent等请求头不同而变化时非常关键。4.3 HTTP 协议演进与跨域方案HTTP/1.1、HTTP/2、HTTP/3 的区别是网络部分另一个高频考点。核心差异用一张表说清楚版本连接模型队头阻塞核心改进HTTP/1.1每个请求一个 TCP 连接浏览器并发 6 个左右有同一个连接上一次只能发一个请求引入了持久连接、管线化但基本没用起来HTTP/2一个 TCP 连接上多路复用多个 Stream 并发应用层解决了TCP 层仍有队头阻塞二进制分帧、头部压缩 HPACK、服务端推送HTTP/3基于 UDP 的 QUIC大幅缓解连接迁移、0-RTT 握手、内建 TLS 1.3跨域也是必考。前端常见的跨域方案包括CORS最常用需要后端配合设置Access-Control-Allow-Origin、JSONP利用 script 标签不受同源策略限制只支持 GET、postMessage主要用于 iframe 和 window 之间的通信、document.domain子域互信的旧方案、代理开发环境的 devServer proxy生产环境的 nginx 反向代理。面试官喜欢追问 CORS 的细节什么是简单请求什么是预检请求。简单请求需要同时满足请求方法是 GET/HEAD/POST 且请求头只包含安全字段等条件非简单请求会先发一个OPTIONS预检请求服务器返回允许的方法和头之后浏览器才发送真正的请求。如果你做过跨域相关的排错这里可以讲一个实际案例——比如自己遇到过预检请求 200 但实际请求失败原因是Access-Control-Allow-Headers里漏了自定义头。这种案例会让回答马上变得可信。5. 性能优化与工程化别只背指标要讲清楚你的选择依据性能优化题在京东面试中分量很重。它不像基础题那样有标准答案考察的是你在实际项目中能不能定位问题、选择方案、验证效果。这一章按指标 → 优化手段 → 构建工具 → 监控的链路来拆。5.1 首屏优化从指标拆解到具体动作提到性能优化首先要理解指标。前端最常见的性能指标是 FPFirst Paint首次绘制、FCPFirst Contentful Paint首屏内容绘制、LCPLargest Contentful Paint最大内容绘制、CLSCumulative Layout Shift布局偏移、INPInteraction to Next Paint交互响应。如果面试官问你做过哪些性能优化你先讲指标再讲手段比一上来就背优化方案高级很多因为这表明你是先定义问题再解决问题。首屏优化的核心手段可以按方向列网络层面启用 HTTP/2、CDN 分发、资源压缩Gzip/Brotli、合理配置缓存。资源体积代码分割Code Splitting、Tree Shaking、按需加载减少打包产物体积。加载时机路由懒加载、组件懒加载、图片懒加载 预加载关键资源link relpreload。渲染方式首屏用 SSR/SSG 或预渲染减少白屏时间。图片优化WebP/AVIF 格式、响应式图片srcset、CDN 图片裁剪。面试回答时挑两到三个自己真正做过的展开。比如我自己的项目里首屏 LCP 从 3.2s 降到 1.6s 就同时用了三招对首屏接口做 SSR 直出、把全量antd改为按需引入、大图用 CDN 加loadinglazy。这样的回答比罗列十个优化方案有说服力得多。5.2 Vite 为什么比 Webpack 快核心差异在哪Vite 和 Webpack 的对比几乎成了 2025 年工程化面试的标准题。这道题不能只答Vite 快要讲清楚快在哪、为什么快、代价是什么。Webpack 的瓶颈在于开发模式下所有模块先打包成一整个或多个 bundle项目越大冷启动越慢。而 Vite 利用浏览器原生 ES Module开发时不需要打包直接让浏览器按需请求模块。启动即把入口文件发给浏览器浏览器遇到import再请求对应文件Vite 只需要做实时编译和转换所以冷启动速度呈数量级提升。另一个差异是依赖预构建。Vite 使用 esbuild 将 npm 依赖预构建成 ESM 格式esbuild 是 Go 写的比 Webpack 用 JS 做打包快几十倍。文件更新时Vite 通过 WebSocket 通知浏览器热更新对修改的模块做按需替换速度也远快于 Webpack 的全量重新构建。但 Vite 也有代价浏览器原生 ESM 在开发时需要大量请求大型项目网络请求数会非常夸张依赖预构建和缓存策略要调优生产构建时 Vite 用的是 Rollup跟 Webpack 的产物优化思路不同。能说出这些权衡面试官才会认为你真正比较过两者而不是只会背结论。5.3 Webpack 的 Tree Shaking 原理为什么 ESM 是前提Tree Shaking 的原理值得单独展开。它依赖于 ES Module 的静态结构——import和export必须在顶层且模块路径不能被计算这样编译器才能在打包前静态分析出哪些导出没有被使用然后在压缩阶段terser/esbuild将未使用的代码摇掉。CommonJS 理论上做不了可靠 Tree Shaking因为require是运行时执行的模块导出对象也可以被动态修改。如果你在项目里同时用了 ESM 和 CJSTree Shaking 的效果会大打折扣。面试时能主动说出这个前提条件说明你不是机械地知道配置 sideEffects: false 就能摇树。相关考点还有sideEffects字段。当你引入一个库的某个子模块如果不声明 sideEffects 为 false打包器可能会保留整个包的副作用代码导致打包体积膨胀。这也是为什么很多组件库要求按需引入时单独配置。我建议面试时把 Tree Shaking 的链路串着讲ESM 静态分析 → 未使用导出标记 → 压缩工具删除 →sideEffects告诉打包器哪些文件没有副作用可以安全删除。5.4 错误监控与性能监控怎么设计一个完整的前端监控体系京东对监控类的问题兴趣不小因为它直接关系到线上稳定性。问法通常是如果线上出现了一个只有部分用户能复现的白屏问题你怎么排查或者设计一个前端错误监控系统你考虑哪些模块一个完整的前端监控系统可以拆成四个部分采集层捕获 JavaScript 运行时错误window.onerror、未处理的 Promise 异常unhandledrejection、资源加载失败error事件、接口请求错误拦截 XHR/fetch。上报层上报数据用navigator.sendBeacon或fetch(keepalive: true)避免页面卸载时请求丢失上报接口要做防抖和批量聚合防止一条错误刷几千条日志。存储与查询层后端接到数据写入日志系统按错误指纹聚合、按版本对比、按用户维度筛选。告警层设置错误率阈值触发告警比如某版本发布后错误率超过 0.5% 立即通知。面试时可以补充一个实战案例如果首屏白屏你第一步看什么我通常先看有没有 JS 报错再看接口是否返回异常再看入口 HTML 是否被缓存最后看某个第三方 SDK 是否阻塞了渲染。这种排障思路比直接给方案更能反映真实能力。还有一个小技巧上报错误时带上sourcemap的映射信息线上压缩后的代码才能还原出原始文件位置。如果项目里没配 sourcemap 上传报错日志基本等于废的。6. 手写题与场景设计题这轮是拉开差距的地方手写题和场景题在京东面试中占比不低考的是你说你会那就写出来看看。这一章按出现频率从高到低排列。每一道我都会给出思路而不是只给代码。6.1 防抖与节流不只会写还要说适用场景手写防抖和节流基本是送分题但很多人写不出来因为平时只背了 lodash 的用法没亲手实现过。防抖的核心是事件触发后如果在等待期内再次触发就重置计时器。function debounce(fn, delay 300) { let timer null return function(...args) { clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } }节流的核心是事件触发后在指定时间内只执行一次。function throttle(fn, interval 300) { let last 0 return function(...args) { const now Date.now() if (now - last interval) { last now fn.apply(this, args) } } }注意细节用apply(this, args)是为了在作为对象方法调用时保留 this 指向防抖适合搜索框输入联想、窗口 resize 停止后重新计算节流适合滚动加载、按钮重复点击限制。面试官如果追问防抖的第一次点击要不要立即执行可以回答可以加一个 immediate 参数控制这取决于业务场景然后写个带 immediate 的版本会显得更全面。6.2 大文件上传分片、断点续传与并发控制大文件上传是近年来的高频场景题跟热搜词里前端使用 worker 上传大文件也对应上了。京东的考法通常是用户上传一个 2GB 的视频你怎么设计前端上传方案核心思路是分片把大文件切成若干个小块比如每块 5MB每块独立上传全部传完后再由后端合并。这样即使某块失败也可以单独重传还能配合断点续传。第一步是计算文件指纹。用spark-md5之类的库计算文件 hash或者用文件 size 修改时间等简化指纹在初始化上传时将 hash 发给后端后端返回这个文件已上传到 60%前端就知道哪些分片需要重传。第二步是分片并并发上传。使用File.slice(start, end)切分然后限制并发数比如同时 3 个请求避免一下子把带宽打满。这里可以补充如果分片特别多可以用 Web Worker 做分片和 hash 计算避免主线程卡死——这是面试加分点正好对应热搜词里的 worker 上传大文件。第三步是断点续传。每个分片独立记录上传状态某片失败就只重传那一片。全部完成后前端调用合并接口后端把分片按顺序拼接成完整文件。我还遇到过面试官追问分片大小怎么定。合理的回答是分片太大会失去断点续传的细粒度优势分片太小会导致请求数过多、服务端压力大。一般建议 1MB 到 10MB200MB 到 2GB 的文件用 5MB 分片比较常见。回答时如果能结合上传中显示进度条的需求来设计比如每个分片有独立状态、进度 已成功分片数 / 总分数会让整体方案更完整。6.3 微前端方案对比与选型逻辑2025年微前端已经从概念期进入成熟期京东内部也大规模使用了微前端架构所以这个方向的高频题越来越多。下面的对比表建议熟记。方案原理优点缺点iframe浏览器原生隔离隔离彻底、实现简单体验差、路由同步麻烦、通信复杂、内存占用高single-spa在主应用注册子应用生命周期不依赖 iframe支持多框架需要自己处理样式隔离和 JS 沙箱侵入性强qiankunsingle-spa HTML Entry Proxy 沙箱开箱即用、样式隔离、JS 沙箱完善对子应用改造有一定要求复杂场景有坑Module Federation运行时共享模块依赖共享、构建时集成、跨应用复用代码对构建工具和部署方式有要求调试体验一般回答微前端题目时我建议先问清楚需求你要解决的是团队协作问题、技术栈异构问题、还是老项目渐进式升级问题不同需求对应的选型完全不同。如果只是为了让多个团队独立发布iframe 反而是成本最低的方案如果需要主应用内嵌多个业务、子应用之间需要通信和共享状态qiankun 或 Module Federation 更合适。面试官还爱问微前端最核心的难点是什么。正确答案不是技术选型而是治理。微前端拆分之后公共依赖怎么统一升级、权限怎么打通、路由怎么管控、数据怎么共享这些问题都比技术实现更致命。能意识到这一点并且讲出具体的治理方案会给面试官留下非常深刻的印象。6.4 设计一个前端错误上报系统从采集到告警的闭环除了性能监控错误上报系统也是京东很偏爱的场景题。前面第五章我已经讲过监控体系的大框架这里补充一些面试回答时的组织方式。回答这类设计题关键不是背模块而是展示你思考问题的顺序。我的回答顺序是先想清楚要采集什么运行时错误、接口错误、资源加载错误、白屏、性能指标再想怎么采集API 与拦截点再想怎么上报批量 实时再想怎么分析和告警错误率、版本对比、sourcemap 还原最后补一个如果让你自己实现你会优先做哪一步的落地优先级。这里有个很多人忽略的点错误采集不是越多越好而是要能定义什么算一次线上事故。比如某个接口在网络差时偶尔报错要不要告警如果告警阈值设得太低告警疲劳会让团队忽略真实事故设得太高又会漏报。合理的做法是对同一错误做指纹聚合比如按错误消息 文件 行号分组只有当同一指纹的错误数在 5 分钟内超过阈值才触发告警。面试中能讲出这种数据设计思路说明你真的设计过而不是仅仅知道有这种东西。6.5 前端状态管理选型你平时是怎么决定的状态管理也是面试常客。React 项目里面试官会问 Context 和 Redux 有什么区别、什么时候用哪个Vue 项目里会问 Vuex 和 Pinia 的区别。Redux 的价值在于单一数据源、状态可预测、有时间旅行调试、有完善的中间件生态。缺点是样板代码多、学习成本高。如果你的项目里状态不算复杂跨组件共享也不多直接用 Context 或组件内的状态就够了如果项目大、状态多、多个模块间共享频繁Redux Toolkit 才是合理选择。Vue 这边 Pinia 官方推荐度已经远超 Vuex核心原因是Pinia 的 API 更简洁去掉了 mutations 概念、天然支持组合式 API、类型推导更完善。如果你在简历里写熟练使用 Vuex面试官大概率会追问你怎么看待 Vuex 和 Pinia 的差异建议提前准备好答案Pinia 把 mutations 合并到 actions 里基于 reactive 实现利用 Vue 3 的 Composition API让状态仓库更贴近普通 Composition API 代码的写法。7. 简历和项目深挖面试官问项目难点到底在问什么技术面最后一部分往往不是纯八股而是围绕你简历里的项目深挖。京东面试官在项目环节问的问题有很强共性我在这里系统拆一下。7.1 怎么准备项目难点STAR 法则的实战用法面试官问 你在项目中遇到过最大的难点是什么不是真的想知道你遇到什么难而是想看三件事第一你的难点是不是有足够技术含量第二你面对问题时有没有系统的排查思路第三你在项目里是纯执行还是有独立的思考。准备项目难点时我建议大家用 STAR 法则组织但不要直接说我用了 STAR 法则这种话而是自然地把四段信息融进叙述里。可以把这个模板用自己的话串起来背景Situation项目是一个面向内部用户的报表平台加载速度和稳定性都是考核指标。任务Task首屏加载 5 秒以上用户反馈强烈需要优化到 2 秒以内。行动Action我先用 Performance 面板抓取瓶颈发现是首屏接口串行 大图未压缩 打包产物过大。然后做了三件事接口并行请求、图片 CDN 压缩、路由懒加载 公共依赖拆分。结果Result首屏从 5.2s 降到 1.8s错误率下降 40%。面试官最高频的追问是这个你是怎么定位到那个瓶颈的这里千万不要回答感觉是或百度查的。要把排查链路讲清楚打开 Performance 录制看网络时间线和主线程执行火焰图发现某接口耗时 2 秒再看该接口有没有依赖前置请求发现是串行调用导致总耗时长。你越能还原当时怎么一步步查的过程面试官越信任你。7.2 简历上写的技术栈每一行都要经得起追问简历里最容易被追问的是熟练掌握深入理解这类表述。如果你写深入理解 Vue 源码面试官大概率会问 Vue3 的初始化流程、响应式依赖收集的细节、组件更新流程。写深入了解浏览器渲染机制那浏览器的关键渲染路径、合成层、重排重绘的区别都要能讲清楚。切记不要在简历上写自己没真正透的东西因为面试官专门挑简历上的薄弱点问。如果你自己做过组件库、脚手架、monorepo 工程、自动化部署流程这类事强烈建议在简历里突出。因为它们比业务项目更能体现工程能力。比如你写过自己的组件库哪怕很简单也能体现封装意识、文档能力、发布流程的理解。7.3 反问环节问什么问题能加分面试最后一般会留 5 分钟给你反问。推荐问这三类问题技术层面咱们团队现在前端技术栈主要是 React 还是 Vue新项目会考虑迁移吗 这能体现你对技术选型的关注。团队协作层面前端和后端的接口联调流程是什么样的有 API 文档平台或者 Mock 工具吗 这能体现你对协同效率有意识。个人成长层面团队对于新人前三个月有什么期待 这能体现你务实且有规划。不建议在技术面反问薪资、加班、考勤这些可以放到 HR 面。也不建议反问 你们用不用 XX 框架 这种过于宽泛、明显没做准备的问题。7.4 2025年面试趋势除了技术还在看什么跟 2023 年之前相比2025 年的前端面试有些明显变化第一对工程化能力的要求提高了。以前会写页面就行现在要懂构建工具、CI/CD、代码规范、monorepo、性能监控这些体系化能力。第二AI 辅助开发的讨论会被带入面试。面试官可能会问 你项目中用过哪些 AI 工具怎么用 或者 AI 写代码之后你怎么保证代码质量。这里不用回避可以大方说自己在用 Copilot、Cursor 之类的工具但要说清楚你的角色是设计、review 和兜底而不是直接把 AI 代码丢上去。第三场景题比重上升。越来越多的题目从你知道什么转向你会怎么解决。比如线上问题排查、交叉业务需求设计、与产品经理的沟通边界。这类题没有标准答案核心是展示你的分析框架和沟通方式。第四软技能被正式纳入考察。面试官会通过追问项目细节来验证你的表达是否清晰、能否抓住重点、遇到分歧怎么处理。准备时可以把每个项目用三句话讲完项目背景、我的角色、核心难点和结果。练熟之后面试时就不会冗长啰嗦。我在整理这套题的过程中最深的感受是京东前端面试的考察重点已经从标签式技术栈转向解决真实问题的能力。很多题没有标准答案面试官更关心你的思维链路和工程判断。准备面试时与其把精力花在死记硬背上不如把自己做过的项目当成主线把每个环节的为什么都挖一遍再配合这套高频题做查漏补缺。最后分享一个我自己的实操技巧准备面试时把每道高频题都写在一张卡片上正面写题目背面写三层答案——第一层是 30 秒快答版第二层是 2 分钟详细版第三层是能展示亮点与深度的加分版。面试前随机抽卡自测抽到就快速口述。这样做比反复看收藏夹里的文章高效得多。后面如果有机会我把 Vue3 和 React 内部机制的完整解析也整理出来那部分内容值得单独写一篇长文展开。