2017年互联网公司校招季，前端岗位的面试题和现在相比，风格差异其实挺大的。那会儿Vue 2刚发布一年多，React 16还没影儿，TypeScript在中小团队里还算稀罕玩意儿。京东那套主观题，如果你现在翻出来看，会觉得有些题目“天真”，但恰恰是这些题目，记录了这个行业从“切图仔”向“工程化工程师”转型的关键节点。
这篇内容不是简单把题目罗列一遍，而是用我这些年面试别人、也被别人面试的经验，把京东2017校招前端主观题背后真正想考察的东西拆开讲透。顺便结合2026年的视角，聊聊哪些考点过时了，哪些底层逻辑依然值钱。不管你是准备校招、社招跳槽，还是单纯想看看行业变迁，这篇都能给你一些参考。
1. 2017年的前端面试全景与题目类型解读
1.1 时代背景：为什么那年的题“看起来简单”
2017年移动互联网还处于红利期，电商大促带来的前端需求非常旺盛。京东作为头部电商平台，校招题目的核心目标不是筛选“算法竞赛选手”，而是筛选“能干活、能扛事、能沟通”的同学。
那会儿的前端开发有一个典型特征：浏览器兼容性问题是日常工作的一部分。IE8虽然已经日落西山，但国内不少用户还在用；移动端WKWebView和各种Android WebView的碎片化更是让人头疼。所以2017年的前端主观题里，你会看到大量关于事件冒泡、闭包、原型链、跨域、性能优化的内容。这些题目放在今天依然是经典，但在当年，它们是实打实的“生产必备技能”，而不是“面试八股文”。
还有一个背景值得注意：2017年前端工程化刚进入爆发期，Webpack 3是主流，Gulp还在不少老项目里运行。所以主观题里很少出现“你如何看待Vite和Webpack的差异”这种问题——因为Vite根本还没诞生。取而代之的是“如何优化页面加载速度”“如何做模块化开发”这类更朴素、更底层的问题。
1.2 京东2017校招前端主观题的题型分布
根据我手上整理到的一些资料和当年的面经回忆，京东2017校招前端主观题大致可以分为四类：
| 题型 | 典型内容 | 考察目标 |
|---|---|---|
| 基础语言题 | 闭包、原型链、this指向、事件循环 | JavaScript语言理解深度 |
| 浏览器与网络题 | 跨域方案、缓存策略、页面渲染过程 | 对Web运行环境的理解 |
| 性能优化与工程化 | 首屏加载优化、构建工具使用、模块化 | 是否具备生产环境思维 |
| 综合场景设计题 | 设计一个组件、设计一个前端监控方案 | 架构能力和产品思维 |
这四类题型的比例大概是3:2:2:3。你可以明显感觉到，京东那年的主观题很看重“对业务的理解”，不是单纯考你会不会写一个函数，而是考你会不会用前端技术去解决一个实际业务问题。
另外，那年京东的主观题还有一个特点：部分题目允许你自由选择技术栈。比如“请用你熟悉的前端框架实现一个组件”这类题，你用Backbone、AngularJS、React还是jQuery都行，重点考察的是实现思路和代码质量。这和现在很多公司“必须用React/Vue”的硬性要求形成了鲜明对比。
1.3 主观题和客观题的本质区别
很多人校招时刷了大量选择题，结果看到主观题就懵了。其实主观题的核心逻辑是：面试官不关心你“知道什么”，而关心你“怎么思考”。
举个例子，客观题可以问你“闭包是什么”，四个选项选一个；主观题会问你“请用闭包实现一个计数器，并说明哪些场景下闭包会导致内存泄漏”。前者考记忆，后者考理解和应用。京东2017年的主观题非常注重后者，几乎是每一个基础考点都配了一个“为什么”或“怎么做”的追问。
所以在准备这类题目时，切忌死记硬背。你需要做的是把每个知识点拆解成“是什么—为什么—怎么用—有什么坑”这四个维度去组织答案。我在后面章节会针对具体题目展开讲。
2. 京东2017校招前端主观题核心考点拆解
2.1 JavaScript核心：闭包、原型链与this指向
JavaScript几乎是2017年京东前端主观题的绝对C位。就拿闭包来说，题目通常是这样的：
请解释什么是闭包？请用闭包实现一个 private 变量，并分析闭包在循环绑定事件时可能产生的问题。
这道题看起来简单，但拿高分并不容易。很多同学能写出“函数内部返回函数”这个模板答案，但真正能讲清楚以下三点的人很少：闭包的形成条件（函数嵌套+内部函数引用外部变量）、闭包的作用（变量私有化+模块化）、闭包的代价（内存占用）。
当年我面试过不少候选人，这道题能答满分的，通常后面几轮技术面表现也不错。为什么？因为闭包这个知识点串联了作用域链、垃圾回收、模块化设计、事件绑定原理，一个人能把这个点讲透，说明他的JS基础是成体系的，而不是零散背题背出来的。
再来说原型链。2017年那会儿class语法虽然已经出现，但很多老代码还是基于构造函数+原型链写的。京东的题里有一道经典的：
请实现一个简单的继承，要求子类能继承父类的方法和属性，并说明你使用的继承方式有什么优缺点。
这道题考察的是对JavaScript继承机制的理解深度。组合继承、寄生组合继承、ES6 class继承分别解决了什么问题，各有什么代价，如果这些你都能说清楚，说明你是真正写过代码、踩过坑的人。如果只背了一个“原型链继承”的答案，面试官多追问一句“new的时候发生了什么”就露馅了。
this指向也是高频考点。2017年的题里常见的问法是：
请说明以下几种情况下this的指向：普通函数调用、对象方法调用、构造函数调用、箭头函数、call/apply/bind。并解释为什么箭头函数不能用bind改变this指向。
这道题难在“为什么”。很多人能背出结论，但讲不清楚箭头函数没有自己的this，它继承的是定义时外层作用域的this，而bind只能改变函数自身this的绑定，无法改变它已捕获的外层this。能把这句话说利索的人，当年基本都能拿到不错的评级。
2.2 浏览器与网络：跨域、缓存与渲染机制
2017年做前端，不懂跨域是活不下去的。京东的题目自然不会放过这个点：
请列举常用的跨域方案，并说明各自的适用场景和局限性。
标准答案大概会提到JSONP、CORS、postMessage、document.domain、代理转发等。但高分答案会分场景去讲：如果只是GET请求且需要兼容老浏览器，可以用JSONP；如果是XHR或Fetch且服务端可控，首选CORS；如果是iframe之间通信，用postMessage更安全；如果开发环境联调，用webpack devServer的proxy最方便。
如果你还能主动提到“CORS的预检请求”以及“Access-Control-Allow-Origin设为*时无法携带Cookie”这些坑，那这道题基本就稳了。因为这说明你不是背方案列表，是真的处理过跨域问题。
缓存策略也是必考题。京东那年问得比较直接：
请说明强缓存和协商缓存的区别，以及HTTP头中Cache-Control、Expires、Etag、Last-Modified之间的关系。
这道题的高分关键在于：你能讲清楚浏览器缓存的实际工作流程。第一次请求时服务端返回Cache-Control和Etag，浏览器把它存起来；第二次请求时，如果Cache-Control还没过期，浏览器直接用本地缓存，不发请求；如果过期了，浏览器带上If-None-Match（对应Etag）或If-Modified-Since（对应Last-Modified）发请求，服务端返回304或200。
如果能再说到“index.html通常用no-cache，静态资源用immutable+hash文件名”，那就更完美了。因为这说明你理解缓存策略不是一锤子买卖，而是要根据不同资源类型做精细化配置。
页面渲染机制是另一个重点。题目通常是：
请描述从输入URL到页面渲染完成的全过程，并说明哪些环节可以做性能优化。
这道题其实是性能优化的变体。你能从DNS解析、TCP连接、HTTP请求、HTML解析、CSSOM构建、DOM树构建、Render Tree、布局、绘制一路讲下来，然后从每一段里找到可优化的点，比如DNS预解析、CDN、HTTP/2多路复用、script标签的async/defer、CSS选择器层级优化、减少重排重绘等，面试官就会觉得你是系统性地理解Web性能的。
2.3 性能优化：从“能用”到“好用”
2017年的京东前端主观题里，性能优化是重头戏，几乎每年都有一道压轴题。常见问法：
你负责的页面首屏加载太慢，请设计一个优化方案。
这个问题的答案没有标准解，但有几个得分点：
第一，先量化问题。别上来就写优化方案，先讨论怎么度量和分析。用Chrome DevTools的Performance面板、Lighthouse、WebPageTest、Performance API统计FCP和TTI，找出瓶颈在哪个阶段。能说出“先分析再优化，用数据说话”的人，已经赢了一半。
第二，分场景优化。网络层面用CDN、HTTP/2、gzip；资源层面做代码分割、懒加载、图片压缩成WebP；渲染层面减少重排重绘、避免同步加载阻塞脚本；缓存层面用强缓存和协商缓存配合。一个问题能拆成多个维度去分析，说明你有体系化的性能优化方法论。
第三，取舍意识。如果你的方案能提到“首屏优先”“交互优先”“图片懒加载的阈值的设置”“到底该不该用骨架屏”这类涉及取舍的细节，面试官会眼前一亮。能说出“骨架屏在白屏时间低于300ms时反而会增加复杂度”这种话的人，一定是真实做过性能优化项目的人。
第四，监控与回归。优化完能上线，上线后怎么保证不劣化？加性能监控、上报关键指标、设置告警阈值，这套思路在2017年算加分项，到了现在几乎是必备项。不同的人在这个问题上体现出的差距，本质上就是“做没做过事”的差距。
2.4 框架与工程化：从刀耕火种到工具链
2017年那会儿React已经比较火，Vue也在快速上升期，AngularJS在老项目中存量很大。京东的主观题里，框架相关题目通常不会要求你手写一堆代码，而是：
请谈谈你对Vue/React中数据驱动的理解，以及组件间通信的方式。
这类题目的核心是考察你是否理解“数据驱动视图”这个思想，而不只是会调用API。能在答案中对比Vue的双向绑定实现（Object.defineProperty）和React的单向数据流，再聊到Flux或Vuex的state管理思路，基本就是高分答案了。
工程化相关的题也常见。比如：
你了解Webpack吗？请说说它的核心概念，并描述一次完整的构建过程。
我当时听到这个问题时就知道，面试官想听的绝不仅仅是entry、output、loader、plugins这四件套的定义。core概念当然要答，但更重要的是一种“从源码到产物”的观察角度：入口文件怎么被解析成AST，各种loader怎么把ES6、SCSS、图片变成Webpack能理解的方式，接着在经过loader的加工之后如何在模块之间进行递归依赖解析，再经由plugins做压缩和抽取公共代码，最终在产物中注入runtime。能把这条线讲通，意味着你是真的自己配过Webpack，而不是只拿脚手架写过页面。
“工程化”四个字本质上就是三个模块的复杂度管理。你在代码上做模块化拆分是工程化，在构建上做产物优化是工程化，在代码规范上做git commit规范、eslint校验也是工程化。当年能体现出这种“全方位工程化思维”的候选人，大多数现在已经是团队里的资深角色了。
2.5 综合场景设计：一道题看出你的架构思维
京东2017年主观题最有区分度的是综合设计题。这类题通常出现在最后，给你的时间也比较充裕。例如：
请设计一个电商列表页的前端架构，包含下拉刷新、上拉加载、滚动位置记忆、网络异常时错误占位等功能，请详细说明你的实现方案。
这道题考验的不只是技术细节，更是思维结构。有经验的候选人会这样组织答案：
第一步，拆解功能模块。把需求拆成列表渲染、数据请求、状态管理、滚动处理、异常处理五个独立模块，各模块之间通过事件或数据流通信。
第二步，选择技术方案。如果时间轴是2017年，有人会用Vue + Vuex + axios，或者React + Redux + fetch。现在回头看，技术选型的细节反而不重要，重要的是一种“适配业务”的选择意识。
第三步，设计数据层。定义好数据模型、加载状态（loading/empty/error/hasMore）、分页游标，这些都要提前定清楚。很多新手做这种题会把全部精力放在UI实现上，忽略数据模型设计，结果就是代码越写越乱。
第四步，处理边界情况。滚动位置记忆（用keep-alive或手动记录scrollTop）、下拉刷新时的loading态、上拉加载时的锁（防止重复请求）、断网时的错误提示以及重试机制、图片懒加载和占位图，这些细节能说到一半以上，面试官基本就会给你高分。
第五步，考虑可扩展性和可维护性。如果你的方案里提到了把列表项抽成独立组件、通过配置项驱动不同列表页的复用、埋点上报的统一入口，那这就是典型的“架构思维”。
这个题为什么有区分度？因为它没有唯一答案，纯粹考察你在真实项目中面临复杂需求时的思维质量。能把这个题答好的人，通常不是刷题刷出来的，而是真的在项目里摔打过的。
3. 以2026年的视角，复盘2017年考题的变与不变
3.1 已经过时的内容
说实话，2017年的题目里有相当一部分在今天已经“变味”了。当年必考的IE兼容问题、JSONP跨域方案、jQuery相关知识，放在2026年的面试里已经不太可能出现。现在主流的浏览器环境已经对ES6+有着完整支持，跨域问题在服务端配置好CORS之后，开发阶段几乎不再是被关注的命题点。
同理还有Webpack配置。2017年你会花大量时间调loader和plugin，2026年Vite的下游生态已经相当成熟，大多数项目用脚手架初始化之后不需要去碰构建配置，重点是真正的场景适配。如果今天面试还让候选人手写一份Webpack完整配置，要么是大厂基架团队在招聘，要么是面试官本人还在吃老本。
3.2 依然重要的底层能力
但另一部分考点即使在2026年依然属于“硬通货”，且没有过时的迹象：
| 考点 | 2017年考察形式 | 2026年变体 |
|---|---|---|
| 事件循环 | 说出setTimeout和Promise执行顺序 | 说出多个异步任务在微任务和宏任务中的精确执行顺序 |
| 闭包/作用域 | 实现一个计数器 | 在React Hooks中解释useState闭包陷阱 |
| 性能优化 | 首屏加载优化方案 | 核心Web Vitals指标优化与LCP诊断 |
| 浏览器渲染 | 描述渲染流程 | 解释react并发渲染与浏览器帧的协调关系 |
| 组件化 | 组件间通信 | 设计hooks或组合式API的复用模式 |
你会发现一个规律：变化的是技术名词，不变的是底层逻辑。事件循环的考察方式从“setTimeout和Promise顺序”演变成“useEffect和useLayoutEffect的时序比”，但核心考察的依然是你是否理解JavaScript的单线程执行模型。闭包的考察从“计数器”变成“useState闭包陷阱”，但核心依然是作用域链的规则。
所以我的建议是：准备面试时，与其疯狂刷最新框架的API，不如把JavaScript的语言核心理解扎实。底层能力扎实的人学新框架是按月计的，底层能力虚的人学新框架是按年计的。2017年的面试题恰恰提供了一个极佳的底层能力测试集。
3.3 2026年新增的高频考点
用2017年的视角看2026年面试，你会觉得面试题变了一个物种。现在技术体系里考核的不再只是语言本身，还包括：
- TypeScript类型体操：2017年TypeScript还算“新人”，2026年你不会TS几乎找不到工作。面试题从“什么是泛型”进化到“如何实现一个工具类型DeepPartial”这类类型层级的题目。
- 工程化与Monorepo：pnpm workspace、Turborepo、Nx这些词高频出现。考题也从“怎么配Webpack”变成“怎么设计一个多包项目的依赖关系”。
- 前端AI应用：2026年AI编程工具已经成为工作流标配。大厂面试题开始出现“请设计一个对接LLM的前端应用”这类题目，考察点包括流式响应处理、取消机制、SSE连接管理、Markdown流式渲染等。
- 微前端：qiankun、Module Federation、wujie这些方案在复杂业务场景落地多年，面试题会考察“如何设计主应用与子应用的沙箱隔离机制”“如何做公共依赖的共享策略”。
- 性能监控与可观测性：不只是“怎么做优化”，而是“怎么持续度量、告警、归因”。从Lighthouse到RUM到Sentry之外的错误监控平台，整个链路都是面试的高频区。
这些新考点本身并不脱离底层基础，它们更像是在2017年基础之上长出的“时代新枝”。如果一个人能先把2017年的基础题答明白，再往上叠加2026年新增的知识，他的竞争力会比只刷最新题的人强很多——因为新旧知识能够互相印证。
4. 校招面试的系统化备战方法
4.1 建立知识体系，而不是刷题打卡
很多准备校招的同学有一个误区：把牛客网、LeetCode、面经网站当成主要学习渠道，刷了上千道题，到头来面试时反而被一句“你为什么这么做”问倒了。
有效的方式是：在自己的笔记本（数字或纸质都可以）里整理一个“前端知识地图”。从语言基础、浏览器机制、网络协议、工程化、框架原理、性能优化、监控告警等几个大维度出发，每个维度再去拆子问题。比如“浏览器机制”下面可以拆出渲染流程、事件循环、存储机制、缓存机制、安全（XSS/CSRF）等子区域。我在实际面试中体会过，这种知识体系的价值并不仅仅在于应付面试官的问题，更在于它会显著提升你在真实项目里的决策判断能力。
刷题的正确姿势是：只用题目来校验地图上的盲区，而不是把题目本身当作知识。一道题做完之后问自己三个问题：它考的是哪个知识点？这个知识点在知识地图中的位置是什么？和它相关的知识有哪些？如果答不上来，回去补地图，而不是继续刷下一道题。
4.2 手写代码题：怎么练才能不白练
2017年京东的主观题里有不少手写题。虽然现在手写题的比例在下降，但依然是一些大厂的保留项目。手写代码题的核心不是“写出来”，而是“用好的工程思维写出来”。
练习的最好方式是给每一道题都设置“扩展模式”。比如你要练“实现一个防抖函数”，不只是写出基本版本：
function debounce(fn, delay) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }然后继续扩展问题：如果需要立即执行一次怎么改？如果需要取消防抖怎么改？如果this指向丢失怎么修正？如果你能追问出这三个问题并且都答明白，这道题才算真正练透了。
同样的扩展思维也可以用在“实现一个深拷贝”“实现数组去重”“实现bind函数”这类高频手写题上。很多深入的问题表面上是在考你的知识点边界，实际上是在考你有没有把题目练成真正的技能，而不是把背下来的答案在面试时做个转述。
4.3 软技能：表达与结构化思维
我在前面反复提到，主观题的本质是“让面试官看到你的思考过程”。所以表达能力的训练不可忽视。
一个比较实用的技巧是：用“总分总”的框架组织你每一道主观题的答案。先给出结论（“我倾向于用什么方案”），再展开理由和实现细节，最后总结优劣和适用边界。
另外，不要害怕在面试中承认不知道的知识边界。对于已知信息要展示深度，对于未知信息要展示学习能力，这两者之间有一条恰到好处的边界。2017年京东的面试现场我就跟候选人聊到过“这块我没有深入研究过，但如果让我去解决，我会先查文档、再做实验验证、再咨询有经验的人，我的初步思路是……”——思路清晰的探索者往往比满嘴放卫星的“全知型”候选人更受面试官欢迎。
5. 常见问题与踩坑实录
5.1 面试答题时的共性问题
我在面试过程中见过不少候选人，技术底子其实不错，但答主观题时总拿不到理想的分数。问题通常出在以下几个方面：
第一，只给结论，不给推导过程。问“为什么这个方案比那个方案好”，答“因为性能更好”。到底好在哪里？好多少？什么场景下好？不同方案有没有可能出现反向效果？这些不说清楚，面试官无法判断你是真的懂还是背了结论。我的建议是每次回答时尽量拿出“因为…所以…相比…在…场景下…”这样的思维轨迹来给全推导过程。
第二，没有边界意识。讲一个技术点时容易“无限发散”，大而全地说了一堆，却没有回答面试官当下真正关心的问题本身。一个好的回答应该是有结构的，直接点出适用边界，快速收束主题，把细节放在面试官追问时再展开。边界意识尤其体现了一个人是否经历过真实的技术决策过程，只有对方案做过取舍的人才不会把世界描绘成非黑即白。
第三，代码题通过后不做复盘。很多候选人把“写出来”当成终点，其实面试官考察的是你写完代码之后的“自查能力”。是否主动考虑边界条件？是否主动补充异常处理？是否说出时间复杂度和空间复杂度？这个环节非常关键。写出来并跑通对多数候选人而言并不难，真正能拉开优势的是扫尾阶段的每一步能否体现出资深工程师的思考习惯。
5.2 时间分配与心态管理
校招面试前的时间规划也很重要。我当时做校招辅导时经常建议候选人把时间分成三个阶段：基础期（约60%时间）全面过一遍知识地图，补齐盲区；专项期（约30%时间）针对目标公司做面经分析，专攻高频考点和题型；冲刺期（约10%时间）做模拟面试，练表达节奏和时间控制。
心态管理方面，你需要意识到一点：面试本质上是一次“匹配”，而不是“审判”。候选人常因为准备不到位而表现得过度紧张，反而把已经掌握的知识也讲得混乱。我在面试中遇到过一个候选人，本来技术能力在平均线以上，但一紧张，连“闭包是什么”都回答得磕磕绊绊。后来自我调整之后，把面试当成是在咖啡厅跟同行聊天，表现就好了很多。主观题没有标准答案，你越是放松，思路越清晰，越容易把自己的真实水平展示给对方。
5.3 独家避坑技巧
最后分享几个我个人的独家技巧，都是从实际面试中总结出来的：
技巧一：面试前准备一份“一句话项目经历”。针对简历里的每个主要项目，准备一句30秒内能讲完的概述，包含项目背景、你的职责、技术亮点、业务结果。这不但能帮你应对自我介绍环节，还能在回答跟项目相关的问题时快速定位到具体案例，让你的答案更有说服力。
技巧二：准备一个“技术栈对比矩阵”。比如Vue和React的对比、Webpack和Vite的对比、Flux和Redux和Zustand的对比、微前端方案的对比。不需要写得多详细，一两句话说明各自的优劣势和适用场景就够了。面试中的很多主观题，本质上都是让你做方案选型和对比分析。
技巧三：刷题时养成“写注释”的习惯。很多同学在练习手写题时习惯性地只写代码，完全不写注释。但面试场景中，面试官是通过你的代码来理解你的思路的。如果能在关键代码处写上简短注释，比如“此处需要清除上一次的timer，避免重复触发”，就能让面试官更轻松地跟上你的思维节奏，这种沟通成本上的主动降低本身就是一种推荐自己的方法。
技巧四：一定要准备反问环节。面试官问“你有什么想问我的”时，我最推荐问这三个方向：团队当前面对的主要技术挑战、团队的技术栈和演进规划、入职后会负责的业务方向。这不仅帮你快速判断这个团队适不适合自己的能力方向，还侧面展示了你对择业这件事的认真态度。
写在最后
细看京东2017校招这套前端主观题，会有一种“翻旧相册”的感觉。当年的技术栈各有不同，但面试设计背后的逻辑——考察系统性思维、动手能力和沟通边界感——直到今天依然成立。我建议你在准备面试时，不要只盯着最新技术，而是把这套经典题目当作“底层能力自检清单”，先确认自己是否扎实地理解了JavaScript本身、浏览器本身、网络本身，再去拥抱最新的工具链和框架。
根据我个人经验，面试官面对一个候选人时，最怕的不是这个人某道题答不出来，而是整场面试下来看不到候选人“思考的轮廓”。只要你平时在项目中养成多问“为什么”、多从底层角度拆解方案的习惯，不管遇到2017年的旧题，还是2026年的新题，你都能从容应对。
