2019年顺丰科技秋招的前端客观题合集网上还流传着几个版本我当年备考时刷过不止一遍。老实说这不算一份难度顶格的卷子但它很典型——大厂校招客观题该覆盖的板块基本都覆盖了而且不少题目设置的考察角度放在现在依然有参考价值。前端校招的客观题考的不是你会不会写页面而是你在 JS 基础、CSS 布局、网络协议、框架原理这些底层能力上有没有形成体系。我把这套题重新复盘了一遍把涉及的知识点、解题思路、常见变体和容易踩的坑整理成文希望能帮你少走弯路。先说点实在的我不保证能一字不差地把当年那几十道题完整还原但每个板块的考点、题型分布和典型的代表性题目我很确定。这篇文章相当于拿顺丰科技2019秋招前端开发客观题合集做引子把一套客观题背后的考察逻辑拆给你看。如果你正在准备前端校招这份复盘比单纯找答案有用得多。1. 这套卷子背后藏着顺丰前端的选人画像1.1 一个大厂客观题的常规形态顺丰科技那年的前端客观题题型基本是单选题、多选题和判断题混着来。题量我没记错的话在40到50道之间答题时间给的还算充裕但想拿高分并不轻松。为什么因为多选题的迷惑项设置得很有水平你光靠记忆模糊的好像是这样去选很容易踩中出题人埋的雷。从内容分布上看JavaScript 基础占比最高大约能占到两三成CSS 与页面布局、浏览器与网络各占一小块框架和工程化也有涉及但不会像面经里那样让你手写源码。这个配比其实能给复习方向提供很明确的信号客观题在替你筛选那些基础扎不扎实的候选人而不是考察你能不能写出花哨的 demo。我记得当时网上有些人吐槽这份卷子太偏基础、没有区分度这个说法我不太认同。恰恰相反越是看起来基础的题越容易在细节上拉开差距。比如一道看似考 var 和 let 区别的题能延伸出暂时性死区、变量提升、块级作用域、闭包捕获等多个层面只懂表面的人会做错懂原理的人一眼就看出答案。这本身就是一种筛选。1.2 从题量配比看考察重心我根据自己的记忆和同年参加笔试的同学反馈大致还原了一下那年主观感受上的题量占比考察板块大致比重常见题型JavaScript 基础作用域、闭包、异步、原型25%-30%单选、多选、判断CSS 与页面布局选择器、盒模型、BFC、居中15%-20%单选、判断浏览器与网络缓存、渲染、存储、安全15% 左右多选、判断框架与工程化Vue/React、模块化、构建10%-15%单选、多选其他浏览器兼容、ES6 新特性、正则10% 左右单选、判断这个配比很有代表性。它说明校招客观题不怎么指望你在框架上写出长篇大论更在意你对 JavaScript 这门语言本身的理解深度。很多同学喜欢一上来就啃 Vue 源码、背 React 原理结果到笔试时发现 JS 基础题错了一半这其实是复习策略上的一种本末倒置。我个人的体会是在准备校招的时候JS 语法和运行机制是基本盘这个盘不稳框架学得再热也很难撑起整个笔试。2. JavaScript 考点基础语法之外的三种隐藏能力2.1 var/let/const不止是作用域的区别先看一道考过很多次的代表性题目原型for (var i 0; i 3; i) { setTimeout(function() { console.log(i); }, 100); } // 输出结果是这道题在大厂笔试里出现频率极高顺丰科技那年的卷子中也出现过类似题型。答案是 3、3、3。因为 var 声明的 i 是函数级作用域循环结束后 i 已经变成 3三个 setTimeout 回调共享同一个变量。把 var 换成 let 之后输出就会变成 0、1、2因为 let 是块级作用域每次循环都会创建一个新的绑定。很多同学到这里就停了觉得我知道怎么改了。但这类题真正想考察的是你有没有意识到背后还有个闭包问题。即使换成 var也可以通过 IIFE 或 bind 等方式修复for (var i 0; i 3; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }我复盘这套题最大的体会就是客观题考的不是知道与不知道而是你是否有能力把零散的知识点连成网。var/let/const 这道题至少能牵扯出作用域、变量提升、暂时性死区、闭包、事件循环五个方向。你在复习别的内容时要习惯性地去联想这些关联考点而不是孤立地背结论。2.2 事件循环与执行顺序校招客观题的最高频送分送命题事件循环的题几乎每家大厂笔试都会出顺丰科技那年的卷子也不例外。代表性的题目大概长这样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 属于宏任务。这道题我当年第一次做的时候虽然把顺序答对了但解析时被问到一个问题就卡住了如果 Promise 的 then 回调里再注册一个 Promise执行顺序会怎样 这还是考的微任务队列的先进先出、逐层处理机制。客观题里一道题只有几分但它实际上是在帮面试官预筛掉那些只背答案、不理解机制的候选人。复习时不要满足于记住一个输出结果要把为什么是这个顺序讲清楚最好能自己画一遍整个事件循环的流程。2.3 闭包、引用类型与深拷贝内存思维决定你分不丢闭包是另一类反复出现在这套题里的考点。考法通常是给一段函数嵌套的代码让你判断最终返回的函数能访问到哪个变量、结果是多少。顺丰科技那年的题目里有一道让我印象很深var data []; for (var i 0; i 3; i) { data[i] function() { return i; }; } console.log(data[0](), data[1](), data[2]());答案是 3、3、3。原因和刚才 var 的场景一样闭包保存的是变量引用而不是创建时的值。等到真正执行那些函数时i 早就变成了 3。把它改成 let 之后结果就是 0、1、2。多选、判断里这种改一个关键字结果全变的题特别能刺激你真正去理解闭包的存储方式。引用类型相关的题常和深拷贝挂钩。典型的判断式问题var obj1 { a: 1, nested: { b: 2 } }; var obj2 Object.assign({}, obj1); obj2.nested.b 100; console.log(obj1.nested.b); // 答案不是 2而是 100。因为 Object.assign 只做了浅拷贝对象里面嵌套的引用类型依然共享内存地址。类似的还有展开运算符{...obj}同样是浅拷贝。如果想实现深拷贝最简单的方式是JSON.parse(JSON.stringify(obj))但要注意它无法处理 function、undefined、Symbol、循环引用等情况。这套题的参考价值就在于它逼着你去面对引用到底意味着什么这个最基础也最容易被忽略的问题。3. CSS 与页面布局别以为背完居中就稳了3.1 选择器优先级看似送分实则连环坑CSS 部分最常见的一类题就是选择器优先级计算。比如这样的/* HTML: div idapp classboxtext/div */ #app { color: red; } .box { color: blue; } div { color: green; }问最终文字颜色是什么。答案是红色因为 id 选择器的优先级最高和它写在 class 后面还是前面没有关系。很多人误以为后面写的覆盖前面写的那是混淆了优先级相同的情况下后写的生效与优先级本来就不同这两种场景。我再给你一道当年那套题里类似的进阶变体/* HTML: div classparentdiv classchildtext/div/div */ .parent .child { color: red; } .parent .child { color: blue; }这两个选择器的优先级相同都是两个 class所以后写的.parent .child生效文字是蓝色。这道题真正的考点是优先级相同时比较先后顺序选择器写法不同但优先级相等时不能只看看起来更复杂就认为是它赢。答题的核心永远是先算特异性再谈覆盖顺序。3.2 盒模型、BFC 与经典布局要能不假思索写出来盒模型的考察一般围绕两种 box-sizing 的对比。顺丰科技那年有一道判断box-sizing: border-box后width 到底包含不包含 padding 和 border答案是包含。这个知识点本身不难但很多人会把它和content-box 是默认值记混。这里有个小技巧我在备考时经常用content-box听名字就知道 width 指的是 content 区域的宽度border-box听名字就知道 width 包含 border。BFC 相关的题目则是给一段代码问你为什么会产生 margin 塌陷问题怎么解决。这类题考察的是块级格式化上下文的触发条件。最常见的触发方式包括overflow不是visiblefloat不为nonedisplay为inline-block、flex、grid等position为absolute或fixed经典布局里flex 实现水平垂直居中基本是必考的。代码很简单.parent { display: flex; justify-content: center; align-items: center; }但客观题不会让你写完整代码而是给你几种写法让你选出哪种方式可以让子元素水平垂直居中。这时候你得同时掌握绝对定位 transform、flex、grid 等方式还要能快速判断某个方案是不是因为少了父容器高度而失效。这类客观题真正的难点不在于知道一种方案而在于能否快速识别出一种方案不可行的原因。3.3 移动端适配基础客观题也躲不开的 1px 问题移动端适配在那一年的 CSS 题里占了几道主要考的是视图端口概念、rem 与 em 的区别、以及经典的 1px 问题。rem 和 em 的区别很好记rem 相对根元素html的字体大小em 相对当前元素自身的字体大小。如果在 font-size 属性中使用 em它还会先参考父元素的字体大小计算出自身字体大小然后再基于这个字体大小计算其他属性比较容易绕晕。1px 问题的核心思路是在 DPR设备像素比为 2 或更高的屏幕上CSS 的 1px 在物理上会渲染成 2 个或更多物理像素看起来比较粗。常见方案有使用transform: scale(0.5)缩小边框使用viewport配合initial-scale0.5使用媒体查询结合-webkit-min-device-pixel-ratio这种题考的不是你会不会写完整适配方案而是你知不知道同一根线条在高 DPR 屏幕上为什么看起来更粗这个底层逻辑。我在复盘这套题时发现很多人在 CSS 板块失分不是不会写布局而是对设备像素、CSS 像素、DPR这三者之间的关系没有形成清晰认知。4. 浏览器与网络从缓存到加载链路的经营思维4.1 HTTP 缓存客观题里最划算的必得分HTTP 缓存在大厂客观题中几乎是必考项顺丰科技那年的卷子也出了好几道相关题。核心考点是强制缓存与协商缓存的区别以及各个缓存头的作用。我整理了一张表用来自查特别方便缓存类型相关响应头判断逻辑强制缓存Cache-Control、Expires命中后直接读缓存不发起请求协商缓存Last-Modified / If-Modified-Since请求带上时间服务端判断是否返回 304协商缓存ETag / If-None-Match请求带上标识服务端比对后返回 304 或新资源一道典型的考题是Cache-Control: max-age3600和Expires同时存在时以谁为准答案是以Cache-Control为准。因为Expires是 HTTP/1.0 时代的字段它依赖客户端时间如果用户的系统时间被改动了缓存判断就会出错。而Cache-Control里的 max-age 用的是相对时间更可靠。这类题不需要背很多只要抓住相对时间优于绝对时间、标识比对优于时间比对这个原则就能推导出大多数选项的对错。4.2 从输入 URL 到页面渲染链路题怎么答才不丢点这类题在笔试卷里可能不以大题形式出现但作为多选题或判断题的题干很常见。比如问以下属于浏览器渲染进程所做工作的是哪些或者给一个步骤流程让你挑出顺序错误的地方。完整的流程大致是DNS 解析 → 建立 TCP 连接如有 HTTPS则多一步 TLS 握手→ 发送 HTTP 请求 → 接收响应 → 解析 HTML 构建 DOM 树 → 解析 CSS 构建 CSSOM 树 → 合并生成渲染树 → 计算布局 → 绘制到屏幕。这中间还穿插着 JavaScript 的解析与执行、图片等资源的加载、预加载扫描等机制。那一年顺丰科技的卷子里有一道判断CSS 加载是否会阻塞 DOM 解析答案是CSS 不会阻塞 DOM 树的构建但会阻塞渲染树的生成因为渲染树需要 CSSOM。所以 css 文件加载慢时页面可能会出现白屏一段时间不是 DOM 没解析完而是渲染被阻塞了。这道题我印象很深因为它在常规理解和底层细节之间划了一道很清晰的分界线。想答对这种题不能只背过程得理解每一步阻塞了什么、不阻塞什么。4.3 Cookie、Storage 与前端安全基础但决定下限存储相关的题目基本围绕 Cookie、localStorage、sessionStorage 三者的区别。考题常见的干扰项包括Cookie 是否每次请求都会自动携带它受路径和域名限制不是绝对的localStorage 和 sessionStorage 的区分后者在标签页关闭后失效三者各自的大小限制Cookie 大约 4KBWeb Storage 通常 5MB 左右安全相关的题会考察 XSS 和 CSRF 的基本概念。XSS 是攻击者向页面注入恶意脚本核心防御思路是转义和过滤用户输入CSRF 是攻击者诱导用户在已登录状态下发起非本意请求核心防御思路包括 Token 校验、SameSite 属性、双重 Cookie 验证等。客观题通常不会让你写完整攻击流程但会用判断或多选的形式测你能否识别哪些手段对 XSS 有效、哪些手段对 CSRF 有效。这个地方非常容易混备考时建议分两行专门记忆别放在一起背。5. 框架与工程化2019 年的题目放到现在还有没有参考性5.1 事件机制、生命周期与数据响应三道必考题虽然 2019 年的主流框架版本和现在有一些差别但核心机制基本没变。那年的客观题里框架部分考察最多的就是 Vue 的响应式原理、生命周期顺序以及 React 中 setState 的更新机制。Vue 2 的响应式原理是客观题常客通过Object.defineProperty对 data 中的属性进行劫持为每个属性维护一个依赖收集器当属性被读取时收集依赖被修改时通知依赖更新视图。常见的判断题包括Vue.delete和this.$delete用来删除响应式对象的属性正确直接通过下标修改数组元素不会触发视图更新在 Vue 2 中正确Object.defineProperty无法拦截新增属性和删除属性的操作正确React 里最常见的客观题是 setState 到底是同步还是异步。这道题在当年的讨论区里堪称吵架题。标准理解是在 React 合成事件和生命周期函数中setState表现为异步会进行批次合并在原生事件或setTimeout等场景中它是同步的会立即触发重新渲染。考察的不是同步/异步这个简单的二分而是能不能理解 React 是通过调度机制自动处理更新时机的。我的态度是框架客观题不必追新把最核心的机制理解透就够用。2019 年的 Vue 2 和 React 16 相关内容放到今天的校招笔试里依然是很多公司的考察范围。这说明校招层面更看重你对框架设计思想的理解而不是追逐版本号的变化。5.2 模块化、打包和构建工具客观题不会写源码但考思路顺丰科技那年的卷子里工程化的题目不算特别难但覆盖面挺广。常见考点包括 CommonJS 与 ES Module 的区别、Webpack 中 loader 与 plugin 的定位差异、Tree Shaking 的基本原理等。CommonJS 和 ES Module 最核心的区别有三点CommonJS 是动态加载可以在条件语句中 requireES Module 是静态导入import 语句必须位于模块顶层CommonJS 输出的是一个值的拷贝ES Module 输出的是值的引用CommonJS 在 Node.js 环境中同步加载ES Module 在浏览器环境中支持异步加载Webpack 的 loader 和 plugin 这块几乎每家大厂都会考一道判断题。loader 是文件的转换器在模块加载时对源文件进行预处理比如 babel-loader 把 ES6 转成 ES5、css-loader 解析 CSS 文件plugin 是构建流程的扩展器在 Webpack 生命周期的各个阶段注入逻辑比如打包体积分析、代码压缩、HTML 模板生成等。理解这个差别比记住一堆插件名字重要得多。Tree Shaking 的基本思想是通过静态分析把没被使用的导出代码从最终打包结果中移除。它依赖 ES Module 的静态结构。客观题里常见的干扰项是Tree Shaking 可以删除副作用这是错的它有副作用需要注意通常需要配置sideEffects或者确保代码不产生副作用。5.3 现在复习还能不能直接拿这套题练手很多人问过我这个问题我的回答是可以但要配合着补充新知识。2019 年的这套题在 JavaScript 基础、CSS、浏览器网络这些模块上到今天考察逻辑依然成立。但在框架和工程化部分有些题目会略显过时。如果只是用这套题来夯实基础、检验复习漏洞完全没问题如果想用它来模拟最新笔试环境建议搭配近两年的其他真题卷一起刷。另外现在的大厂客观题比 2019 年更偏向 ES6 新特性、TypeScript、前端性能优化、微前端等方向。刷旧题的时候遇到不懂的新概念别直接跳过多查一查相关文档。旧题的价值在于帮你发现薄弱点而不是让你沉浸在过去的标准答案里。6. 从错题本到面试现场这套题之后的备战路径6.1 一套客观题的正确刷法我不推荐你一上来就一套接一套地刷题那样容易陷入题海战术的错觉。更有效的做法是第一遍先按完整考试时间做一遍做完后不要急着看解析先把所有不确定的题目标出来然后对着错题和不确定的题目逐个去查资料、读文档、写小 demo 验证最后再把整套题重做一遍看那些曾经不确定的题目能不能一次做对。我在复盘顺丰科技这套题时有一个很深的感触错题本不是抄下题目和答案就算完而是要把每道题涉及的知识点写下来和相邻知识点建立关联。比如做错了一道事件循环的题不只要记微任务先于宏任务还要同时整理宏任务有哪些、微任务有哪些、哪些场景会插入新的微任务、渲染时机在哪里。一道错题至少能延展出四五个相关的知识点这才是刷题效率最高的方式。6.2 把客观题变成面试谈资不少同学笔试过了面试时却被问到你说说你笔试里哪道题印象最深结果支支吾吾答不上来。这很可惜因为客观题里藏着很多可以延伸到面试的素材。比如你在某套题里遇到过缓存命中 304 的过程面试时如果被问到讲讲浏览器缓存吧你完全可以从那题出发把强制缓存、协商缓存、启发式缓存、缓存位置都串起来讲一遍。我自己的习惯是用一题三问来做准备对于一个核心考点先问 what是什么再问 why为什么这样设计最后问 how实际项目中怎么用。比如事件循环what 是宏任务与微任务的执行顺序why 是为什么需要分任务类型因为要兼顾实时性和渲染性能how 是前端如何利用微任务在渲染前更新数据或者如何避免长时间占用主线程导致页面卡顿。这种递进式回答面试官会明显感受到你对知识有体系化的理解。6.3 一些真实的备考教训最后分享几条我在准备这类校招客观题过程中踩过坑之后的经验不一定都来自这套题但很实用。第一条多选题的少选策略。大厂笔试的多选题很多采用少选得部分分错选不得分的计分方式。不确定的选项宁可不选也不要冒险。我当时吃过亏总想选出最完整的答案结果经常因为多选了一个错误项而整题零分。第二条判断题要特别小心绝对化表述。选项中只要出现一定必然所有总是这类词大概率是错的。比如所有 JavaScript 函数都是构造函数这种表述明显不对箭头函数就不是。不是说出题人故意挖坑而是绝对化表述本质上和编程场景里的边界情况相冲突。第三条考前要练一练手写代码的准确度。客观题虽然多半是选择判断但有些公司会在客观题之后紧跟一两道手写代码题顺丰科技那年我没记错的话也有。平时用惯了编辑器的自动补全手写代码时的拼写错误和 API 记混会非常致命。我在考前一个星期每天会抽出一小时用纯文本编辑器手写数组去重、深拷贝、防抖节流、发布订阅这些经典题目不查资料写完再对照优化。这个习惯帮我避免了不少低级失误。回顾整套顺丰科技 2019 秋招前端客观题真正有价值的不是那几个标准答案而是它能让你看清一个成熟技术团队在挑选校招候选人时对基础能力有多看重。前端这个岗位框架迭代快、工具链复杂但 JavaScript 这门语言的底层机制、浏览器的工作方式、网络的传输逻辑十年内都不会发生本质变化。把这些东西吃透你应付的不只是这套卷子而是整个职业生涯里每一次需要快速接入新技术的场景。你要是正准备校招不妨用这套思路去做一次完整的知识扫描把错题背后没搞懂的原理一个个补齐笔试成绩一定会有肉眼可见的提升。