每年九十月秋招战场就打响了。2018年我投了爱奇艺的前端工程师岗位笔试被排在第三场。当时人在学校机房旁边坐了一圈同样抱着笔记本电脑啃笔试的同学屏幕上牛客网倒计时一开整个教室只剩下敲键盘的声音。那一场给我的印象非常深不光是题型扎实更在于题目明显带着视频网站的业务影子不像有些公司出的卷子完全跟业务脱节。考完之后我特意把能记住的题目复盘了一遍后来也因为这些复盘在后续几场面试里少踩了很多坑。这篇就把我当时对爱奇艺第三场校招笔试的记录和思考整理出来。内容不涉及所谓的“真题泄露”而是以一个参加者的视角把题型、考点、答题思路和踩坑经验讲清楚。适合正在准备前端校招的人参考也适合工作了两三年想回头补基础的人查漏。场景题的部分尤其值得细看那类题目直接决定了你简历上的项目经验能不能在面试官眼里立住。1. 爱奇艺第三场笔试全貌时间安排、题型结构与淘汰逻辑先把我记得的笔试基本信息摆出来。2018年爱奇艺秋季校招前端岗分成多场在线笔试第三场大概是九月中下旬开的场次用的平台是牛客网整场时长我记得是120分钟。题量不算夸张但内容跨度很大单选、多选、编程、场景问答全都有基本是按“基础过关 → 编程动手 → 业务思维”三层递进设计的。1.1 题型分布与我当时的时间分配印象中整个卷面可以分成四块模块大致题量分值占比我的建议用时单选题15道左右20%20分钟多选题8道左右15%15分钟编程题2道30%50分钟场景设计题1道35%30分钟单选题和多选题主要考基础覆盖了HTML、CSS、JavaScript、网络协议、浏览器原理和少量ES6语法。编程题是两道一道偏纯算法一道偏前端手写实现这里分值权重很高做不出来基本就失去竞争力了。最后一道场景设计题是开放性命题给一个和视频业务相关的性能或交互场景让你写方案。这道题没有标准答案但最能看得出一个人有没有真正写过前端。我当时的策略是先花了不到20分钟把所有选择题扫完有把握的直接填没把握的跳过不恋战。编程题放在中间做因为那时候脑子最清醒。场景题放到最后即便时间不够也可以用框架性的语言把思路写完整至少能拿一部分分。这个安排很重要我见过有同学在选择题上反复纠结最后编程题只写了一半整体分数就被拉下来了。1.2 第三场与前两场的差异虽然没法看到前两场的完整题目但从当时牛客网讨论区、论坛里的反馈来看第三场明显比前两场更侧重编程手写和业务理解。前两场还有不少框架基础题比如Vue的生命周期、Vuex的使用第三场几乎没怎么出现框架题反而把重点压在了原生JavaScript能力和浏览器机制上。我后来想想这其实也是大厂校招分批次笔试的惯用策略前几场先筛掉基础不牢的人后面场次再加大难度考察候选人是否具备独立解决问题的底子。框架这种东西培训三个月就能上手但事件循环、作用域链、渲染机制、跨域方案这些原生基础不是临时抱佛脚能补起来的。爱奇艺的第三场笔试摆明了是把“基础扎实”放在第一优先级。1.3 淘汰逻辑编程题决定上限选择题决定下限参加完这场笔试我对校招筛选逻辑有了一条很清晰的认识选择题正确率决定你能不能进面试编程题完成度决定你能不能拿到好的评级。选择题占比虽然只有35%但面试官手里有一张成绩单选择题正确率过低会直接被判定为“基础不过关”简历写得再花哨也很难有下文。编程题则是区分度最大的部分两道题哪怕只完整AC一道比两道都“写了一半”强得多。所以我很不建议在选择题上追求满分把时间控制好确保编程题有充足时间调试才是通过笔试的关键。2. 基础题复盘样式塌陷、事件循环、缓存策略里的高频考点考完回忆选择题时我发现一个规律单选题喜欢考“结果是什么”多选题喜欢考“哪些选项正确”而这两类题都很容易在细节上设置陷阱。比如CSS的margin塌陷、JavaScript闭包里的变量引用、Promise和setTimeout混用时的执行顺序这些平时写业务不一定会特意关注但笔试里几乎是必出。2.1 CSS高频点BFC、flex布局与垂直水平居中单选题里有好几道跟布局相关。印象最深的是一道关于清除浮动和BFC的题。题目给了一段代码父元素没有高度子元素全部float问怎么让父元素包住子元素。选项里有overflow: hidden、display: flow-root、伪元素clearfix、给父元素设固定的height。前三个在特定条件下都能实现但考点是“哪种方案不会产生其他副作用”。overflow: hidden在某些场景下会裁剪内容但题目场景没有需要溢出的部分所以也能选。这种题真正的分水岭在于你知不知道BFC的形成条件和作用。这里插一句基础知识BFCBlock Formatting Context一旦形成它就会把内部元素的浮动、外边距合并都圈在自己的区域内所以父元素只要触发了BFC就能包住浮动子元素。经典的触发方式有float、overflow非visible、display: inline-block、position绝对值、display: flow-root。我当时专门做过一段时间的BFC专项练习就是因为那年的校招笔试题里这个知识点反复出现不止爱奇艺一家考了。2.2 JavaScript单题闭包、this指向与作用域链选择题里有一道典型的闭包题代码大概是这样的for (var i 0; i 5; i) { setTimeout(() { console.log(i, this.a); }, 100); } var a 10;看似简单但考点不止一层。首先var声明的i是函数作用域循环结束之后i已经变成了5所以setTimeout回调里打印的i全是5。其次this指向取决于回调函数所处的执行上下文。这里用的是箭头函数它的this在定义时就被绑定到外层作用域了也就是全局对象所以this.a是10。如果换成普通function非严格模式下this指向全局严格模式下是undefined。这道题我一开始差点答错因为第一反应是“这不是经典的循环作用域问题嘛改成let就好了”但仔细一看它同时考了this指向就警惕起来了。做校招笔试的时候一定要把每一道题的关键词都拆出来看特别是“箭头函数”“严格模式”“var/let”这种修饰词每一个都可能改变最终答案。2.3 网络与浏览器HTTP缓存、状态码、从URL到页面展示多选题这块考得比较综合。网络部分出现了强缓存和协商缓存的区分题选项里有Cache-Control、Expires、ETag、Last-Modified。正确的组合应该是Cache-Control和Expires决定是否需要重新请求资源ETag和Last-Modified则用于服务器端验证资源是否发生变化。浏览器原理部分考了输入URL到页面展示的完整过程。这个题后来我经常拿来问实习生DNS解析、建立TCP连接、发送HTTP请求、服务器返回HTML、浏览器解析HTML构建DOM树、CSSOM树、合成渲染树、布局、绘制、合成。爱奇艺的选项里还混入了一个“先执行JavaScript再解析HTML”的备选项用来迷惑人。实际上JavaScript的执行时机依赖script标签的位置和是否带defer/async不是机械地跟在解析流程后面。我当时把“HTML解析是边解析边构建”这个概念写在了场景题答案里后来觉得这确实是个高频考点。2.4 多选题的边界陷阱多选题爱考边界情况比如typeof null、Array.isArray与instanceof Array的差异、稀疏数组的map跳过机制、对象键的隐式类型转换。有一道题是“以下哪些数组方法会跳过空位”我用排除法勉强答对后来回去查资料才发现forEach、map、filter、reduce这类方法确实会跳过稀疏数组的空位而Array.prototype.find则不会跳过它会返回undefined。这种细节如果你没有专门看过MDN文档单靠平时写代码很难总结出来。所以我的建议是校招前一个月每天抽半小时刷MDN上的方法文档重点看“Description”和“Edge cases”章节比背题有效得多。3. 编程题解题实录手写代码时最容易丢分的三个细节编程题是整场笔试的压轴部分。爱奇艺这两道题不属于那种需要背复杂模板的难题但非常考验代码习惯和边界意识。我记得第一道是字符串处理相关的算法题第二道是前端场景手写题。考完后我在牛客网讨论区看到不少人在吐槽第一道题说思路想得到但实现时数组越界了。这其实正好印证了手写代码的难点不在思路而在细节。3.1 第一道编程题字符串压缩与解压的模拟题目大意是给一个类似“a3b2c4”的字符串要求把数字字符替换成前面的字母重复出现也就是输出“aaabbccccc”。如果压缩串里出现“a10b1”这种两位以上的数字需要把连续数字当成完整数字解析而不是拆成一个个字符。这个题核心考察两个能力字符串遍历和数字拼接。我当时的解法是先遍历字符串用一个变量保存当前字母然后循环读取后面的连续数字字符把它累加成真实数字再用循环把字母追加到结果里。边界情况是字符串以数字结尾、数字为0、以及连续多个字母不跟数字比如“ab2c”到底应该输出“abbc”还是“abbc”需要根据题目定义走我印象里当时是在“每个字母后面都可能不带数字”的假设下处理的。真正让我差点丢分的是数字拼接那一步。写完第一版代码我在本地测试“a12b1”结果输出了一串a后来一查发现是把字符‘1’和‘2’当成ASCII码在累加而不是转成数字累加。所以处理多位数字时一定要记得用num num * 10 (char.charCodeAt(index) - 48)这种方式。这个问题非常基础但在笔试的紧张环境里很容易犯。3.2 第二道编程题实现一个带过期时间的localStorage第二道题是一个前端手写实现要求设计一个带有过期时间的存储方案可以基于localStorage实现需要提供get、set、remove三个方法并且当数据过期后get要返回null。我当时一看题干就觉得这个题很“爱奇艺”因为视频网站确实经常要做播放进度、搜索历史、用户偏好这类本地缓存而且这些数据在很多场景下是有时效性的。我采用的方案是把值和过期时间戳一起存进去let prefix exp_store_; function set(key, value, ttl) { const wrapped { value: value, expire: Date.now() ttl }; localStorage.setItem(prefix key, JSON.stringify(wrapped)); } function get(key) { const raw localStorage.getItem(prefix key); if (!raw) return null; const parset JSON.parse(raw); if (Date.now() parset.expire) { localStorage.removeItem(prefix key); return null; } return parset.value; } function remove(key) { localStorage.removeItem(prefix key); }这个实现思路本身不复杂我看讨论区里不少人也想到了但有几个坑他们会漏掉。第一是key冲突问题如果项目里原本就在用localStorage存别的数据直接用一个普通key可能把业务数据覆盖掉所以加前缀是必要的。第二是JSON.parse的容错如果存储值被其他逻辑改坏了JSON.parse会直接抛异常get方法就崩了所以当时我在正式代码里加了try/catch。第三是set方法的类型处理ttl的单位到底是秒还是毫秒题目没有明确需要自己定义好并在注释里说明这个细节我特意写了上去算是个加分项。3.3 手写题丢分的三个高频原因结合这道题我总结了一下手写代码容易丢分的点。第一是边界条件写不全比如get空值、过期边界、同一key被重复set很多人在写的时候只覆盖了正常路径没有覆盖异常路径。第二是复杂度没有交代如果题目内部有循环面试官希望看到你说明为什么这里不能优化成O(1)而不是闷头写一堆自己都说不清的代码。第三是代码风格不干净变量名随意、大量魔法数字、不写注释这些在笔试评分里会被扣分因为面试官看代码第一眼就是看“像不像一个合格工程师的代码”。4. 场景设计题长视频网站的前端挑战是如何变成考题的爱奇艺第三场笔试最后那道场景设计题我个人认为是整张卷子里信息量最大的一道。题目大概意思是假设你负责视频播放页用户在首页信息流里快速连续点击多个视频封面播放页面临大量视频信息展示和播放器初始化你会怎么设计方案来保证页面流畅不卡顿。这道题没有标准解但答题时如果你能从性能指标体系、技术方案选型和工程落地多个角度展开得分会明显不同。4.1 先拆问题再给方案我当时审题第一件事是把问题拆成两个子问题一个是信息流快速点击带来的页面跳转和列表状态管理压力另一个是播放器初始化的性能开销。拆完之后再针对每个子问题给方案结构就清晰了。针对信息流快速点击核心思路是减少重复渲染。比如在首页信息流使用虚拟滚动或列表分片渲染保证同时只有可视区附近的视频卡片真实存在在DOM里。点击封面跳转播放页时可以用路由懒加载而不是在应用初始化时就把播放器组件打包进来。直播和点播场景都不需要首屏加载所有播放器功能可以等用户进入播放页之后再通过动态import加载播放器内核相关代码。4.2 从性能指标出发做优化我当时的回答里提到了性能指标但不是空泛地用“首屏时间”这种词。我分了几个阶段页面跳转阶段关注切换耗时和渲染阻塞播放器初始化阶段关注播放器内核加载时间和首帧可播放时间播放过程中关注掉帧率和内存占用。这样很自然地把方案和技术指标绑在了一起面试官能看出来你确实做过性能优化。具体做法上我提到了几个点。第一播放页框架用SSR或静态化方案提前生成首屏HTML减少客户端JavaScript执行时间让用户点进来的瞬间就能看到页面框架。第二对播放器所需的静态资源做CDN缓存和浏览器缓存尽量让重复进入播放页的用户命中强缓存。第三在播放器初始化时可以先渲染一个轻量的封面图或loading态同时异步加载视频信息接口等数据到位后再初始化播放器避免用户长时间盯着空白页。第四考虑Web Worker或requestIdleCallback处理一些非关键数据的计算任务避免阻塞主线程。4.3 视频网站特有的坑播放器实例复用这个点是我后来跟一个爱奇艺做播放器的朋友聊天时验证过的。播放页如果频繁进出播放器实例反复创建销毁会造成明显的卡顿和内存泄漏。所以更好的做法是维护一个播放器实例池进入时复用已有实例退出时不要立刻销毁而是暂停、清空资源、保留DOM引用让下一个视频快速接管。这种思路在桌面端弹窗播放、连续播放场景里尤其重要。我当时虽然没有针对这点写太多但在场景题的答案里提了一句“播放器实例不要频繁创建销毁建议复用”后来面试时被追问了这个点。如果你能在这个位置展开讲一下会显得你不仅懂前端框架还懂媒体业务的核心痛点。4.4 答题结构面试官喜欢什么针对这类场景题我总结了一个三段式答题结构问题拆解、方案选型、方案验证。问题拆解要具体把“怎么优化”拆成“哪些环节慢”。方案选型要有取舍说明你选择了什么、放弃了什么、为什么这么做。方案验证要说清楚用哪些指标判断效果。哪怕你的方案不够完整只要逻辑闭环面试官至少能确认你有系统化思考问题的习惯。不要一上来就写“首先我们要做性能优化”。这话说了等于没说。直接写“首页信息流快速点击场景下最大的性能瓶颈是列表渲染和播放器初始化我分两步解决”会好得多。开头有定点后面才有说服力。5. 从这份笔试题反推前端校招准备的重心应该放在哪考完之后我花了不少时间把爱奇艺这份卷子里的考点和当年其他大厂的笔试题放在一起横向对比发现重合度很高。与其一份接一份地刷题不如从题目里反推出各家公司的共同考察逻辑然后针对性地补齐短板。如果你现在还有三到六个月的准备时间我的建议是围绕下面四个方向投入精力。5.1 原生JavaScript永远是第一优先级爱奇艺这份卷子把大量分值放在原生JavaScript上闭包、作用域、this指向、事件循环、数组方法边界、手写实现。这些能力不需要依赖任何框架但却是你理解框架底层必不可少的前提。React和Vue的源码里大量用到了这些基础机制基础不牢的人一开始学框架能跑起来到了排查性能问题或解读源码时就完全懵了。我见过不少简历上写着“熟悉Vue源码”的应届生一问到defineProperty和Proxy的区别就答不出细节这种暴露速度在面试里是非常快的。我的建议是每天做三道原生JavaScript练习不限于算法多掺一些手写实现类题目比如实现bind、实现节流防抖、实现EventEmitter、实现深拷贝、实现Promise.all。这些题目和爱奇艺那两道编程题在考察维度上是同一个方向写出来的代码要能直接运行并且经过边界测试。5.2 算法与数据结构不用贪多但要刷透爱奇艺第一道编程题其实考的是字符串和数组操作属于基础算法范畴。面试里常见的排序、二分、链表反转、二叉树遍历这些也要会但前端岗不需要你背下所有的高级数据结构能做到“常见题能快速AC难题能给出部分解”就够了。刷题时注意不要只看输入输出要用手在纸上推演一遍过程理解每一步为什么这么写。比如LRU缓存这个题你光记住“用Map双向链表”没用你得理解为什么删除和移动节点必须是O(1)HashMap在这个结构里起什么作用。爱奇艺后面面试有一轮问到了缓存淘汰策略我还把这道笔试题里的思路带了进去答得相当顺。5.3 框架深度和项目经验要能呼应虽然第三场笔试没怎么考框架题但面试环节大概率会问。爱奇艺前端团队大量使用Vue这家公司技术栈上有比较明确的倾向。准备时至少要把一个框架的底层响应式原理、生命周期、组件通信方式、路由实现机制搞清楚并且能结合自己的项目说明在什么场景下选了它、踩过什么坑、最后怎么解决。项目不用多但一定要有一个可以讲半小时的完整项目。我当时准备的是一个视频站类的个人项目里面包含了列表页、播放页、搜索页、历史记录同步这些模块正好和爱奇艺的业务场景很像。面试时聊起来特别顺畅因为对方问的很多问题我都已经在自己的项目里实际解决过。5.4 关注业务场景不要在“纯技术”里画地为牢爱奇艺的卷子给你最大的提醒是大厂前端不是只写页面你服务的业务会影响你每天解决的技术问题。长视频网站需要处理大量媒体资源、长列表、播放器交互、缓存更新这些问题不会出现在普通的demo项目里。所以准备校招的时候如果你的目标公司是做内容平台、电商、视频或者工具类产品的最好提前了解一下他们业务场景下前端最大的挑战是什么然后尝试用其中一个方向来包装自己的项目。我当时最深的感受就是笔试不是考你背了多少面试题而是考你有没有在真实世界里动手做过东西。哪怕只是一个模拟的项目只要你踏实做了你在笔试里遇到场景题时自然有内容可以写。最后再聊一个细节。爱奇艺第三场笔试的场景题我当时的答案并不是最完整的那份后来复盘时发现视频网站这块的挑战远不止信息流和播放器初始化还包括播放器皮肤定制、弹幕模块的渲染性能、多机位切换、续播和进度记忆、甚至移动端的流量策略。每一个点拎出来都可以做成一个深度项目。如果你现在还有时间完全可以从里面挑一个方向自己做一个完整的实现出来然后用它作为面试里的核心项目。这样比做十个普通的管理后台项目有用得多。