爱奇艺2020校招前端方向笔试题第一场这套卷子我在网上翻过好几轮也帮几个学弟学妹做过完整复盘。说实话前端校招笔试的题库一年比一年卷但爱奇艺这套题放在今天看依然很有参考价值——它考察的知识点非常典型基础题占大头同时夹杂几道需要真正写过项目才能答好的场景题难度梯度拉得比较开。不管你是准备2026届秋招还是已经在实习想补基础这套题都值得拿来当自测清单。先说一下这套卷子的整体印象。爱奇艺前端笔试通常是90分钟题型分为单选、多选、编程题偶尔会有简答题。2020第一场整体风格偏“稳”不考偏门框架不玩文字游戏重点砸在JavaScript基础、浏览器工作原理、网络协议、CSS布局、以及常见前端框架原理上。编程题也不难基本是LeetCode Easy到Medium的区间但有个特点——非常讲究代码的完整性边界条件不处理好很容易丢分。下面我从题型结构、考点分布、典型题目拆解、备战时踩过的坑四个维度来复盘最后附一套我在实际复习中整理的高频考点对照表希望对正在准备校招的你有点实际帮助。1. 试卷整体结构与出题思路拆解1.1 题型分布与分值逻辑先说结论爱奇艺这套笔试题的题型分布是单选10题、多选5题、编程2题整体时间控制在90分钟。单选每题2分多选每题4分多选少选都不得分编程题每题20分。这个分值结构很能说明问题——选择题占60分编程题只占40分意味着选择题的正确率直接决定你能不能进面试。很多人备考时喜欢死磕算法题把大量时间花在刷LeetCode上结果笔试时选择题错得一塌糊涂。爱奇艺这套题就是个典型提醒前端校招笔试的基础题占比远比想象中高。选择题考察的是“你知不知道”编程题考察的是“你会不会用”前者是后者的地基地基不稳代码写得再花哨也白搭。1.2 考察范围与难度梯度从爱奇艺2020这套题来看考察范围可以分成五个模块JavaScript核心、浏览器与网络、CSS与布局、框架原理、编程题。难度梯度上单选题里大概有6道是“送分题”只要认真看过一遍《JavaScript高级程序设计》就能答对另外4道属于“陷阱题”考察的是容易混淆的细节比如和的隐式转换规则、var和let在循环中的区别、事件冒泡与捕获的执行顺序等。多选题是整套卷子的分水岭。爱奇艺的多选题很“狠”少选不得分这就要求你不仅知道哪个选项对还得确定其他选项一定错。这种题考察的是知识的确定性而不是模糊的印象。比如它可能会问“以下哪些方法会改变原数组”你光知道push、pop会改变不够还得确定map、filter不会改变任何一个选项犹豫了这题基本就丢了。编程题反而不是最难的。2020第一场的两道编程题一道是数组去重变种一道是字符串处理都没超出Easy到Medium的难度。但爱奇艺的编程题有一个特点要求的输入输出格式极其严格比如数组元素之间的逗号后面必须跟空格字符串不能有多余的引号。很多人算法思路对了却挂在输出格式上非常可惜。1.3 这套题对当下校招的参考意义可能有同学会问2020年的题现在2026年了还有参考价值吗我的回答是基础题的参考价值不仅没降低反而更大了。前端框架每年都在变Vue从2到3React从16到19但JavaScript的语言特性、浏览器的工作原理、HTTP协议的基础知识这些底层的东西几乎没变。现在很多公司笔试题越出越偏动不动就是“如何用Web Worker优化大文件上传”“如何设计微前端沙箱”但爱奇艺这套题就像一面镜子提醒你基础永远是第一关。事实也证明凡是这套题能拿到80分以上的候选人面试时基础问答环节基本都能对答如流。2. 核心考点深度解析JS基础篇2.1 数据类型与隐式转换几乎必考的送分题这套卷子里有至少3道题直接或间接考察JavaScript的数据类型和隐式转换。比如经典的[] ![]结果是true很多人第一次看到这个结果直接懵了。实际拆解一下![] // 布尔值 false因为空数组是truthy [] false // 当对象与布尔值比较时两边都转成数字 // Number([]) - 0Number(false) - 0 // 所以 0 0结果是 true这类题的套路就是“两侧都转成原始值后再比较”要注意null和undefined是特例它们相等但不会转成数字。我当时备考时特地把所有类型转换规则做了一张表贴在电脑前每天看一遍半个月后这类题基本不会错。还有一个高频考点就是typeof和instanceof的区别。typeof null返回object这一点是老坑了但2020这套题里它换了个方式考给你一个变量让你判断它的类型选项里有Object.prototype.toString.call()、typeof、constructor.name。这其实考的是如何准确判断类型而不是单纯背结果。实际工作中我们需要区分数组、日期、正则、纯对象时typeof根本不够用得靠Object.prototype.toString.call()Object.prototype.toString.call([]) // [object Array] Object.prototype.toString.call(new Date()) // [object Date] Object.prototype.toString.call(/test/) // [object RegExp]这个细节我在面试时也常被追问不只是笔试。建议你不仅记住结论还得能解释为什么Object.prototype.toString能区分这么多类型——因为它返回的字符串中包含了内部属性[[Class]]现在规范里叫[[Symbol.toStringTag]]。2.2 作用域与闭包理解不透就等着丢分作用域和闭包在爱奇艺这套题里考察得比较深。有一道单选题是这样的给一段代码里面有嵌套函数和var声明让你判断最后输出的值。这种题考察的是两点变量提升和词法作用域。var a 1; function foo() { console.log(a); var a 2; } foo();答案是undefined因为函数内部的var a会被提升到函数顶部但赋值不提升。执行console.log(a)时a已经声明但未赋值所以输出undefined。很多人被这个结果坑过原因就是没搞懂“声明提升”和“赋值不提升”的区别。闭包部分爱奇艺考了一道比较典型的题创建一个计数器函数要求每次调用返回的数字加1且多个计数器互不干扰。这题本质上就是考察闭包保存状态的特性function createCounter() { let count 0; return function() { count 1; return count; }; } const counterA createCounter(); const counterB createCounter(); counterA(); // 1 counterA(); // 2 counterB(); // 1实现本身不难难的是你要能说清楚为什么counterA和counterB互不干扰——因为每次调用createCounter都会创建独立的执行上下文count变量被各自的匿名函数闭包引用互不相通。2.3 事件循环与异步必须画出执行顺序爱奇艺这套题里有一道多选给了几段setTimeout、Promise、async/await混用的代码让选出正确的输出顺序。这类题现在基本是前端笔试的标配了但很多人还是会在await后面跟微任务的细节上翻车。核心规则其实不复杂同步代码先执行微任务Promise.then、queueMicrotask、await后面的代码在当前宏任务结束后、下一个宏任务开始前执行宏任务setTimeout、setInterval、I/O按时间顺序进入宏任务队列我拿到这类题的标准操作是先把代码里所有函数执行画成一张时间线图微任务用一条线宏任务用另一条线然后逐行按顺序推演。遇到await时记住它相当于把后面的代码放进.then里但await表达式本身是立即执行的。async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test(); console.log(4); // 输出顺序3, 1, 4, 2关键在于test()被调用时先同步执行console.log(1)遇到await Promise.resolve()右边的Promise是立即resolve的但await后面的代码会被放入微任务队列所以先输出3、1再输出4最后等同步代码执行完毕微任务队列清空输出2。这类题想拿全分没有捷径只能多画执行顺序图画出肌肉记忆。3. 核心考点深度解析浏览器与网络篇3.1 浏览器渲染流程笔试中的“背多分”爱奇艺这套题关于浏览器渲染考了两道选择题一题是问DOMContentLoaded和load事件的区别一题是问CSS会阻塞什么。这两题都属于典型的“背多分”——理解了就永远记得。DOMContentLoaded在HTML文档被完全加载和解析后触发不等样式表、图片和子框架完成加载load则要等所有资源都加载完成。这个区别看起来很基础但实际开发中经常被忽略。比如你想在页面加载后立即操作DOM用DOMContentLoaded就够了用load可能会白白等图片加载完影响用户体验。CSS阻塞这块要记住三个关键点CSS会阻塞渲染因为浏览器要等CSSOM构建完成后才能生成渲染树CSS不会阻塞DOM解析DOM和CSSOM是并行构建的CSS会阻塞script的执行因为脚本可能要读取样式第三个点是最容易被忽略的考点。如果页面里有外部CSS样式表和script标签浏览器会等样式表下载并解析完再执行脚本这个机制是为了避免脚本读取到过时的样式。但很多人默认“JS是阻塞的、CSS不是”结果笔试时选错了方向。针对这套题HTML、JS、CSS三者的加载执行关系里面整理了一张很清晰的流程图建议你把这套题和这张图配在一起复习理解会更深入。3.2 HTTP缓存与状态码爱奇艺爱考公司都爱考HTTP缓存是前端笔试的常驻嘉宾爱奇艺这套题也不例外。它考了一道关于Cache-Control和ETag优先级的选择题。正确答案是Cache-ControlETagLast-Modified但真正理解这个优先级的人不多。简单说下机制浏览器发起请求时先查强缓存命中就直接用本地副本不发请求没命中就带上协商缓存的字段If-None-Match或If-Modified-Since服务器判断资源有没有变化没变化返回304有变化返回200和新资源。关于状态码笔试里最常见的是问你“301和302的区别”或者“304表示什么”。301是永久重定向302是临时重定向304是协商缓存命中。有一次我看到有人在网上问“为什么我设置了Cache-Control: max-age86400刷新页面还是发请求了”——这个问题在笔试现场也容易变成选项陷阱。答案很简单强缓存只在“非主动刷新”时生效用户按F5刷新时浏览器会带着缓存协商头重新验证这不是缓存配置错了而是浏览器的设计行为。理解到这一层你就不会被出题人绕进去了。3.3 从输入URL到页面展示必备的整体链路题爱奇艺这套题虽然没有直接以编程题的形式考“从输入URL到页面展示”但选择题里有一道问“DNS解析发生在哪个阶段”。这种题看起来零散其实背后考察的是一条完整链路DNS解析→TCP连接→HTTP请求→服务器响应→浏览器解析渲染→资源加载。我强烈建议你把这条链路完整地写一遍写成自己的话至少500字以上。因为面试官几乎必问这道题而且他可以通过追问任何一个环节来测试你的深度。比如你提到DNS解析他会追问“DNS缓存有哪几级”你提到TCP建立连接他会追问“为什么是三次握手而不是两次”你提到底层资源加载他会追问“什么是关键渲染路径”这条链路不是背一遍就完事的东西它是你前端知识体系的骨架。把骨架搭好了后续所有的知识点都能挂上去。4. 核心考点深度解析CSS与框架篇4.1 CSS布局与BFC手写页面躲不开的题CSS部分爱奇艺这套题考了flex布局、定位方式和BFC。其中BFC那道题很有意思它给了一段代码父元素没有设置高度子元素全部float: left问父元素高度是多少并给出几种清除浮动的方案。答案是父元素高度塌陷为0清除浮动有四种常见方案父元素触发BFC设置overflow: hidden父元素使用display: flow-root使用伪元素清除浮动.clearfix::after { content: ; display: block; clear: both; }父元素设置固定高度不推荐我平时实际写项目时已经很少用float布局了基本都是flex和grid但笔试考BFC并不多余——它考察的是你对CSS渲染机制的理解深度。flex和grid只是把BFC的很多规则封装好了底层原理还是那一套。比如overflow: hidden能清除浮动就是因为创建了BFCBFC内部元素不会影响到外部。4.2 Vue与React原理考点2020年那会儿Vue 2还是主流React也才16.x。爱奇艺这套题里框架题占比不高大概两三道选择题范围集中在Vue响应式原理、生命周期钩子、React组件通信。Vue响应式原理这道题考得很经典data里的对象新增一个属性页面会不会更新答案是不会。Vue 2的Object.defineProperty只能劫持已有属性如果你直接this.obj.newProp 1这个操作没有被拦截自然也就不会触发视图更新。解决方案有三个Vue.set、this.$set、赋值给新对象。Vue 3用了Proxy后这个问题才彻底解决。React部分考的是受控组件和非受控组件的区别。这题其实不难但很多人在实际写代码时分不清。受控组件就是value由React state控制输入框每次变化都通过onChange同步到state非受控组件则是用ref直接获取DOM值React不接管输入过程。笔试时这题只要抓住“值由谁控制”这个核心就不会答错。4.3 工程化与构建工具爱奇艺这套题还零星涉及了一些工程化内容比如考了webpack的loader和plugin的区别。这题的标准答法是loader是文件转换器将非JS模块转换成webpack能理解的模块plugin是扩展插件在webpack构建流程的特定时机注入逻辑可以影响整个构建过程。我理解时习惯用一个类比loader像翻译官把各种语言翻译成同一种语言plugin像项目管理中的监理在工程的不同阶段检查、干预、优化。这样记忆特别牢而且面试时说出来也会显得你有自己的思考不是背的八股。5. 编程题实战拆解与手写代码技巧5.1 爱奇艺编程题的特点算法简单细节拉满2020第一场的两道编程题一道是“数组去重并排序”一道是“查找字符串中最长不重复子串的长度”。两道题都不难但爱奇艺在题目描述里会加各种限制条件比如“不能使用Set”“不能用sort”“输出格式要求严格”等。这其实是在考察你的代码通用性和边界处理能力而不只是解题能力。先说数组去重那题如果允许用Set一行代码就完了const unique [...new Set(arr)];但如果限制不能用Set你就得自己实现。我当时写的是用对象做哈希表function uniqueArray(arr) { const result []; const map {}; for (let i 0; i arr.length; i) { const item arr[i]; if (!map[item]) { map[item] true; result.push(item); } } return result; }这里有个细节如果用map[item]做判断item会被隐式转成字符串1和1会被当成同一个key。如果你希望区分数字和字符串就得用Map或者Object.is做判断。这个细节笔试时可能不会测但面试官会追问你得能说出来。5.2 最长不重复子串滑动窗口的模板写法这道题是LeetCode 3的原题爱奇艺把它原封不动搬了过来。标准解法是滑动窗口配合一个哈希表记录字符最后出现的位置function lengthOfLongestSubstring(s) { const map new Map(); let maxLen 0; let left 0; for (let right 0; right s.length; right) { const char s[right]; if (map.has(char) map.get(char) left) { left map.get(char) 1; } map.set(char, right); maxLen Math.max(maxLen, right - left 1); } return maxLen; }需要注意的边界条件有两个一是空字符串返回0二是整个字符串没有重复字符时返回原长度。还有map.get(char) left这个判断很关键它的目的是确保“最近的重复字符”在窗口内才算数如果在窗口外就不用管。这个细节是滑动窗口的核心边界处理笔试时想清楚了再写别上来就套模板。5.3 手写代码题的通用检查清单根据我做爱奇艺这套题和后来帮别人复盘的经验手写代码题挂掉的原因往往不是思路而是细节。每次写完代码我建议你按这个清单自查一遍空输入数组为空、字符串为空函数会不会报错单元素输入只传一个元素结果是否符合预期所有元素相同去重后是否只留一个元素包含负数/NaN/null/undefined类型判断是否失效大数会不会溢出或超时输出格式空格、逗号、引号是否符合题目要求如果笔试平台支持本地调试最好先在本地跑一遍再粘贴上去。如果不支持就只能靠平时的代码直觉了——这也是我建议你平时刷题时不要再依赖console.log的原因强迫自己在脑子里模拟执行考试时才不会慌。6. 备战时容易踩的坑与复习策略6.1 不要只刷题要按知识树复习很多同学拿到爱奇艺这套题的第一反应是去搜答案、背答案这是最没效率的做法。同一道题不同年份会换个马甲继续考比如“数组去重”可以考成“对象数组按id去重”可以考成“字符串中统计每个字符出现次数”背答案只能应对原题理解原理才能应对变种。我的建议是用爱奇艺这套题当“体检报告”哪些模块错得多就回头系统复习哪个模块。比如你发现事件循环的题错了三道说明你对异步机制的理解有系统性漏洞这时候应该找事件循环的专题课或文章系统学一遍而不是纠结这一道题为什么错。单点补漏永远不如系统重建。6.2 选择题的“排除法”策略要练成肌肉记忆爱奇艺的选择题尤其是多选非常考验你对知识边界的把握。多选题少选不得分意味着你每选一个选项都要有充分的理由。我备考时养成一个习惯做多选题时每选一个选项就在心里默念一句“它为什么对”每排除一个选项也默念“它为什么错”。能清晰说出来的才选说不清楚宁可少选。这个策略在时间紧的笔试里特别有用它可以阻止你“凭感觉选”的冲动。笔试现场没有机会回头翻书唯一的武器就是你平时积累的确定性。6.3 高频考点速查表考前最后一天只看这张表我结合爱奇艺2020第一场这套题以及近几年其他大厂的前端笔试题整理了一张高频考点速查表。考前最后一天不用再翻书就看这张表就够了模块必背知识点常见出题方式JS基础类型转换规则、与、深拷贝与浅拷贝单选/多选作用域变量提升、闭包、let/const/var区别代码题异步事件循环、微任务/宏任务、Promise状态流转代码题/输出题浏览器渲染流程、DOMContentLoaded与load、重排与重绘单选网络HTTP缓存、状态码、TCP三次握手单选/多选CSSflex/grid布局、BFC、盒模型、水平垂直居中代码题/单选框架Vue响应式原理、React生命周期、组件通信单选工程化webpack loader/plugin区别、打包优化、Tree Shaking单选/简答算法数组去重、扁平化、防抖节流、深拷贝编程题手写实现new、bind、Promise.all、EventEmitter编程题/简答这张表不是让你背而是让你自查表里每一项你都能说出至少两句话的解释才说明有把握。我当年备考时把这张表打印出来贴在工位前每周扫一遍发现有哪项说不清楚了就回去翻书。坚持一个月基础题的正确率明显上来了。6.4 编程题的输入输出处理别在这里丢分最后特别说一下编程题的输入输出。爱奇艺的笔试系统要求自己处理输入输出不像LeetCode那样直接给函数参数输入可能是多行可能是单行带空格的字符串。很多人第一题算法秒出结果卡在解析输入上非常亏。建议你提前熟悉readline的用法或者直接写一个简单通用的输入解析函数。比如处理一行数字数组const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on(line, function(line) { const nums line.trim().split(/\s/).map(Number); // 处理完后调用 rl.close() });如果是浏览器环境就用prompt模拟输入配合console.log输出。总之考试前一定要查清楚笔试平台支持的运行环境和I/O方式尤其是第一次用某个笔试平台时可以提前在平台自带的测试页面试着跑一段Hello World确认细节。这个准备花不了10分钟但能避免在考场上手足无措。7. 复盘总结与备考心态建议做这套题也好面其他公司也好我的体会是前端校招笔试从来不考天才题它考的是你有没有系统学过、有没有认真实践过。爱奇艺2020第一场这套卷子从头到尾没有超纲题每一道都能在经典教材或官方文档里找到对应知识点但每一道也都有它的陷阱和隐藏条件。所以备考策略上我不建议你把精力放在“预测原题”上而是放在“把基础打扎实让知识形成网络”上。一套爱奇艺的笔试题本质上只是一次体检真正的功课在日常读源码时多问一句为什么写代码时多考虑边界跑通功能后多想想性能和可维护性。这些东西才是笔试拿高分、面试过三面的底气。最后再分享一个我自己的小习惯每次做完一套笔试题不管成绩如何我都会把错题整理到一个文档里按“知识点→错误原因→正确思路→相关延伸题”的格式记录。错题本不需要多华丽但一定要自己亲手写因为能让你记住的从来不是正确答案而是你分析错误的过程。希望这篇复盘能帮你在下一场笔试前把地基打得更牢一点。