爱奇艺2018秋季校招前端工程师第一场笔试复盘周末帮一个学弟整理笔试题翻出了爱奇艺2018秋季校招前端工程师第一场这套卷子。回想当年我自己也参加过这场笔试一晃几年过去如今站在面试官角度重新看这份题目感受完全不一样。这套题在当年属于“中规中矩但暗藏杀机”的类型基础题居多但每一道都能往下挖好几层非常典型。现在把它掰开揉碎讲一讲对正在准备校招的前端工程师来说比刷十套新题还有参考价值。先说结论这套卷子整体偏基础考察范围集中在JavaScript核心机制、CSS布局、浏览器与网络基础、手写代码四项几乎没有偏题怪题。但越是基础的东西越能筛出真正“学过”和“背过”的人。前端面试发展到今天考的还是这些东西只是问法更刁钻了。另外说明一下原题我记忆有限下面梳理的是这套卷子的题型结构和对应的高频考点结合我对多届校招题目的观察还原度很高适合当练习题做。1. 整体试卷结构与考察方向1.1 从题型分布看校招考察思路这套卷子总时长90分钟题量大概在30道左右分了三个部分选择题、填空题/问答题、编程题。选择占大头编程题两道。从分布能看出当年爱奇艺前端团队的用人逻辑先看基础知识的广度再看代码手感最后通过编程题判断有没有基本的算法思维。选择题部分几乎都是“单行代码”级别的题目比如输出结果、判断true/false、比较运行顺序。这种题看着简单实际是给面试官发“信号弹”的如果你连console.log(1 1)这种题都要犹豫后面基本不用看了。填空题集中在CSS属性和浏览器API比如localStorage和sessionStorage的区别、position的几种取值、target和currentTarget的区别都是“背了就会没背就懵”的知识点。编程题两道一道用JavaScript实现功能一道考算法难度不高但非常考验编码规范。比如有一类高频题是手写一个防抖函数再考你怎么在一个数组中找到第K大的数。这类题放到今天依然频繁出现在各家笔试里只是现在会额外追问“时间复杂度多少”“能不能用堆优化”。1.2 那些年必考的浏览器与网络题爱奇艺作为视频平台对于网络和浏览器性能这块明显更上心。卷子里网络相关的题占比不小大概有5道左右集中在HTTP缓存、TCP三次握手、跨域方案上。这类题目在别的公司可能也就两三道但在视频网站页面性能就是生命线所以考察比例会高一些。其中高频的考点包括强缓存和协商缓存的区别、Expires和Cache-Control谁优先、ETag和Last-Modified的适用场景、简单请求和预检请求的判定条件。还有一道我记得很清楚给一段代码问setTimeout、Promise、async/await的执行顺序这题贯穿了事件循环、宏任务、微任务三个核心概念也是后来几乎所有前端笔试的标配。如果你当时不知道“先微任务后宏任务”“Promise构造函数是同步执行”这两条规则这题基本靠蒙。现在回看这道题其实是在筛选那些真正理解JavaScript运行时机制的人而不是只会调接口的“API调用工程师”。2. 前端核心语法题逐题复盘2.1 JS基础闭包、作用域与this指向爱奇艺这套卷子对JS基础的考察非常细闭包、作用域、this指向几乎各占一道。闭包那道题我记得大概是for循环里用var声明变量然后在setTimeout里输出i问输出什么。答案是“输出10个10”这基本是闭包题的经典入门款。如果当年你把var换成let答案就变成0到9这反映了let块级作用域的原理。另一个高频点是this的指向问题卷子里的题目难度递进得很明显第一道是普通函数调用问this是什么第二道是对象方法调用问this是什么第三道是把对象方法赋值给一个变量后再调用问this成了什么。三道题做完基本就能看出你对this绑定的四种规则默认绑定、隐式绑定、显式绑定、new绑定掌握到什么程度。我复盘时最想强调的一点是这类题看起来很“死板”但真到了面试现场面试官要的是你能把“为什么”讲清楚。比如问到闭包你要能说出“闭包就是函数记住了它定义时的词法作用域”还能顺手写一个防抖函数来证明你真的会用它而不是光背定义。还有一道关于数据类型判断的题也值得专门说。题目要求写出判断一个变量是数组的三种方法。常见的答案有Array.isArray()、Object.prototype.toString.call()、instanceof Array。这道题看似基础其实能分出三个层次只会第一种的是API使用者知道第二种的懂原理能说出第三种坑在哪跨iframe场景下不可靠的才是真正理解JavaScript类型系统的。2.2 CSS布局高频考点三栏布局与垂直居中这套卷子CSS题不算多但每一道都直击痛点。最典型的是三栏布局要求左右固定宽度、中间自适应写出多种实现方案。当年不少人只写了一个flex就交了但其实至少能写出四五种浮动、定位、flex、grid、表格布局。我强烈建议把每种方案都练熟并理解原理因为面试官会追问“如果中间栏内容很长哪种方案会出现问题”。浮动的经典问题是需要清除浮动定位方案中间栏会脱离文档流flex的主要限制是兼容性现在基本不是问题grid最简洁但当年还担心浏览器支持。能在现场答出这种对比比写出十种方案更让面试官印象深刻。垂直居中的考察也是必考的。我当时总结了一个“一句话版本”定宽高用margin负值不定宽高用flex或transform。具体来说就是position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);配合flex的justify-content和align-items。如果再加一个“两张图片垂直居中对齐”的场景还要考虑vertical-align和line-height的使用。BFC块级格式化上下文也是爱奇艺卷子里的常客。一般会问“如何触发BFC”“BFC解决了什么问题”。触发方式有overflow非visible、float非none、display: inline-block/flex、position: absolute/fixed等。解决的问题包括外边距合并、浮动元素覆盖、高度塌陷。这些知识不背不行但光背也不行得能在实际布局里用得出来。2.3 工程化与框架基础Vue还是React都逃不掉2018年正好是Vue 2.x如日中天、React 16刚发布的节点爱奇艺的卷子对框架的考察不算深但一定会涉及。我记得问到过v-if和v-show的区别Vue的响应式原理还有React的setState是同步还是异步——这题当年能答对的人不多因为源码里setState在合成事件和生命周期中是异步批量的但在setTimeout和原生事件中是同步的。我对框架题的建议是至少把Vue的响应式原理捋一遍——从Object.defineProperty到依赖收集再到异步更新队列。哪怕你平时用React也建议了解Vue这一套因为很多公司换框架很频繁人家要的是你对框架底层有理解而不是只会某个具体API。另外工程化这块webpack相关题也出现了。比较常见的是问loader和plugin的区别以及webpack-dev-server做了什么。loader本质是函数负责把文件内容进行转换plugin则是通过钩子机制在构建流程中注入额外的逻辑。这题当年靠背现在最好能对着webpack官网的架构图讲明白构建流程的各个阶段。3. 手写代码题笔试的“送分题”与“送命题”3.1 数组去重与深拷贝基础中的战斗机爱奇艺这套卷子的编程题里数组去重和深拷贝基本是“二选一”的常客。数组去重至少有四种写法使用Set、使用filter加indexOf、使用Object做哈希表、使用双层循环。但面试官往往不满足于你会写会继续追问如果数组里有NaNSet能去重吗indexOf能处理NaN吗这个追问就能筛掉一批人。深拷贝更是经典。我当时写了个简化版判断类型数组和对象递归其他直接返回。但更好的做法是考虑循环引用用WeakMap存一下已经拷贝过的对象避免栈溢出。还要区分Date、RegExp、Map、Set这些特殊对象。如果写一个通用深拷贝能把代码写清楚并且讲明白边界情况这道题基本就过了。我个人的建议是手写代码一定要写注释不用写太多但关键步骤要标一下。因为笔试很多时候是按照“解题思路”给分的注释能帮阅卷人理解你的设计意图。比如“这里用WeakMap是为了解决循环引用”写完这行注释哪怕后面代码没写完分数也能上去一截。3.2 防抖节流与事件循环输出题爱奇艺卷子里一定有防抖和节流手写题至少考一个。防抖和节流的区别防抖是“在事件触发后等待一段时间再执行如果在等待期内又触发了就重新计时”节流是“在固定时间间隔内只执行一次”。按生活场景理解就是防抖像电梯关门等人节流像地铁固定间隔发车。防抖函数的实现基础版大概是function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }注意这里用了apply(this, args)保留this指向这是最容易漏掉的一点。面试官看完基础版会追问如果我想让第一次点击立即执行怎么办那就要加一个immediate参数判断timer是否为空为空就立即执行。事件循环输出题我也得专门提一下。经典的题目是同时出现console.log、setTimeout、Promise.resolve().then()、async/await让你写出打印顺序。核心规则就两条微任务优先于宏任务同一轮的微任务按创建顺序执行。这里有个我自己总结的答题技巧先找同步代码再分微任务和宏任务两列最后按轮次执行一定不会错。3.3 网络与安全问答题的答题模板这套卷子的网络部分还有两道简答题考察的是HTTP缓存和前端安全。HTTP缓存题的标准答题路径是先答浏览器请求资源的流程然后分强缓存和协商缓存两个分支展开最后说服务端如何通过响应头配合。我建议画一张简单的表格对比两者的区别强缓存返回200 from cache协商缓存返回304强缓存由Cache-Control和Expires控制协商缓存由ETag和Last-Modified控制Cache-Control优先级更高。前端安全题基本绕不开XSS和CSRF。XSS的回答框架是定义、危害、分类存储型/反射型/DOM型、防御过滤、转义、CSP。CSRF的回答框架是定义、攻击原理、防御SameSite、Token校验、Referer校验。这道题价值很高因为即使笔试没考面试也一定会问。我建议把XSS和CSRF整理成一套“模板化”的答题体系考场上直接往里面填内容。关于跨域有个必问点就是JSONP的原理利用script标签不受同源策略限制动态创建script标签通过src请求接口后端返回一段调用回调函数的JS代码。问到这里往往会加一题“JSONP支持POST吗”答案是不支持因为它是通过script标签的src发送GET请求的。CORS则是服务端设置Access-Control-Allow-Origin前端不用额外处理。比较完整的回答要能区分简单请求和预检请求并且知道withCredentials和Access-Control-Allow-Credentials的配合方式。4. 从笔试到面试这些考点会被如何追问4.1 笔试暴露出的知识薄弱点我发现一个规律笔试里你做错的题大概率会在面试中被追问到类似的知识点。这不是玄学而是面试官会根据你的笔试卷子来设计问题。比如你闭包题答错了面试官可能会在面试时让你现场解释一段闭包代码再问“怎么解决循环引用导致的内存泄漏”。你防抖函数没写出来面试官就会让你现场手写一个节流函数。所以笔试结束后的复盘格外重要。建议每场笔试后把错题对应到具体知识点做一次“弱点扫描”。比如这次发现自己对事件循环不熟就集中刷十道事件循环输出题发现自己CSS布局只会flex就把grid和float方案都补上。这样每场笔试都能转化为一次针对性提升比自己漫无目的地刷题效率高得多。4.2 如何把“过笔试”转化为“过面试”笔试过了只是拿到了面试入场券。面试现场的提问方式和笔试完全不同笔试是“你知道这个知识点吗”面试是“你能把这个知识点讲清楚吗能现场解决一个相关问题吗”。比如笔试考了apply和call的区别面试就可能让你手写一个Function.prototype.myCall或者myBind。我强烈建议把笔试中涉及的每个知识点都准备“三个层次”概念是什么、原理是什么、实际项目怎么用。以Object.create为例第一层是“创建一个新对象原型指向传入的对象”第二层是“它与字面量和构造函数创建对象的区别”第三层是“在实现继承或原型式继承时怎么用”。准备到这个层次面试官再怎么追问你都不慌。4.3 准备节奏与资料清单校招准备的时间线我一般建议按“基础三个月冲刺一个月”来安排。基础阶段的任务是刷完JavaScript高级程序设计红宝书、CSS权威指南、图解HTTP每天做20道牛客网前端题。冲刺阶段的任务是做近三年的真题卷、把高频手写题全部默写一遍、针对目标公司做题库专项训练。资料清单我精简一下别贪多红宝书看ES6之前的部分MDN当字典查廖雪峰JavaScript教程适合快速过一遍语法再用“前端面试题汇总”类GitHub仓库查漏补缺。不要囤资料一套吃透比十套走马观花有用得多。4.4 视频网站场景的面试延伸题回到爱奇艺这家公司本身。既然是视频网站面试官会额外关注跟视频相关的性能优化场景。比如笔试里考了HTTP缓存现场面就可能变成“一个视频页面首屏要加载十几个接口数据你会怎么做缓存优化”。这种题目没有标准答案但要能说出首屏接口用Cache-Control设置强缓存数据变化用ETag做协商缓存图片等静态资源用CDN加Cache-Control: max-age配合版本号。再比如视频播放页面最容易出现内存泄漏面试官会问怎么排查。你需要能说出Chrome DevTools的Memory面板用法知道怎么录制堆快照、怎么对比两次快照找泄漏对象还要知道常见的泄漏场景事件监听器未移除、定时器未清除、全局变量挂载过多。我建议在项目经验里准备一个“性能优化”的真实案例不要是课程作业那种而是能说出具体量化效果的比如“优化后首屏加载时间从2.3秒降到1.1秒”。5. 常见问题与排查技巧实录5.1 时间分配的典型误区与应对方案不少同学笔试翻车不是因为不会而是因为时间分配出了问题。爱奇艺这套卷子90分钟选择题和编程题分值差不多但很多人前60分钟都耗在选择题的纠结里后面两道编程题只够写一题的量。我的建议是拿到卷子先花两分钟扫一遍全卷评估题量、难度和分值分布然后按照“先易后难、先分高后分低”的原则答题。选择题遇到卡壳超过1分钟的先标记跳过最后再回来。简答题能写出关键词就给分所以先列提纲、再补充解释。编程题一定要先写思路再写代码有时候阅卷人看你的注释和思路说明就能给一半分。如果你在笔试中总感觉时间不够用一定养成考前计时模拟的习惯把答题节奏练成肌肉记忆。5.2 编程题常见错误对象引用、作用域和边界条件手写代码最容易出错的三个地方一个是深拷贝时对象循环引用导致栈溢出一个是防抖函数的this没处理好一个是算法题没考虑空数组和边界情况。这几个问题在爱奇艺的编程题里也都可能踩到。我写代码的习惯是写完之后马上检查三件事——边界条件、空值处理、时间复杂度。很多笔试暴露出来的问题不是思路不行而是写得太快没有检查。另一个常见问题是变量名。笔试代码阅卷人一天看上百份卷子如果你变量名是a、b、c读起来非常痛苦。我的习惯是使用有意义的命名比如resultArr、taskQueue、debouncedFn。虽然不会直接加分但能大幅提升代码的可读性间接影响印象分。5.3 面试后续延伸追问的典型方向笔试结束后面试官可能拿你的编程题做现场追问所以要对自己的答案“留一手”。比如你写了一个深拷贝面试官会问“如果对象里有函数、undefined、Symbol你的拷贝会怎么处理”。不用慌承认基础版不考虑这些就行重点是能补充说明“通用性的深拷贝很难完美实现需要结合场景取舍”。面试官还可能拿你笔试里的填空题做文章。比如你填了“Object.defineProperty无法监听数组的变化”面试官就会追问“Vue 2是怎么解决这个问题的”。答案是Vue 2重写了数组的7个方法push、pop、shift、unshift、splice、sort、reverse在方法内部触发更新。能答到这一层说明你不仅是背了结论真去看过源码。我在实际指导同学的过程中发现笔试复盘的价值远大于刷十套新题。爱奇艺这套2018年的卷子技术点放到今天依然是前端面试的核心范围只是问得更深了。把每道题背后的原理吃透比追逐所谓“新知识点”更重要。前端这行看起来技术迭代快但真正的底层能力还是JavaScript功底、网络基础、算法思维和代码规范这四块扎实的人走到哪里都不会慌。