这套题当年刷过的人应该不少爱奇艺2018秋季校招前端工程师第二场放在今天看依然是很好的基础能力自测样本。我前阵子又翻出来重做了一遍发现很多考点并没有过时只是换了个包装继续出现在现在的面试题里。这篇文章就把这套笔试的考察逻辑拆开来讲顺便聊聊我在复盘过程中总结的一些复习方法想投视频类互联网公司或者正在准备前端校招的朋友可以对照着查漏补缺。1. 为什么一套几年前的校招笔试题还值得反复看1.1 从“第二场”看大厂校招的出题节奏很多人看到“第二场”这个标注第一反应是“不就多一场考试嘛”但放在校招场景里这个信息其实挺关键的。爱奇艺这类体量的公司秋季校招通常不只有一场笔试而是分批次滚动安排。第一场往往承担“广撒网”的功能题目会更偏向基础覆盖面第二场开始题目会适当加入一些区分度更高的内容用来筛选出真正有前端思维、而不只是背过八股文的候选人。从出题节奏来看第二场笔试的定位通常是“基础为主、进阶为辅”。也就是说大部分题目保证科班或者自学过一段时间的同学能拿基础分但总有一两道题是用来拉开差距的比如事件循环的嵌套输出题、手写实现某个API的编程题、或者需要结合浏览器渲染原理来分析的问题。复盘这套题的意义不在于“背答案”而是通过题目的分布反推大厂在前端岗位上到底看重什么能力。1.2 整套题的题型分布与考察重心结合当年参加过的同学反馈这场笔试的题型大致是单选、多选、填空、简答和两道左右的手写编程题。考察范围集中在HTML/CSS基础、JavaScript核心机制、浏览器工作原理、网络协议以及一部分数据结构和算法。这种分布和很多中小型公司的笔试不太一样小公司更爱直接考框架API背诵比如“Vue的computed和watch区别”这种送分题。而爱奇艺这场的重心明显放在“前端工程师对浏览器和JS引擎的理解深度”上框架题反而占比不高即使考到Vue或React也是从响应式原理、虚拟DOM diff等底层角度切入。这说明出题人默认你能熟练使用框架他们更想确认的是你脱离框架之后还能不能写出靠谱的代码。2. 基础层考点HTML/CSS和浏览器机制是怎么出题的2.1 CSS布局与盒模型看似送分实则暗藏陷阱CSS部分在笔试里通常不会太难但得分率反而不高原因是很多题用“代码运行结果”的方式来考稍不注意就会掉进细节的坑里。我印象比较深的一类题是盒模型宽高计算。题目会给你一个div设置width、padding、border然后问你实际渲染宽度是多少。如果用标准盒模型box-sizing默认值是content-box那实际宽度就得把padding和border加上去如果设置了box-sizingborder-box那width本身就包含了padding和border。这类题的陷阱在于很多人记得两种盒模型的区别但一放到具体的多层嵌套场景中就容易算错。比如父元素宽度300px子元素设置width100%再加padding结果子元素实际宽度超过父元素导致布局溢出。这种问题在笔试里出现考察的不只是记忆而是你有没有真正在项目里遇到过“宽度溢出”这种经典Bug。我的建议是复习CSS时不要只看属性定义最好自己在浏览器里把标准盒模型和怪异盒模型的渲染差异实测一遍用DevTools看一下计算后的实际宽度记忆会深刻很多。2.2 浏览器渲染与事件循环视频网站最看重的性能考点爱奇艺的核心业务是视频所以笔试中对浏览器渲染性能相关的考点非常重视。其中“重排”和“重绘”是高频题目常见的问法是“以下哪些操作会触发重排”“如何减少重排对性能的影响”。这类题看起来是纯背知识点但往深了问就会涉及渲染管线的细节比如样式计算、布局、绘制、合成分别发生在哪个阶段CSS动画和JavaScript操作样式在性能上有什么差异。我记得有一套题里给了一段操作DOM的代码要求判断触发了多少次重排。很多人会忽略一个关键点读取某些属性比如offsetHeight、getComputedStyle会强制浏览器刷新渲染队列导致原本可以合并的重排被提前执行。这就是典型的“知道概念但不会应用”如果你只在八股文里背过“读写分离”四个字没有理解背后的渲染队列机制遇到这种稍微变形的题就会懵。事件循环也是这场笔试的重头戏。关于setTimeout、Promise、async/await的执行顺序几乎每场前端笔试都会考但爱奇艺这场的难度会更高一些比如给出一段包含微任务嵌套微任务、宏任务里再创建宏任务的代码要求写出完整输出顺序。很多人能答对第一层但到了“微任务队列中又产生新的微任务会继续清空队列再执行下一个宏任务”这个层级就乱了。这块没有捷径建议把事件循环的源码执行逻辑彻底搞懂而不是只背“微任务先于宏任务”这种口诀。3. JavaScript核心考点从作用域到异步笔试最爱的“八股”原型3.1 作用域、闭包与this指向为什么这类题永远不过时JavaScript的作用域和闭包是校招笔试的常青树爱奇艺这场也不例外。常见考法是给一段代码问你输出什么然后解释为什么。比如经典的这个for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }答案是连续输出5个5。很多人知道这个结果但解释不清为什么。这里涉及两个核心点var声明的变量是函数作用域不存在块级作用域setTimeout的回调函数在循环结束后才执行此时i已经变成5。如果把这个i改成let声明输出就会变成0到4因为let每次循环都会创建一个新的绑定。这类题考的就是对“变量提升”和“闭包捕获变量”本质的理解。但笔试不会满足于这种简单版本它会在闭包上继续加码比如用闭包实现一个计数器、实现防抖节流函数或者写一个函数要求只能被调用一次。这些题目在实际开发中都有对应场景爱奇艺的视频播放器组件里就有大量类似的封装逻辑。所以复习闭包时我建议把“闭包可以用来做什么”和“闭包可能带来什么问题”当成一对问题来理解这样面试官追问“闭包会导致内存泄漏吗”的时候你才能接得住。this指向的判断也是必考内容。普通函数调用、对象方法调用、call/apply/bind显式绑定、new调用分别对应不同的this指向规则。有一些题目会把箭头函数混进来考查箭头函数没有自己的this它会捕获定义时外层作用域的this。这类题如果只靠死记口诀很容易翻车比如“对象方法里嵌套一个箭头函数这个箭头函数里的this指向什么”很多人会误以为指向对象实际指向的是对象所在的外层作用域。3.2 原型链与继承手写实现题的高频套路原型链是前端笔试里套路最固定的一类题但区分度很高。简单的考法是给一个对象让你沿着原型链找属性判断输出。进阶的考法是让手写实现某种继承方式而且要写出多种方案并且说明优劣。爱奇艺这场笔试对继承的考查基本覆盖了原型链继承、构造函数继承、组合继承、ES6 class继承。其中最值得关注的是组合继承和寄生组合式继承的区别。组合继承的写法是子类构造函数里调用父类构造函数同时把子类的原型设置为父类的一个实例这样虽然能继承实例属性和原型方法但会导致父类构造函数被调用了两次子类原型上会有一份多余的父类实例属性。寄生组合式继承就是为了解决这个问题通过Object.create来建立原型关系只在子类构造函数里调用一次父类构造函数这也是ES6 class继承内部使用的方案。手写这类题的时候很多同学容易在“子类构造器里调用父类构造器时this的指向”上出问题。比如function Parent(name) { this.name name; } function Child(name, age) { Parent.call(this, name); this.age age; }这里Parent.call(this, name)的作用是把父类构造函数里的this指向子类实例这样父类定义的实例属性才会挂到子类实例上。如果不写这行子类实例上就不会有name属性。笔试里经常会把这种细节单独拎出来考提醒你“继承不是单纯改个原型就完了”。3.3 异步与事件循环题目怎么把“简单问题”问复杂异步编程在爱奇艺这类重交互、重数据请求的场景中非常关键。笔试里除了事件循环顺序还经常考Promise的状态变化、Promise.all和Promise.race的行为差异以及async/await的异常处理。我印象比较深的一道题是问Promise构造函数里的代码是同步执行还是异步执行。答案是同步的Promise构造函数里的executor函数会立即执行而then里注册的回调才是异步执行。很多人会在这上面栽跟头因为平时写代码时看到Promise就认为是异步的没仔细区分“Promise本身的执行时机”和“then回调的执行时机”。进阶一点的题目会考async/await的实现机制比如问“await后面的代码是在微任务里执行的吗”。严格来说await会把它后面的代码包装成Promise.then的回调所以可以理解为微任务。但更准确的描述是await会暂停当前async函数的执行把后续代码放到微任务队列中继续执行。笔试如果出到这种程度说明题目在考察你是否理解async/await的本质而不只是会用。4. 工程化与框架Vue/React和构建工具在笔试里的常见考法4.1 框架核心概念笔试怎么考响应式原理、生命周期、diff爱奇艺这场笔试的框架题难度属于“会日常使用的人能答但答得深不深立刻见分晓”的类型。以Vue为例高频考点是响应式原理。当年的Vue 2还在用Object.defineProperty题目会问“为什么Vue 2无法检测到对象属性的新增和删除”答案是因为defineProperty拦截的是已有属性新增属性没有经过getter/setter的转换所以不会触发视图更新。解决方法是使用Vue.set或者直接重新赋值整个对象。如果考到Vue 3就会变成Proxy相关的问题。Proxy可以直接代理整个对象包括属性新增、删除、数组索引变化所以Vue 3不需要Vue.set这样的API了但Proxy带来的代价是兼容性问题不支持IE。框架题考到这一层其实是在考察你的技术选型能力和对框架演进的理解而不只是死记API。React阵营的常考题是setState是同步还是异步。这个问题直接把一堆人绕晕。答案是在React的事件处理函数中setState是异步的多次调用会自动批量合并更新但在setTimeout、原生事件、Promise回调里它是同步的。React 18之后自动批处理覆盖了更多场景但基本思想没变。笔试里考这个是想确认你有没有真正理解React的更新队列机制而不是单纯背“异步”两个字。4.2 webpack与构建优化从配置到性能考点的变形前端工程化在笔试中的占比通常不会太高但爱奇艺这类大厂会考一些webpack相关的基础题集中在“loader和plugin的区别”“hash、chunkhash、contenthash的区别”“如何做代码分割”这几个方向。loader和plugin的区别是一个经典问法。简单来说loader是文件转换器把非JS模块转换成webpack能理解的模块plugin是生命周期钩子在webpack运行的各个阶段做额外的事情比如打包优化、资源管理、环境变量注入。笔试里常见的变形是给你一段webpack配置让你判断某个功能应该用loader还是plugin实现比如压缩JS应该用terser-webpack-plugin而处理ES6语法应该用babel-loader。构建优化相关的问题爱奇艺的题风格比较务实会让你分析一个视频站点首屏加载慢可以从哪些角度优化构建产物。答案通常包括路由懒加载、第三方库单独打包并利用缓存、开启Gzip压缩、图片资源优化、通过contenthash让长效缓存的资源复用。这些内容在项目里都实操过的人回答起来会很有条理如果只是背过八股文说的点会很散缺乏主次。4.3 HTTP与前端缓存视频站点场景下的高频考点由于爱奇艺的业务特性HTTP和缓存相关的题目在校招笔试中占比很高。常见考点包括HTTP缓存机制强缓存和协商缓存、HTTP/1.1和HTTP/2的区别、HTTPS的握手流程、常见状态码的含义。HTTP缓存是重中之重。笔试喜欢用实际场景出题比如“用户在视频网站刷新页面时哪些资源会命中强缓存哪些会命中协商缓存”。强缓存和协商缓存的区别在于强缓存命中后浏览器不会发任何请求直接从本地缓存读取资源相关响应头是Cache-Control和Expires协商缓存命中后浏览器会发一个请求带上If-Modified-Since或If-None-Match由服务器决定返回304还是200。理解缓存的关键不只是背响应头字段而是要理解它和前端发布流程的关系。比如为什么静态资源文件名要带hash因为hash变了代表文件内容变了可以绕过浏览器缓存加载新版本这就是contenthash存在的意义。笔试里如果能把缓存机制和发布部署场景结合起来讲分数会明显不一样。5. 网络与计算机基础前端工程师绕不开的“内功”5.1 从输入URL到页面展示一道贯穿始终的综合题“在浏览器地址栏输入一个URL到页面展示出来中间发生了什么”是前端笔试的经典大题。爱奇艺这场基本必考而且把这道题拆散成了多个小题分布在选择和简答里。完整的链路包括域名解析DNS查询、建立TCP连接三次握手、发送HTTP请求、服务器处理请求并返回响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合并生成渲染树、布局、绘制、合成。面试官会根据你的回答不断追问细节比如DNS查询过程中浏览器有哪几层缓存、TCP握手为什么是三次而不是两次、HTTPS的非对称加密和对称加密是怎么配合的、渲染过程中遇到script标签会怎样。这类题最怕的就是面试官问“JavaScript脚本为什么会阻塞页面渲染”。这是因为JavaScript可以修改DOM和样式表如果浏览器在解析HTML时遇到script标签必须停下来先下载并执行脚本确认脚本不会改动页面结构才继续解析后面的HTML。这也是为什么会有defer和async属性的原因。所以每次笔试或面试前把这条链路的每个环节都过一遍基本不会出现“答不上来”的情况。5.2 手写算法与数据结构笔试里的编程题到底在筛什么这场的编程题难度不算很高但非常贴近业务。常见题型包括数组去重、深拷贝、防抖节流、字符串反转、括号匹配、求数组最大值以及一些简单的二叉树遍历。深拷贝是出现频率最高的一道题。很多人能写出浅拷贝的JSON.parse(JSON.stringify(obj))版本但被问到“这个方案有什么缺陷”时就卡住了。缺陷主要有三个无法处理undefined、function、Symbol类型的属性会直接丢失遇到循环引用会报错Date、RegExp等特殊对象会被转换成普通对象。校招笔试要求手写深拷贝通常至少要写一个递归版本并且考虑循环引用问题用WeakMap做缓存。如果能把WeakMap版本写出来在笔试中已经属于中上水平。防抖和节流也非常值得花时间手写。防抖是“最后一次触发后延迟执行”节流是“一定时间内只执行一次”。笔试里经常要求写出实现并且说明使用场景。我见过很多答案能写出来但解释不清楚“为什么防抖要保存timer变量”其实就是利用闭包延长timer的生命周期。能把这个讲清楚说明你是真的理解闭包的实际应用。6. 复盘之后给现在的求职者几句实在话6.1 真题复盘的正确姿势拿到一套往年笔试题很多人的第一反应是“把题目做完对一下答案”。如果你的目的是查缺补漏这样做效率很低。我的建议是把每道题当成一个知识节点的入口做完一道题后把涉及的知识点整理出来想想这个知识点还能怎么变着法考。比如面对深拷贝这道题你可以做一个扩展练习JSON方法有什么问题递归写法要注意什么循环引用怎么解决Map和WeakMap有什么区别这样一道题就能带出四五个知识点复习效率会有明显提升。我之前整理这套爱奇艺笔试题的时候用这个方法把所有相关知识点都串了一遍后来参加其他公司的笔试很多题目虽然没见过但背后的知识点都是熟悉的。6.2 避坑清单那些让面试官一眼看穿的问题从这套笔试的反馈来看有几个典型的失分点值得特别注意。第一是“知其然不知其所以然”比如知道Vue的响应式原理是Object.defineProperty但说不清为什么数组的push、pop方法也能触发视图更新这就是没深入了解框架内部对数组方法的拦截重写。第二是“写代码没有细节”比如手写防抖时没考虑this指向和event对象的透传这在笔试判卷时会被视为理解不到位。第三是“不会解释方案取舍”比如让谈谈构建优化的措施只把能想到的都说一遍不说适用场景和优缺面试官会觉得你只是在背名词。如果复习时间有限优先级应该是JavaScript核心机制大于框架原理大于构建工具大于算法题。爱奇艺这套笔试题也印证了这一点JS基础相关的题目数量最多难度也最大。把事件循环、闭包、原型链、异步、手写题练扎实比背十个框架API更管用。6.3 最后分享一个小技巧我在复盘这套题时养成了一个习惯每一道错题都会在浏览器里写个demo把代码跑一遍观察实际输出和渲染结果再对照自己的错误答案找到是理解问题还是记忆偏差。很多题你看答案觉得自己懂了但亲手在控制台里执行一遍会发现“原来和我想的不一样”。这种亲手调试出来的记忆比看十遍答案都牢固。前端校招笔试的考点翻来覆去就是那些唯一变化的是考法。2018年的爱奇艺第二场和2026年的题目核心底层原理不会变变的只是框架版本和工具链。把基础打牢任何一套笔试题都能从容应对。