1. OPPO秋招前端笔试整体情况与考察逻辑1.1 一场笔试到底在筛什么每年秋招的第一道坎基本都是笔试OPPO前端岗也不例外。我去年投的是2023届秋招前端岗笔试安排在投递简历后大约一周左右形式是线上统一笔试用的第三方平台全程摄像头监控加屏幕录制。整套题做下来我的第一感受是它不像某些互联网大厂那样通篇算法题而是更看重基础功底和工程思维的覆盖面题目量不算小节奏得掐着表走。先说结论OPPO的前端笔试主要考四个方向——JavaScript语言基础、CSS布局与浏览器原理、前端框架理解、手写代码与简单算法题。选择题占了一大半后面跟着两三道简答题和两道编程题。整体难度属于中规中矩的校招水平但想拿高分并不容易因为它专门挑那些“你好像会、细想又拿不准”的知识点考这正是很多前端同学复习时的盲区。为什么笔试要这么设计从我个人的理解来看前端岗位的简历筛选之后笔试扮演的是一个“过筛器”的角色。面试官一天要面很多人不可能每个人都在90分钟里慢慢聊基础。笔试先把“JavaScript原型链都说不清”“CSS垂直居中只会一种方式”这类候选人筛掉面试环节才能集中精力考察项目经验、技术深度和沟通表达。换句话说笔试成绩很大程度上决定了你能不能见到面试官而不是决定你最终拿不拿得到Offer。1.2 题型分布与分值判断我复盘了一下当时的题目分布大致是这么个情况单选题约15道每题2分覆盖JS基础、浏览器API、HTTP协议、前端框架基础多选题约5道每题3分难度明显比单选高错选、漏选都不得分简答题2道每题10分左右一般是写原理、说方案、对比分析编程题2道分值占大头一道偏向JS手写实现一道偏向简单算法或数组处理注意多选题这里有个细节多选的选项往往看起来“都对”但其实藏着概念性的细微差别。比如“哪些方法会改变原数组”push、pop、sort、slice混在一起slice是返回新数组其他三个都会改变原数组。这种题就是典型的送命题复习不到位一选就错。从分值结构能看出来OPPO笔试的核心策略就是选择题保住基本盘简答题展示工程思维编程题拿稳能拿的分。后面我会逐个部分展开讲考点和答题技巧。2. 核心考点拆解从八股文到工程素养2.1 JavaScript基础闭包、原型链与事件循环不管哪家公司的前端笔试JavaScript基础永远是重中之重OPPO的题目在这方面一点也不含糊。我当时遇到的选择题里闭包、原型链、this指向、事件循环基本各占了一到两题。先说闭包。它考的不是定义而是实际运行结果。比如给一段代码让你判断输出内容里面夹杂着for循环 var声明的经典陷阱for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }问这段代码输出什么。答案是5个5因为var声明没有块级作用域循环结束后i已经变成5定时器回调执行时拿到的都是同一个变量。这个考点背后其实是在考你有没有真正理解“闭包保存的是变量引用而不是变量值”。如果改成let声明输出就是0、1、2、3、4因为每次循环都会创建新的绑定。然后是原型链。笔试不会直接问你“什么是原型链”而是给一段继承代码让你判断属性访问顺序。或者问obj.toString()能执行是因为原型链上哪一层提供了这个方法。这类题的前提是你得把__proto__、prototype、constructor三者之间的关系搞清楚否则只能靠猜。再说事件循环这个也是高频考点。OPPO的选择题里出现过类似这样的一道给定setTimeout、Promise、async/await的混合代码判断输出顺序。console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);正确的输出顺序是script start、script end、promise1、promise2、setTimeout。核心逻辑是同步代码先执行微任务队列在宏任务之前清空Promise的then回调属于微任务setTimeout属于宏任务。准备这类考点没有什么捷径就是把JavaScript高级程序设计那本书里的核心章节吃透特别是函数、对象、异步编程这几章。然后配合面经里的经典题多做几遍做到看到代码就能在脑子里跑出结果。2.2 CSS布局与浏览器渲染细节里的分水岭CSS看起来简单但笔试里它是拉开差距的地方。OPPO考过水平垂直居中的实现方式这个几乎每年前端笔试都有。比较稳的做法有flex、grid、绝对定位加transform关键是要写出多种方案并且能解释各自适用场景。flex方案.parent { display: flex; justify-content: center; align-items: center; }绝对定位方案.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }还有一道印象深刻的题是问BFC相关的。BFC块级格式化上下文这个概念很多人复习的时候觉得抽象但笔试就爱从“BFC能解决什么问题”这个角度出题。比如问如何清除浮动哪些属性可以触发BFC我当时选了overflow: hidden、display: flow-root、float、position: absolute这几个选项。注意display: flow-root是专门为创建BFC设计的这个选项不少同学不认识。浏览器渲染流程也是一个重点。从输入URL到页面展示中间经历了DNS解析、TCP连接、HTTP请求、构建DOM树、构建CSSOM树、合成渲染树、布局、绘制、合成。OPPO的简答题里就让我画过这个流程并说明JavaScript的defer和async属性分别对渲染有什么影响。这道题其实是在考察你对前端性能优化底层逻辑的理解程度——不知道渲染流程就无法真正理解为什么要把脚本放在body底部为什么操作DOM要减少重排重绘。2.3 框架题Vue还是ReactOPPO更偏爱哪个OPPO的前端笔试在框架考察上比较务实不会深挖源码但会考你在实际项目里到底用没用过。我当时遇到的框架题主要是Vue方向这跟OPPO不少业务线采用Vue技术栈有一定关系。Vue的考点主要集中在这么几个方面响应式原理、生命周期、组件通信、v-model的语法糖原理、计算属性和侦听器的区别。举个例子它问过计算属性computed和侦听器watch的使用场景区别正确答案是计算属性适合根据已有数据派生新数据且有缓存侦听器适合在数据变化时执行异步操作或开销较大的操作。再比如组件通信笔试会直接问父组件给子组件传值用的是什么子组件向父组件通信用什么方法。这个在Vue2和Vue3里略有不同——Vue3除了props、emit还多了provide/inject、defineExpose等方式。如果你准备的是React方向也要注意OPPO笔试不排除React题毕竟技术栈是分部门的。React的考点大概率会集中在hooks相关的知识点比如useEffect的依赖数组、useState的异步更新机制、useMemo和useCallback的缓存作用。我当时复习的笔试题里React和Vue是分开的两套选项根据自己简历里写的内容选择回答就行。这里有个建议简历里写了什么技术栈笔试就尽量按那个技术栈答千万别答非所问。框架题还有一个重要方向是工程化比如组件库的使用与二次封装、状态管理方案的选择、路由的懒加载配置。它考察的其实是你有没有真正用框架做过完整项目有没有遇到并解决过实际工程问题。2.4 网络与浏览器基础HTTP缓存与跨域老八股文了网络题在前端笔试里的地位一直很稳OPPO也不例外。HTTP缓存机制几乎必考特别是强缓存和协商缓存的对比。强缓存有两个字段Expires和Cache-Control。Expires是HTTP/1.0的产物是个绝对时间容易受本地时间影响Cache-Control是HTTP/1.1的使用相对时间更靠谱。优先级别上Cache-Control高于Expires。协商缓存对应的字段是Last-Modified/If-Modified-Since和ETag/If-None-Match其中ETag比Last-Modified更精准因为它基于文件内容生成指纹。笔试里经常会出一个实际场景第一次访问页面加载了静态资源第二次访问时哪些请求会走缓存哪些会重新请求服务器。如果你能答出“HTML通常不走缓存或短时间缓存JS/CSS/图片这类静态资源走强缓存文件名带hash时更新才生效”这道题基本就稳了。跨域问题也是高频考察点。JSONP的原理、CORS的简单请求和预检请求区别、代理服务器是怎么解决开发环境跨域的。OPPO考过这样一道选择题以下哪种方式属于CORS的预检请求触发条件。答案是请求方法不是GET/HEAD/POST或者Content-Type不是简单的三种类型或者请求头包含自定义字段。这道题比较细很多人实际项目里跨域都交给脚手架代理配好了反而忽略了原理层面的理解。我觉得网络这块复习不用死记硬背关键是理解浏览器和服务器之间的交互流程。你可以用一个生活化的类比来理解强缓存就像你买菜时有个小本子记着菜价下次直接查本子不用去菜市场协商缓存则是你拿着旧菜价单去问老板老板说没涨价你就接着用涨价了你再拿新价格。3. 实操过程与关键环节实现3.1 笔试平台与前期准备细节OPPO当年用的笔试平台是牛客网的在线考试系统支持选择题、简答题和代码题。正式笔试前系统会提前发一封邮件里面有笔试链接和注意事项。建议提前一天做好两件事一是确认自己的电脑摄像头能正常打开二是把浏览器调试好。考试全程会开启防切屏监控切出页面超过一定次数会被警告严重的话直接取消成绩。我当时因为电脑摄像头驱动有问题到了笔试前半小时才手忙脚乱地装驱动搞得心态有点崩。这种低级错误一定要避免。另外编程题的代码编辑器不像IDE那么智能没有自动补全也没有语法提示写代码需要自己在脑子里理清语法结构。如果平时习惯了IDE的辅助建议提前去牛客网的在线编程区练几道题适应一下原生编辑器的操作手感。考试环境尽量选择安静、网络稳定的地方。我有个朋友考试时路由器突然断网重连之后倒计时没暂停白白浪费了五分钟。另外建议用Chrome或者Edge浏览器不要用360、QQ这类第三方浏览器有些在线笔试系统对非主流浏览器兼容性不太好可能出现代码编辑器加载不出来的情况。3.2 答题顺序与时间分配OPPO的笔试总时长是90分钟题量大概在25道左右平均每题不到4分钟。我当时安排的时间大概是这样的单选题最多25分钟会做的果断选不确定的先标记不纠结多选题控制在10分钟以内因为多选难度大纠结也不一定对简答题用15分钟每题写清楚要点不需要长篇大论编程题留40分钟两道题的时间分配大约是第一题15分钟第二题25分钟这个时间安排的逻辑是选择题分值虽然不高但题量大、覆盖面广考前突击复习过的基础题尽量拿满简答题重点在于踩点得分不用写小作文编程题分值最高必须保证充足的时间特别是需要调试代码的情况下时间很容易不知不觉就溜走了。编程题第一题我印象里是考数组去重和排序难度不高用Set加sort就能解决。但要注意的是这道题要求自己处理输入输出不是LeetCode那种已经帮你封装好函数的形式而是要从标准输入读取数据。很多人笔试挂在这里不是不会写而是不熟悉在线编程的输入输出格式。我当时第一道编程题的解题思路是// 输入格式第一行是数组长度第二行是数组元素空格分隔 // 要求去重后按从大到小排序输出 function solve(input) { const lines input.trim().split(\n); const n parseInt(lines[0]); const arr lines[1].split( ).map(Number); const uniqueArr [...new Set(arr)]; uniqueArr.sort((a, b) b - a); console.log(uniqueArr.join( )); }这道题有几个坑一是输入可能包含多余的空格和换行需要trim处理二是如果原数组长度不匹配或者第二行缺失要有基本的数据校验意识。虽然笔试主要看核心逻辑对不对但很多在线评测系统对输入解析错误会直接判错。3.3 简答题的答题技巧别只顾着堆术语简答题看起来好写但阅卷是有得分点的。我当时遇到的简答题之一是让对比分析Vue的computed和watch的区别和应用场景。这种题不能只写一句话“computed是计算属性watch是侦听器”要分层次、结构化地回答最好用小点列出来。我的答题思路是这样的先说定义与功能computed根据已有响应式数据派生新值watch侦听指定数据的变化并执行回调再说缓存机制computed有缓存依赖数据不变化就不会重新计算watch没有缓存数据变了必然触发回调接着说适用场景computed适合模板中需要展示的派生数据watch适合异步操作、复杂逻辑最后可能有补充computed不能执行异步操作watch可以computed是声明式的watch是命令式的这样四层答下来每个小点一两句话得分点基本就都覆盖了。还有一个心得是写简答题的时候不要堆砌一堆术语而不解释。比如你写“computed基于响应式依赖缓存”阅卷人可能会想知道你理解不理解“响应式依赖”是什么意思。用一句通俗的话补充解释一下“比如模板里用到的数据没变computed就不会重新执行函数”反而比堆一百个名词更能证明你真的懂。4. 常见问题与避坑指南4.1 笔试中的典型失误与排查技巧我在这次OPPO笔试以及后来陪同学模拟训练的过程中总结出了几个高频翻车点整理成了一张速查表希望后来的人别再踩同样的坑。问题类型具体表现正确的处理思路多选漏选明明知道有两个正确选项怕选错不敢选满只要不确定的选项不选确定的一定要选。多选错选不得分但漏选也不得分保险策略是“只选最有把握的”编辑环境不适不习惯在线编辑器缩进乱了或者自动补全失效提前用牛客网在线编程多练手养手动写括号和缩进的习惯输入输出格式错误编程题本地逻辑正确提交后莫名报错先打印解析后的输入数据确认格式没问题再做题时间分配失衡选择题纠结太久导致编程题没时间给自己设定死线超过时间直接标记跳题完成全部再回来切屏误触不小心点击浏览器地址栏被警告开考后不要切出考试页面全部操作留在页面内进行多选漏选这个问题值得展开说。很多同学在多选题上吃过亏包括我自己。多选的评分标准通常是不定项选择错选、漏选、多选都不得分只选对一部分也没有半分。所以策略是你只能确定两个选项是对的那选两个就够了不要因为觉得“其他选项好像也对”就加选。宁可少拿一道题也尽量不要因为加选而白丢一道题。4.2 备考时间线从零到笔试的复习规划最后分享一下我备考前端笔试的时间安排这个节奏适用于有一定前端基础、但还没有系统复习过的同学。时间大概是三周到一个月第一周做基础摸底建议直接找一套去年OPPO或其他厂商的前端笔试题做一遍计时90分钟做完再对答案。这一步的目的不是得分而是定位你的知识薄弱点。我当时做摸底题时才发现自己事件循环和浏览器缓存这块完全是一团浆糊如果直接闷头复习大概率会在这些地方浪费时间。第二周集中刷JavaScript和CSS基础题配合面经里的高频考点逐个过。JavaScript重点复习闭包、原型链、this指向、事件循环、ES6新增特性CSS重点复习flex、grid、BFC、水平垂直居中、选择器优先级。第三周转向框架和网络。框架部分以自己常用的那个为主Vue就重点看响应式原理、生命周期、组件通信、computed和watchReact就重点看hooks、组件通信、虚拟DOM。网络部分重点看HTTP缓存、跨域解决方案、HTTPS握手过程、TCP三次握手四次挥手。最后几天做模拟笔试。找完整时间段用牛客网或者赛码网的模拟题练手。模拟的时候一定要开计时器严格按照考试状态来。我当时模拟了三次前两次都是时间不够用到第三次才摸清了自己的答题节奏。4.3 一些值得补充的进阶考点OPPO的笔试题整体偏基础但如果你有精力以下几个进阶考点也建议提前了解一下因为它们偶尔会出现在选择题里而且面试环节被追问的概率很大。第一个是浏览器渲染性能优化。除了常见的减少重排重绘、懒加载、图片压缩之外可以关注一下CSS contain属性、content-visibility这类相对新的优化手段。第二是前端工程化比如Webpack的打包流程、Loader和Plugin的区别、Tree Shaking的原理。第三是微前端如果简历上写过微前端项目笔试里可能会出现qiankun、single-spa之类的概念题主要是考察你对微前端隔离方案的理解。还有一个容易被忽视的是HTTP/2和HTTP/3的对比。笔试如果问“HTTP/2相比HTTP/1.1有哪些改进”多选选项通常包括多路复用、头部压缩、二进制分帧、服务端推送。注意服务端推送不是主动推送数据而是服务器在客户端请求HTML时预先推送JS/CSS等资源。这个点容易理解偏。4.4 笔试结束后复盘比分数更重要笔试做完不是结束而是另一个开始。我强烈建议在笔试结束后48小时内做一个复盘趁记忆还热把当时不确定的题目整理出来逐个查清楚正确答案和背后的原理。我当时整理了一份自己的笔试错题集记录了大概十来道题。后来面试的时候有几个问题正好就是我笔试时没弄懂的知识点因为复盘过所以答得比较流利。笔试和面试本来就是连贯的考察过程你在笔试中暴露的薄弱项面试官在简历里、在面试追问中很可能还会碰到。复盘时怎么整理错题我常用的格式是三列题目考了什么知识点、我当时是怎么想的、正确答案的完整解释是什么。不用抄原题只要看到关键词就能回忆起来就行。我自己用了Notion建了一个前端面试知识表格按JavaScript、CSS、框架、网络、工程化五个维度分类每周末过一遍。这个习惯坚持到秋招结束对我的帮助非常大。最后分享一个心态层面的建议秋招的笔试机会很多OPPO只是其中一站。就算这次笔试发挥不理想也不要过度沮丧。每一次笔试都是在帮你熟悉节奏、补充盲区。保持复盘、保持输出你会在接下来的笔试中越来越有手感。
OPPO秋招前端笔试考点全解析：从JavaScript到浏览器原理
1. OPPO秋招前端笔试整体情况与考察逻辑1.1 一场笔试到底在筛什么每年秋招的第一道坎基本都是笔试OPPO前端岗也不例外。我去年投的是2023届秋招前端岗笔试安排在投递简历后大约一周左右形式是线上统一笔试用的第三方平台全程摄像头监控加屏幕录制。整套题做下来我的第一感受是它不像某些互联网大厂那样通篇算法题而是更看重基础功底和工程思维的覆盖面题目量不算小节奏得掐着表走。先说结论OPPO的前端笔试主要考四个方向——JavaScript语言基础、CSS布局与浏览器原理、前端框架理解、手写代码与简单算法题。选择题占了一大半后面跟着两三道简答题和两道编程题。整体难度属于中规中矩的校招水平但想拿高分并不容易因为它专门挑那些“你好像会、细想又拿不准”的知识点考这正是很多前端同学复习时的盲区。为什么笔试要这么设计从我个人的理解来看前端岗位的简历筛选之后笔试扮演的是一个“过筛器”的角色。面试官一天要面很多人不可能每个人都在90分钟里慢慢聊基础。笔试先把“JavaScript原型链都说不清”“CSS垂直居中只会一种方式”这类候选人筛掉面试环节才能集中精力考察项目经验、技术深度和沟通表达。换句话说笔试成绩很大程度上决定了你能不能见到面试官而不是决定你最终拿不拿得到Offer。1.2 题型分布与分值判断我复盘了一下当时的题目分布大致是这么个情况单选题约15道每题2分覆盖JS基础、浏览器API、HTTP协议、前端框架基础多选题约5道每题3分难度明显比单选高错选、漏选都不得分简答题2道每题10分左右一般是写原理、说方案、对比分析编程题2道分值占大头一道偏向JS手写实现一道偏向简单算法或数组处理注意多选题这里有个细节多选的选项往往看起来“都对”但其实藏着概念性的细微差别。比如“哪些方法会改变原数组”push、pop、sort、slice混在一起slice是返回新数组其他三个都会改变原数组。这种题就是典型的送命题复习不到位一选就错。从分值结构能看出来OPPO笔试的核心策略就是选择题保住基本盘简答题展示工程思维编程题拿稳能拿的分。后面我会逐个部分展开讲考点和答题技巧。2. 核心考点拆解从八股文到工程素养2.1 JavaScript基础闭包、原型链与事件循环不管哪家公司的前端笔试JavaScript基础永远是重中之重OPPO的题目在这方面一点也不含糊。我当时遇到的选择题里闭包、原型链、this指向、事件循环基本各占了一到两题。先说闭包。它考的不是定义而是实际运行结果。比如给一段代码让你判断输出内容里面夹杂着for循环 var声明的经典陷阱for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }问这段代码输出什么。答案是5个5因为var声明没有块级作用域循环结束后i已经变成5定时器回调执行时拿到的都是同一个变量。这个考点背后其实是在考你有没有真正理解“闭包保存的是变量引用而不是变量值”。如果改成let声明输出就是0、1、2、3、4因为每次循环都会创建新的绑定。然后是原型链。笔试不会直接问你“什么是原型链”而是给一段继承代码让你判断属性访问顺序。或者问obj.toString()能执行是因为原型链上哪一层提供了这个方法。这类题的前提是你得把__proto__、prototype、constructor三者之间的关系搞清楚否则只能靠猜。再说事件循环这个也是高频考点。OPPO的选择题里出现过类似这样的一道给定setTimeout、Promise、async/await的混合代码判断输出顺序。console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);正确的输出顺序是script start、script end、promise1、promise2、setTimeout。核心逻辑是同步代码先执行微任务队列在宏任务之前清空Promise的then回调属于微任务setTimeout属于宏任务。准备这类考点没有什么捷径就是把JavaScript高级程序设计那本书里的核心章节吃透特别是函数、对象、异步编程这几章。然后配合面经里的经典题多做几遍做到看到代码就能在脑子里跑出结果。2.2 CSS布局与浏览器渲染细节里的分水岭CSS看起来简单但笔试里它是拉开差距的地方。OPPO考过水平垂直居中的实现方式这个几乎每年前端笔试都有。比较稳的做法有flex、grid、绝对定位加transform关键是要写出多种方案并且能解释各自适用场景。flex方案.parent { display: flex; justify-content: center; align-items: center; }绝对定位方案.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }还有一道印象深刻的题是问BFC相关的。BFC块级格式化上下文这个概念很多人复习的时候觉得抽象但笔试就爱从“BFC能解决什么问题”这个角度出题。比如问如何清除浮动哪些属性可以触发BFC我当时选了overflow: hidden、display: flow-root、float、position: absolute这几个选项。注意display: flow-root是专门为创建BFC设计的这个选项不少同学不认识。浏览器渲染流程也是一个重点。从输入URL到页面展示中间经历了DNS解析、TCP连接、HTTP请求、构建DOM树、构建CSSOM树、合成渲染树、布局、绘制、合成。OPPO的简答题里就让我画过这个流程并说明JavaScript的defer和async属性分别对渲染有什么影响。这道题其实是在考察你对前端性能优化底层逻辑的理解程度——不知道渲染流程就无法真正理解为什么要把脚本放在body底部为什么操作DOM要减少重排重绘。2.3 框架题Vue还是ReactOPPO更偏爱哪个OPPO的前端笔试在框架考察上比较务实不会深挖源码但会考你在实际项目里到底用没用过。我当时遇到的框架题主要是Vue方向这跟OPPO不少业务线采用Vue技术栈有一定关系。Vue的考点主要集中在这么几个方面响应式原理、生命周期、组件通信、v-model的语法糖原理、计算属性和侦听器的区别。举个例子它问过计算属性computed和侦听器watch的使用场景区别正确答案是计算属性适合根据已有数据派生新数据且有缓存侦听器适合在数据变化时执行异步操作或开销较大的操作。再比如组件通信笔试会直接问父组件给子组件传值用的是什么子组件向父组件通信用什么方法。这个在Vue2和Vue3里略有不同——Vue3除了props、emit还多了provide/inject、defineExpose等方式。如果你准备的是React方向也要注意OPPO笔试不排除React题毕竟技术栈是分部门的。React的考点大概率会集中在hooks相关的知识点比如useEffect的依赖数组、useState的异步更新机制、useMemo和useCallback的缓存作用。我当时复习的笔试题里React和Vue是分开的两套选项根据自己简历里写的内容选择回答就行。这里有个建议简历里写了什么技术栈笔试就尽量按那个技术栈答千万别答非所问。框架题还有一个重要方向是工程化比如组件库的使用与二次封装、状态管理方案的选择、路由的懒加载配置。它考察的其实是你有没有真正用框架做过完整项目有没有遇到并解决过实际工程问题。2.4 网络与浏览器基础HTTP缓存与跨域老八股文了网络题在前端笔试里的地位一直很稳OPPO也不例外。HTTP缓存机制几乎必考特别是强缓存和协商缓存的对比。强缓存有两个字段Expires和Cache-Control。Expires是HTTP/1.0的产物是个绝对时间容易受本地时间影响Cache-Control是HTTP/1.1的使用相对时间更靠谱。优先级别上Cache-Control高于Expires。协商缓存对应的字段是Last-Modified/If-Modified-Since和ETag/If-None-Match其中ETag比Last-Modified更精准因为它基于文件内容生成指纹。笔试里经常会出一个实际场景第一次访问页面加载了静态资源第二次访问时哪些请求会走缓存哪些会重新请求服务器。如果你能答出“HTML通常不走缓存或短时间缓存JS/CSS/图片这类静态资源走强缓存文件名带hash时更新才生效”这道题基本就稳了。跨域问题也是高频考察点。JSONP的原理、CORS的简单请求和预检请求区别、代理服务器是怎么解决开发环境跨域的。OPPO考过这样一道选择题以下哪种方式属于CORS的预检请求触发条件。答案是请求方法不是GET/HEAD/POST或者Content-Type不是简单的三种类型或者请求头包含自定义字段。这道题比较细很多人实际项目里跨域都交给脚手架代理配好了反而忽略了原理层面的理解。我觉得网络这块复习不用死记硬背关键是理解浏览器和服务器之间的交互流程。你可以用一个生活化的类比来理解强缓存就像你买菜时有个小本子记着菜价下次直接查本子不用去菜市场协商缓存则是你拿着旧菜价单去问老板老板说没涨价你就接着用涨价了你再拿新价格。3. 实操过程与关键环节实现3.1 笔试平台与前期准备细节OPPO当年用的笔试平台是牛客网的在线考试系统支持选择题、简答题和代码题。正式笔试前系统会提前发一封邮件里面有笔试链接和注意事项。建议提前一天做好两件事一是确认自己的电脑摄像头能正常打开二是把浏览器调试好。考试全程会开启防切屏监控切出页面超过一定次数会被警告严重的话直接取消成绩。我当时因为电脑摄像头驱动有问题到了笔试前半小时才手忙脚乱地装驱动搞得心态有点崩。这种低级错误一定要避免。另外编程题的代码编辑器不像IDE那么智能没有自动补全也没有语法提示写代码需要自己在脑子里理清语法结构。如果平时习惯了IDE的辅助建议提前去牛客网的在线编程区练几道题适应一下原生编辑器的操作手感。考试环境尽量选择安静、网络稳定的地方。我有个朋友考试时路由器突然断网重连之后倒计时没暂停白白浪费了五分钟。另外建议用Chrome或者Edge浏览器不要用360、QQ这类第三方浏览器有些在线笔试系统对非主流浏览器兼容性不太好可能出现代码编辑器加载不出来的情况。3.2 答题顺序与时间分配OPPO的笔试总时长是90分钟题量大概在25道左右平均每题不到4分钟。我当时安排的时间大概是这样的单选题最多25分钟会做的果断选不确定的先标记不纠结多选题控制在10分钟以内因为多选难度大纠结也不一定对简答题用15分钟每题写清楚要点不需要长篇大论编程题留40分钟两道题的时间分配大约是第一题15分钟第二题25分钟这个时间安排的逻辑是选择题分值虽然不高但题量大、覆盖面广考前突击复习过的基础题尽量拿满简答题重点在于踩点得分不用写小作文编程题分值最高必须保证充足的时间特别是需要调试代码的情况下时间很容易不知不觉就溜走了。编程题第一题我印象里是考数组去重和排序难度不高用Set加sort就能解决。但要注意的是这道题要求自己处理输入输出不是LeetCode那种已经帮你封装好函数的形式而是要从标准输入读取数据。很多人笔试挂在这里不是不会写而是不熟悉在线编程的输入输出格式。我当时第一道编程题的解题思路是// 输入格式第一行是数组长度第二行是数组元素空格分隔 // 要求去重后按从大到小排序输出 function solve(input) { const lines input.trim().split(\n); const n parseInt(lines[0]); const arr lines[1].split( ).map(Number); const uniqueArr [...new Set(arr)]; uniqueArr.sort((a, b) b - a); console.log(uniqueArr.join( )); }这道题有几个坑一是输入可能包含多余的空格和换行需要trim处理二是如果原数组长度不匹配或者第二行缺失要有基本的数据校验意识。虽然笔试主要看核心逻辑对不对但很多在线评测系统对输入解析错误会直接判错。3.3 简答题的答题技巧别只顾着堆术语简答题看起来好写但阅卷是有得分点的。我当时遇到的简答题之一是让对比分析Vue的computed和watch的区别和应用场景。这种题不能只写一句话“computed是计算属性watch是侦听器”要分层次、结构化地回答最好用小点列出来。我的答题思路是这样的先说定义与功能computed根据已有响应式数据派生新值watch侦听指定数据的变化并执行回调再说缓存机制computed有缓存依赖数据不变化就不会重新计算watch没有缓存数据变了必然触发回调接着说适用场景computed适合模板中需要展示的派生数据watch适合异步操作、复杂逻辑最后可能有补充computed不能执行异步操作watch可以computed是声明式的watch是命令式的这样四层答下来每个小点一两句话得分点基本就都覆盖了。还有一个心得是写简答题的时候不要堆砌一堆术语而不解释。比如你写“computed基于响应式依赖缓存”阅卷人可能会想知道你理解不理解“响应式依赖”是什么意思。用一句通俗的话补充解释一下“比如模板里用到的数据没变computed就不会重新执行函数”反而比堆一百个名词更能证明你真的懂。4. 常见问题与避坑指南4.1 笔试中的典型失误与排查技巧我在这次OPPO笔试以及后来陪同学模拟训练的过程中总结出了几个高频翻车点整理成了一张速查表希望后来的人别再踩同样的坑。问题类型具体表现正确的处理思路多选漏选明明知道有两个正确选项怕选错不敢选满只要不确定的选项不选确定的一定要选。多选错选不得分但漏选也不得分保险策略是“只选最有把握的”编辑环境不适不习惯在线编辑器缩进乱了或者自动补全失效提前用牛客网在线编程多练手养手动写括号和缩进的习惯输入输出格式错误编程题本地逻辑正确提交后莫名报错先打印解析后的输入数据确认格式没问题再做题时间分配失衡选择题纠结太久导致编程题没时间给自己设定死线超过时间直接标记跳题完成全部再回来切屏误触不小心点击浏览器地址栏被警告开考后不要切出考试页面全部操作留在页面内进行多选漏选这个问题值得展开说。很多同学在多选题上吃过亏包括我自己。多选的评分标准通常是不定项选择错选、漏选、多选都不得分只选对一部分也没有半分。所以策略是你只能确定两个选项是对的那选两个就够了不要因为觉得“其他选项好像也对”就加选。宁可少拿一道题也尽量不要因为加选而白丢一道题。4.2 备考时间线从零到笔试的复习规划最后分享一下我备考前端笔试的时间安排这个节奏适用于有一定前端基础、但还没有系统复习过的同学。时间大概是三周到一个月第一周做基础摸底建议直接找一套去年OPPO或其他厂商的前端笔试题做一遍计时90分钟做完再对答案。这一步的目的不是得分而是定位你的知识薄弱点。我当时做摸底题时才发现自己事件循环和浏览器缓存这块完全是一团浆糊如果直接闷头复习大概率会在这些地方浪费时间。第二周集中刷JavaScript和CSS基础题配合面经里的高频考点逐个过。JavaScript重点复习闭包、原型链、this指向、事件循环、ES6新增特性CSS重点复习flex、grid、BFC、水平垂直居中、选择器优先级。第三周转向框架和网络。框架部分以自己常用的那个为主Vue就重点看响应式原理、生命周期、组件通信、computed和watchReact就重点看hooks、组件通信、虚拟DOM。网络部分重点看HTTP缓存、跨域解决方案、HTTPS握手过程、TCP三次握手四次挥手。最后几天做模拟笔试。找完整时间段用牛客网或者赛码网的模拟题练手。模拟的时候一定要开计时器严格按照考试状态来。我当时模拟了三次前两次都是时间不够用到第三次才摸清了自己的答题节奏。4.3 一些值得补充的进阶考点OPPO的笔试题整体偏基础但如果你有精力以下几个进阶考点也建议提前了解一下因为它们偶尔会出现在选择题里而且面试环节被追问的概率很大。第一个是浏览器渲染性能优化。除了常见的减少重排重绘、懒加载、图片压缩之外可以关注一下CSS contain属性、content-visibility这类相对新的优化手段。第二是前端工程化比如Webpack的打包流程、Loader和Plugin的区别、Tree Shaking的原理。第三是微前端如果简历上写过微前端项目笔试里可能会出现qiankun、single-spa之类的概念题主要是考察你对微前端隔离方案的理解。还有一个容易被忽视的是HTTP/2和HTTP/3的对比。笔试如果问“HTTP/2相比HTTP/1.1有哪些改进”多选选项通常包括多路复用、头部压缩、二进制分帧、服务端推送。注意服务端推送不是主动推送数据而是服务器在客户端请求HTML时预先推送JS/CSS等资源。这个点容易理解偏。4.4 笔试结束后复盘比分数更重要笔试做完不是结束而是另一个开始。我强烈建议在笔试结束后48小时内做一个复盘趁记忆还热把当时不确定的题目整理出来逐个查清楚正确答案和背后的原理。我当时整理了一份自己的笔试错题集记录了大概十来道题。后来面试的时候有几个问题正好就是我笔试时没弄懂的知识点因为复盘过所以答得比较流利。笔试和面试本来就是连贯的考察过程你在笔试中暴露的薄弱项面试官在简历里、在面试追问中很可能还会碰到。复盘时怎么整理错题我常用的格式是三列题目考了什么知识点、我当时是怎么想的、正确答案的完整解释是什么。不用抄原题只要看到关键词就能回忆起来就行。我自己用了Notion建了一个前端面试知识表格按JavaScript、CSS、框架、网络、工程化五个维度分类每周末过一遍。这个习惯坚持到秋招结束对我的帮助非常大。最后分享一个心态层面的建议秋招的笔试机会很多OPPO只是其中一站。就算这次笔试发挥不理想也不要过度沮丧。每一次笔试都是在帮你熟悉节奏、补充盲区。保持复盘、保持输出你会在接下来的笔试中越来越有手感。
