2017前端校招笔试题复盘：底层能力仍是考察核心

每年校招季我都会翻出老试卷看一看今年又把这份2017年挖财前端校招笔试试卷重新做了一遍。说实话2017年距离现在不算近前端圈子的技术栈、工程化体系都变了好几轮但这套题里大部分知识点今天依然是前端面试的高频考点。别以为旧题没有价值恰恰相反一套设计得好的笔试试卷往往能透过具体题目看出出题团队对前端工程师能力模型的理解这比背一堆八股文有意义得多。这篇文章我想从一个应聘者复盘的角度把这份试卷的考察逻辑、核心知识点、答题思路和踩坑点都拆开聊一聊。不管你是正在准备校招的应届生还是工作几年想回炉基础的前端开发这篇内容都值得你花点时间看完。1. 试卷整体印象这套前端笔试试卷到底想筛什么人1.1 题型分布与命题逻辑先说整体感受。这份试卷的题型基本可以归为四类JavaScript基础、浏览器与网络、框架与工程化、开放型设计题。这个分布在当时的环境下并不意外2017年前端市场正处在一个关键转型期Vue 2.0刚发布一年多React生态已经在国内大面积铺开Webpack凭借强大的生态逐渐取代了Grunt和Gulp成为主流打包工具。用人方需要的不再只是一个会写jQuery切图的人而是有一定计算机基础、能理解浏览器运行机制、有工程化意识的前端开发者。这类笔试试卷的命题逻辑通常不是拉开分数用的而是用低成本的笔试环节先做一轮能力分拣。基础题过不了的人大概率面试环节也会暴露短板。而我们反过来看这套试卷其实可以明显感受到出题方的良苦用心——它考察的不是某一家框架的API而是离开了具体框架之后作为一个前端工程师还剩下的底层能力。1.2 从难度梯度看前端校招的能力模型一套合格的笔试试卷一定有明确的难度梯度。送分题占比大约三成覆盖选择、填空这类客观题基本是术语和概念的直接提问中档题四到五成需要结合代码上下文去分析执行结果比如this指向判断、事件循环顺序、作用域链查找这类题目决定了候选人代码敏感度最后两三成是综合题和开放题考察的是问题拆解能力和知识面的广度。我从这套试卷里读出的能力模型是这样的基础扎实、代码功底好、有浏览器整体认知、对前端生态演进有感知、具备解决实际问题的思路。逐条对照这个模型去准备面试比盲刷一百道题目有效得多。我在不同场合都强调过这个观点面试准备不要以刷题数量为目标而是以岗位能力模型为目标每一道题你都要问自己这道题背后考察的是什么能力。2. 基础题里的深水区JavaScript考点拆解2.1 this指向、闭包、原型链看似送分实则送命JavaScript基础部分是整份试卷的重头戏其中this指向问题几乎是必考题而且考察的精度可以很细。这轮题目里出现的形式很典型给出一段包含普通函数调用、对象方法调用、构造函数调用和箭头函数的代码让候选人写出输出结果。普通函数调用时this指向全局对象严格模式返回undefined对象方法调用时this指向方法的调用者构造函数调用时this指向新创建的实例箭头函数的this则是定义时所在上下文。这些基础规则大多数人能说个大概但混合在一起出现bug的时候能一步步推演清楚的人才算真正理解了。闭包也是笔试试卷上常驻的考点。闭包是指函数能够访问定义时所在作用域的能力这个定义本身不难背但它衍生出的两个问题才值得深挖一是闭包产生的引用不会被垃圾回收如果滥用会造成内存泄漏二是闭包在循环中使用的经典坑比如var声明循环变量配合回调函数时输出的全是循环结束后的值。这类问题最常配套出现的考题是手写防抖节流函数因为防抖和节流本质上就是闭包特性在真实工程里的应用。原型链部分我看过很多候选人能把_proto_和prototype的关系背得滚瓜烂熟但一让手写一个instanceof的实现或者展示对象属性查找的完整路径就卡壳了。刷题时重点应该放在三处对象属性的查找顺序自身属性、原型链逐层向上、Function.prototype和Object.prototype之间的关系、以及ES6 class语法只是原型链的语法糖这层认知。原型链不是为了考背诵而是为了考理解。2.2 事件循环与异步编程JavaScript运行机制的经典考法异步编程题在这套试卷里的分量不轻原因是异步机制决定了很多真实场景下的代码执行顺序也直接影响用户交互的体验。事件循环的考点通常会出成代码输出顺序题比如setTimeout、Promise、async/await和原生同步代码混在一起。这类题目的分析路径是固定的先看同步代码有没有微任务再看微任务队列里的Promise回调等微任务清空之后才轮到宏任务队列的setTimeout回调。这里有一个普遍被忽略的知识点Promise本身是同步构造的new Promise((resolve) {...})里面传入的执行器函数是立即执行的所谓异步的只是.then注册的回调。很多候选人只背了微任务先于宏任务却不知道微任务之间也有先后顺序Promise的then回调、async函数中await之后的代码、queueMicrotask这些都是微任务但插入时序不同决定了执行顺序的差异。async/await其实也是高频考点。这里要让候选人意识到的核心是await右侧的表达式会立即执行只是await之后的代码被放进了微任务队列。我做题时会建议用纸笔把宏任务队列和微任务队列分别画出来每执行一步就更新两个队列的内容标注清楚当前调用栈是清空状态还是非空状态这样基本不会错。2.3 手写代码题考的是代码习惯不是背答案笔试试卷里手写代码题大多集中在数组去重、深浅拷贝、防抖节流、函数柯里化这几个方向。这类题目选人看重的不是能不能运行而是写出来的代码能不能体现边界思考。以数组去重为例基础写法会用Set一行解决但产品级回答要能主动说出NaN的处理、对象元素的去重策略、以及是保持原顺序还是做排序。深浅拷贝是另一个常见的试金石。浅拷贝只要考候选人能不能区分引用类型和原始类型以及Object.assign和展开运算符也只能做浅拷贝这个要点。深拷贝真正拉开差距的点在Date、RegExp、Function等特殊对象的序列化以及循环引用的处理方案。如果你只写一个递归遍历对象属性的版本至少要能说出JSON.parse(JSON.stringify(obj))的局限性例如会丢失undefined、函数、Symbol和循环引用。我个人的建议是手写题回答时先说思路再动手写代码写完之后主动补充一句“如果考虑什么什么情况这个方案会有问题可以怎么改”。这是面试官最想看到的回答模式它展示的不只是你会写这段代码而是你真的具备工程判断知道该在什么情境下使用什么方案。3. 浏览器与网络从渲染原理到性能优化3.1 从输入URL到页面展示中间发生了什么浏览器相关的考察点基本绕不开“完整输入URL到页面展示”这道大综合题。这道题在面试里刷脸频率极高考察的是候选人有没有建立浏览器整体工作流程的认知框架。答这道题的标准姿势是分阶段拆解DNS解析域名拿到IP、TCP建立连接、如有HTTPS则进行TLS握手、浏览器解析HTML构建DOM树、同时解析CSS构建CSSOM树、两者合成渲染树、计算布局layout/reflow、绘制paint以及可能的合成composite层。这道题经常被答得流于表面因为大部分人只背了流程顺序。真正的加分项在于细节比如CSSOM的构建会阻塞渲染而HTML解析过程中遇到script标签会暂停DOM树构建等待脚本下载并执行完才能继续。现代浏览器有预加载扫描器这句话能帮助你解释为什么当前的性能优化最佳实践仍然建议把非关键脚本标记为async或defer。渲染部分最容易被追问的是重绘与回流重排。回流是指布局的变化影响了元素尺寸和位置需要重新计算布局而重绘则是外观变化但不影响布局的行为。回流的成本远高于重绘频繁读取某些布局属性如offsetHeight、scrollTop会导致强制同步布局这会让性能打折扣。这些知识在笔试题里经常以概念判断的形式出现但在真正的前端面试里则是深挖方向。3.2 HTTP缓存、跨域与前端安全HTTP缓存是我认为这套试卷里考察得比较细的部分。大多数候选人都知道强缓存和协商缓存的区别但问到具体响应头就开始含糊。强缓存相关的头是Expires和Cache-ControlCache-Control的优先级要高于Expires它通过max-age字段控制缓存的有效时间协商缓存则通过Last-Modified配合If-Modified-Since以及ETag配合If-None-Match实现服务端用304状态码代表命中缓存。这里我整理过一个对照表每次讲缓存就用它作为工具缓存类型关键字段校验方式状态码特点强缓存Expires / Cache-Control本地时间判断200from cache不请求服务器快协商缓存Last-Modified / ETag请求服务器校验304每次需要确认省流量不省时长跨域问题的背后是同源策略考察内容通常集中在同源的定义、限制范围以及常见解决方案对比。JSONP只支持GET请求但兼容性极好CORS能支持所有HTTP方法是现代应用的主流方案postMessage适合处理跨窗口通信而代理服务器的思路则是在开发环境和生产环境中把跨域问题消灭在网络链路层面。候选人如果只零散地报出几个方案却没有从浏览器安全模型的角度做归纳和对比在面试官眼里离“理解”还有一段距离。安全相关的问题里最常考察的是XSS和CSRF。XSS的核心是脚本注入防御思路是输入校验和输出转义CSRF的核心是跨站请求伪造因为浏览器会自动携带Cookie防御思路包括校验Referer、使用Token、设置SameSite属性。这些问题在实际开发中很容易被忽略笔试出现概念题时能答全也能体现一个人的安全意识。4. 框架、工程化与前端生态2017年的时代切面4.1 jQuery、MVVM框架与组件化思想2017年前后端分离的理念已经非常普及jQuery虽然还活跃在大量老旧项目中但主流新项目的技术选型已经转向了Vue、React这类MVVM框架。这套试卷里出现的框架相关问题更多是考察框架设计思想而不是具体API。比如MVVM的核心是数据驱动的视图更新Vue使用响应式系统配合模板编译实现数据与视图的同步React则强调UI是数据的函数通过不可变数据和协调算法实现高效更新。组件化思想也是常考点。组件化的核心价值不在于代码复用这一个点还体现在状态管理、生命周期、组件间通信等工程层面的问题。笔试和面试时我喜欢用这样一个场景来测试候选人一个父组件需要把一个状态传递给深层子组件props逐级传递的写法非常啰嗦此时应该怎么处理。答案是引入全局状态管理Vue里可以是Vuex/PiniaReact里可以是Redux或者Context这里考察的其实是在数据流管理上是否具备全局视角。4.2 模块化规范与打包工具从AMD到Webpack模块化是这一批题里最具有时代感的考点。CommonJS面向服务端采用同步加载模块Node.js生态一直沿用AMD则面向浏览器采用异步加载方案RequireJS是典型代表ES Module是语言层面的标准静态编译使其天然支持Tree Shaking。候选人应该能够横向对比这几种模块化方案的差异这段知识点反映出你对整个前端工程体系演进的理解程度。Webpack相关问题通常不会让你现场配置一份完整的配置文件但至少要知道entry、output、loader、plugin这几个核心概念以及为什么需要loader——因为Webpack本身只打包JavaScript需要loader来把CSS、图片、TypeScript、JSX等资源转换为Webpack能处理的模块。plugin则更偏向生命周期钩子层面的扩展比如HtmlWebpackPlugin自动生成HTML文件并在其中注入打包后的脚本这个动作是loader做不到的。4.3 新技术的试探ES6、TypeScript与工程化思维ES6新特性是2017年笔试试卷里一定会出现的内容。let/const与块级作用域、解构赋值、模板字符串、箭头函数、Promise、class语法、模块化语法这些已经成了今天的标准JavaScript但当年还是很多候选人容易混淆的新东西。如果让我挑一个最重要的知识点来准备面试我会说是let/const和var的差异。这个问题能延伸出很多追问暂时性死区是什么、变量提升在let里为什么不存在、作用域链查找顺序有没有变化。TypeScript和前端工程化相关的题目在那个时间段不会特别深更多是以了解为主。但有一类题值得单独提一嘴让你聊一聊对前端工程化的理解前端构建、代码规范、单元测试、持续集成这些环节的设计。这类题可以检验候选人是否有抽象归纳能力能不能把零散的实践总结成方法论。别小看这种没有标准答案的题它能拉开有项目思考和有开发经验的人之间的差距。5. 开放题与软实力那些没有标准答案的题5.1 页面性能优化开放题的正确答题路径性能优化几乎是所有前端笔试试卷的压轴常客。这类题没有唯一答案考察的是候选人能不能有层次地展开思路。我推荐的答题路径是先分层再展开网络层、渲染层、代码层、体验层。网络层包括合并资源请求、利用HTTP缓存、启用CDN、开启Gzip压缩也许还能提一下HTTP/2的多路复用和预加载。渲染层则要关注关键渲染路径避免CSS和JavaScript阻塞首屏渲染合理使用懒加载、异步脚本、媒体查询和字体加载策略这里也可以提到把内容拆分成更细的组件并在合适的时机挂载。代码层关注的是数据结构和算法层面的性能优化比如避免O(n^2)操作、使用事件委托、缓存计算结果在前端语境下可以结合虚拟列表来谈长列表渲染的优化。体验层则对应骨架屏、占位图、Loading状态、交互反馈这类让用户感知变快的技巧。答题时记得不要只铺开一堆方案要选出两到三个最能说明思路的点然后展开聊原理。比如说从加载性能角度我提到首屏压缩不到一定体积的关键CSS通过内联方式放在HTML中减少一次RTT背后的原理是CSSOM构建阻塞渲染内联关键CSS能提前首个有意义绘制时间。这样说起来比罗列二十个优化点有说服力得多。5.2 场景设计题与综合素质考察场景设计题在这类试卷中也很常见。比如给定一个线上问题让你分析排查思路。这类题往往结合了浏览器、网络、JS执行等多个知识点考察的不仅是知识面更是思维路径的清晰度。我会用这样一套标准流程来回答问题先复现问题 — 确认影响范围 — 缩小变量范围 — 使用工具采集数据 — 结合数据验证假设 — 输出结论和修复方案。这个流程本身就是一种工程方法论如果你能完整走下来即使没有直接答出正确答案面试官也会对你的系统排查能力留下深刻印象。综合素质类题目还包括职业规划、最近在学什么技术、最喜欢的代码库、读过哪些源码这类看似闲聊的内容。我的经验是这类题不要只报技术名词要讲清楚你对某个项目的理解深度。如果你说“我在读React源码”就要准备好对方接下来追问“你说说React的Fiber架构到底解决了什么问题、是怎么调度的”。从材料准备的角度看把一个问题研究透比十个问题都只碰过皮毛要强太多。6. 复盘建议如何用好一套旧试卷这套2017年的挖财前端校招笔试试卷现在回头看价值依旧很高。我建议你也找几套过去两三年的校招真题不要直接拿来做题而是先花时间分析命题结构把每一道题背后的考点标签总结出来。做完这套分析你会发现校招笔试的考点是有规律可循的大概三成是常青藤一样的底层知识四成是当前主流技术栈剩下两三成是开放性思考题。再说一条关于复习时间分配的建议。按考点的出现频率和复习性价比来排序优先级从高到低是JavaScript核心机制、浏览器渲染与网络、HTTP缓存与安全、框架核心设计思想、模块化与工程化、算法与手写题。很多候选人太过纠结于算法题反而忽视了JavaScript和浏览器这两块最容易拉开差距的基础题。以我个人的经验来看这两块基础搞扎实了面试的整体自信心会有本质提升。最后多说一句旧试卷是用来对标能力模型的不是用来背答案的。如果你做完一套试卷发现自己很多考点是模糊的这其实是个好消息因为它帮你精准定位了盲区。接下来要做的是围绕每道错题延伸出一张专题知识网把相关联的知识点都串联起来直到你能不看资料把这个专题的核心逻辑跟别人讲清楚。这个过程本身比结果值钱得多。