百度2018校招Web前端工程师笔试卷第三批复盘那些年我们追过的前端面试题又到一年校招季翻出压箱底的百度2018校招Web前端工程师笔试卷第三批当年做这套卷子的场景还历历在目。那会儿前端的生态跟现在差别不小Vue 2.x 如日中天React 16 刚出 Fiberwebpack 4 才发没多久小程序也刚冒头。这套卷子虽然时间有点久远但它的出题思路和考察维度放到今天看也不过时——基础扎实、原理清晰、工程化思维依然是前端面试的主线。这篇文章不搞什么标准答案搬运而是站在一个过来人的角度结合这套卷子的题型风格聊聊前端校招笔试到底在考什么、应该怎么准备、哪些地方容易踩坑。无论你是准备校招的应届生还是想跳槽的初级工程师这篇文章都能给你一些可落地的参考。1. 这套笔试在考察什么2018年前端校招的核心能力模型1.1 技术栈的时代背景聊这套卷子之前得先还原一下2018年的前端技术环境不然你很难理解为什么题目长那样。那年头前后端分离已经成了主流共识但 MVVM 框架的“三国杀”还没结束。Vue 2.x 凭借轻量、易上手、中文文档友好的优势在国内大厂里渗透率相当高React 的生态链趋于成熟Redux 几乎成了状态管理的默认答案Angular 则因为上手门槛和学习曲线在国内校招场景里存在感没那么强。当时百度内部San 这套自研框架也在推所以笔试题里对 MVVM 原理、组件通信、数据响应式的考察是重头戏。工程化方面webpack 3 正往 webpack 4 迁移配置文件还是大家每天要打交道的东西。很多人对它的理解停留在“照着官网抄一版配置能跑就行”对 loader 和 plugin 的区别、Tree Shaking 原理、代码分割逻辑这些更深层的问题其实是一知半解的。所以这类题目出现在笔试卷里天然具备筛选功能——刷过题的和真正写过项目的答出来的深度完全不一样。浏览器兼容性也是一个绕不开的话题。2018年那会儿IE 的份额虽然在下滑但国内很多政企项目还在用兼容 IE9/10 是不少团队的硬指标。所以卷子里出现事件对象兼容、getElementById 和 querySelector 的区别这类题目一点都不意外。1.2 能力考察的五个维度结合这份“第三批”试卷的出题风格外加我后来参与校招面试、也帮忙出过笔试题的经验基本可以把前端校招笔试的考察维度总结成五块JavaScript 语言功底原型链、闭包、作用域、this 指向、异步编程回调、Promise这些是雷打不动的考点占了卷面最大比重。浏览器与网络基础渲染机制、事件循环、HTTP 缓存、从输入 URL 到页面展示的完整过程考察的是你对前端运行环境的理解深度。CSS 与页面布局盒模型、BFC、Flex 布局、定位、层叠上下文以及移动端适配的基础方案。框架与工程化MVVM 原理、组件通信、生命周期、数据响应式、构建工具配置逻辑。算法与逻辑思维虽然不像后端那样考手写红黑树但字符串处理、数组去重、排序、简单动态规划这类题目还是会出现的通常用 JavaScript 实现限时写 code。从这五个维度也能看出大厂校招前端考的不是你会用多少个框架 API而是你对“Web 到底怎么工作”这条底层链路的理解。框架三年一小变五年一大变但浏览器原理、HTTP 协议、JavaScript 语言机制这些东西十年下来基本盘没变过。2. 题型拆解与高频考点从一张卷子看前端知识体系2.1 基础与语言类题目原型、闭包、异步是永远的神这套卷子的前端基础部分延续了百度一贯的风格——不玩偏题怪题但把经典考点挖得很深。原型与原型链几乎是必考的。常见考法是给你一段代码问输出结果比如function Foo() {} Foo.prototype.getName function() { console.log(foo) }; const foo new Foo(); foo.getName(); Foo.prototype.getName function() { console.log(bar) }; foo.getName();这里考的就是“实例通过原型链查找方法是动态查找而不是复制”所以第二次重写原型上的方法后旧实例调用到的也是新方法。这个点看着简单但真到卷子上很多人会被绕进去因为脑子里的模型还是 Java 那套“方法绑定在类上”的思维。闭包的考法更偏向实际的防抖节流实现或 setTimeout 循环打印的经典题。我记得一个比较有区分度的变形是同时考察闭包和块级作用域for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); }如果你答不出 5 个 5 以及两种修改方案let 声明 / 立即执行函数包裹那这道题基本就暴露了作用域理解不到位。笔试里这类题很容易从“打印了什么”延伸到“为什么”和“怎么改”答的时候一定要顺手把原理讲透。Promise 与异步顺序是另一个高权重考点。题目会让你分析一段包含 Promise、setTimeout、async/await 的代码执行顺序。做这类题核心只有一件事把宏任务和微任务的队列模型吃透。我见过太多人死记硬背输出顺序结果题目只要换个位置、加一层 then 就翻车。正确的准备方式是自己在控制台把各种组合都打一遍形成肌肉记忆。2.2 浏览器与网络渲染机制和 HTTP 缓存占据半壁江山浏览器相关的题目在试卷里占了不小的篇幅。从 URL 输入到页面渲染的完整过程几乎是送分题同时也是送命题——因为考察深度可以无限延展。如果只答到“DNS解析、建立TCP连接、发送HTTP请求、解析HTML构建DOM树、构建CSSOM、布局、绘制”这个层面只能拿基础分。但如果你能在合适的位置插一句“DOM 树构建过程遇到 script 标签会阻塞解析所以要考虑 defer/async”面试官对你的印象就会明显不一样。HTTP 缓存也是一个高频考点。强缓存Expires、Cache-Control和协商缓存Last-Modified/ETag的优先级关系、304 流程、以及不同场景下缓存策略的选择这些都需要掌握到能默写流程图的熟练度。我有个比较实用的类比强缓存就像你点外卖时直接吃冰箱里的剩菜不用问卖家协商缓存则是你打电话问卖家“你家菜还新鲜吗”卖家说还新鲜你才下单。这么一想优先级和适用场景就好记多了。事件循环和事件流也是常客。事件捕获、目标、冒泡的三阶段模型以及 addEventListener 的第三个参数这些属于基础中的基础。但要小心出题人喜欢在 DOM 事件里嵌套微任务制造“点击事件中的 Promise 和 setTimeout 顺序”这类复合型问题单纯背概念是扛不住的。2.3 框架与工程化响应式原理是分水岭到框架这部分区分度就开始拉大了。对于 Vue 2.x最常考的是数据响应式原理——核心就是 Object.defineProperty 对数据的 getter/setter 进行劫持配合发布订阅模式实现视图更新。这类题的经典陷阱是为什么 Vue 2 不能检测数组索引变化和对象属性的新增/删除答案大家都知道因为 defineProperty 只能劫持已有属性数组索引的新增和对象属性的动态添加没有走 setter所以 Vue 2 才提供了 $set 这样的补救 API。对比来看React 的考法更偏向设计理念虚拟 DOM 为什么快、Fiber 架构解决了什么问题、函数组件和类组件的区别、受控组件和非受控组件。2018 年那会儿 Hooks 还没正式发布React 16.8 是 2019 年初的事所以卷面上更多还是类组件为主。但不管 Hooks 后来怎么普及“状态驱动视图更新”这个核心思维没变过。工程化方面webpack 的考察基本围绕这几点loader 和 plugin 的区别、常见的 loader 有哪些、如何做代码分割、Tree Shaking 的基本原理和前提条件。这里有个非常经典的坑很多人以为 Tree Shaking 是 webpack 自动完成的其实它依赖 ES Module 的静态结构在打包阶段分析 import/export 的使用情况把没用的导出“摇掉”。如果你用的是 CommonJS那就天然不支持 Tree Shaking因为 require 是运行时行为。这类题用来考察工程化认知深度非常有效。2.4 算法与逻辑不是难题是“基础题工程思维”很多前端同学一看算法就发怵但说实话大厂前端笔试的算法要求整体比后端友好得多。这份卷子里的算法题大致能归成两类第一类是语言基础题比如手写数组去重、字符串反转、递归实现深拷贝。这些题目考察的核心不是算法本身有多难而是你用 JavaScript 写代码时是否熟练、能否避开浅拷贝的坑、能否在递归中注意循环引用问题。深拷贝这个题尤其值得注意——能想到用 WeakMap 存已拷贝对象来避免循环引用这在面试官眼里是一个很大的加分项说明你不是只看过博客而是真的写过复杂项目。第二类是简单到中等的算法题比如找出字符串中最长不重复子串的长度、判断括号匹配、数组扁平化并去重排序。这些题目基本就是 LeetCode 简单难度但如果大学四年没刷过题、没搞过 ACM现场手写还是容易翻车。备考策略就是去 LeetCode 上把“栈、队列、哈希表、双指针、字符串”这几个高频 tag 下的简单和中等题刷个 50 道左右前端的算法要求基本就覆盖了。3. 拿到题目后应该怎么答答题策略与踩坑复盘3.1 时间分配的实战经验笔试的硬伤往往是时间不够尤其是主观编程题一写就是半小时。以“第三批”这类卷子的坑位设置来估算单选多选大概 20 题左右简答 3-4 题编程题 2-3 题总时长通常在 90-120 分钟。我的建议是选择题和简答题总耗时不要超过 45 分钟。选择题里遇到拿不准的先按直觉选一个并打标记不要在单题上死磕。简答题按“要点全、解释简”的原则作答——每道题列出核心关键词或流程后面用一两句话展开先把能拿的分拿住不要想着把每道简答都写成长文。编程题留足 40-60 分钟因为除了写代码本身你还要处理输入输出、边界条件、自测用例这些都非常消耗时间。具体的答题顺序上我建议先把三道编程题都通读一遍从最简单的开始做。人的大脑在连续解决两个小问题后会进入一个比较专注的节奏这时候再去碰最难的题状态是最好的。千万别一上来就啃最难的题卡壳半小时心态崩了后面简单题也没时间写。3.2 几道典型题的现场复盘这里还原一道我在模拟这套卷子时印象极深的题也是面试里反复出现的经典请实现一个函数将数组中的所有 0 移到末尾同时保持非零元素的相对顺序。要求在原数组上操作尽量减少操作次数。很多人的第一反应是 splice push遇到 0 就删掉再推到末尾。这个思路能过简单用例但面试官会追问你在遍历过程中动态修改数组长度索引会错位怎么办更优的解法是双指针——一个指针遍历数组另一个指针指向下一个非零元素该放的位置遇到非零就交换。function moveZeroes(nums) { let slow 0; for (let fast 0; fast nums.length; fast) { if (nums[fast] ! 0) { [nums[slow], nums[fast]] [nums[fast], nums[slow]]; slow; } } return nums; }这道题给我最大的启发是校招笔试考的不是你会不会背这道题而是你能不能从“暴力解法”走向“最优解”并解释清楚为什么双指针能保证 O(n) 时间且只遍历一遍。写完之后加上一两句注释说明思路也会让面试官读起来更顺。另一类容易丢分的是手写 Promise 实现。当年这道题杀伤力极大因为它既考异步、又考状态机、还考发布订阅。我后来跟不少候选人聊过能在一小时以内独立写出完整版的人确实不到三分之一。如果你正在备考建议把 Promise 的构造函数、then、resolve、reject、all、race 这几个核心部分都自己实现一遍理解了再背而不是死记模板。这一点我后面还会展开讲。3.3 笔试中的“隐性扣分点”经验之外还要聊聊笔试里那些不写在卷面上的隐形扣分项。第一变量命名和代码风格。很多人的笔试代码喜欢用 a、b、c 这种命名循环里用 i、j 就算了业务函数也这么搞面试官阅卷体验会很差。保持变量名有语义、函数职责单一、缩进统一这些不需要额外花多少时间但给人留下的印象差别很大。第二边界条件处理。写深拷贝的人很多但能在代码里主动处理 null、函数、Symbol、循环引用的很少。笔试阅卷时只要代码里出现处理循环引用的逻辑哪怕实现不太完美都会比那些“三行版深拷贝”高一个档次。第三注释说明思路。代码之上标一段“这里用双指针保证 O(n) 复杂度slow 指向已排好的最后一个非零位置fast 扫描整个数组”面试官一眼就能看出你有算法意识而不是碰巧写对。4. 前端校招备考的长期路线从笔试到 Offer4.1 基础重建不要靠“刷题感”蒙混过关很多人备考前端校招的方式是刷题刷完就感觉自己会了。但我要说句实在话笔试可以靠刷题突击但面试一定不行。所以如果你还没到临考前一个月我强烈建议你走一遍“基础重建”的路线把地基打牢而不是只背面试题。JavaScript 基础方面把《JavaScript 高级程序设计第3版》的核心章节读透——作用域、闭包、原型、继承、事件、异步、JSON、Ajax。这本书虽然老旧但语言机制这块写得非常扎实。读完后再配合一些现代的补充内容比如 ES6 的新特性、Promise/async 的演进整体的语言功底就非常能打了。浏览器和网络方面推荐把“从输入 URL 到页面呈现”这条链路自己画一遍每一步都补充 HTTP 协议细节。比如 TLS 握手是几次、TCP 队头阻塞是怎么回事、Content-Type 有哪几种、Cookie 和 Web Storage 的取舍。能独立讲清楚这些面试官在浏览器原理这一块基本问不倒你。CSS 方面把盒模型、BFC/IFC、Flex 布局、Grid 布局、层叠上下文、移动端 rem/vw 适配这几个主题整理成自己的知识地图。然后配合“双栏布局”“圣杯布局”“等高布局”等经典场景手写一遍不要依赖现成代码。这里最容易出的坑是你能说出 BFC 是什么但让你用代码触发一个 BFC 并说明解决的问题就卡壳了。4.2 项目经验如何成为“免死金牌”校招简历上最常见的项目无非是“仿XX商城”“XX后台管理系统”这类项目如果没有深度笔试可能都过不了。但同样是这些项目有些人就能写出花来关键是看你怎么包装和怎么从项目里挖考点。我当时复盘的时候发现自己做的项目中有一个“大数据量列表渲染卡顿”的问题。这个问题很小但是我的处理方案是有层次感的先用虚拟滚动解决渲染性能再分析为什么要用 IntersectionObserver 代替滚动监听再讨论哪些数据需要做 immutable 更新。这样一个问题就串起了“浏览器渲染原理、性能优化、React/Vue 更新机制”三个大考点。另一个从项目里挖考点的思路是做完一个功能后主动问自己五个“为什么”。为什么这里用 flex 而不是 float为什么这个组件的数据放 Vuex/Redux 而不是组件内部 state为什么接口请求要加 loading 状态为什么这个列表要用分页而不是一次性加载这些“为什么”想清楚了写在简历上面试官就能看出你有工程思维想不清楚刷再多题也没用。4.3 笔试之后的面试联动校招的笔试和面试往往是连着的笔试只是第一关后面还有电话面、现场面、HR 面。很多人在笔试阶段就把所有精力耗光了面试反而状态下滑非常可惜。笔试之后到面试之间我建议你做两件事。第一把笔试卷里所有做错的题和不确定的题重新梳理一遍答案尤其是编程题要能自己在编辑器里重新实现一次。第二把项目里涉及的技术点扩展成一篇八股文——自己讲给自己听确保逻辑闭环。比如项目里用了 webpack 的代码分割你就需要能回答代码分割有哪几种方式动态 import 的底层原理是什么SplitChunksPlugin 的默认配置参数是什么怎么验证你的分割策略是合理的面试和笔试最大的区别在于面试官会根据你说的内容随机追问你无法预测下一个问题。所以后面这条“项目自问自答”路线是性价比最高的备考方式。5. 一些可能没人告诉你的经验5.1 笔试不是终点是筛选起点2018 年那会儿“海投简历海量笔试”是一个很常见的校招节奏。我一个同学投了 30 多家公司笔试做了 15 场最后拿到的 Offer 跟笔试成绩也不完全正相关——有些公司笔试表现一般但面试聊得好一样能进有些笔试分数很高但面试暴露出基础不扎实照样被刷。所以对待笔试的正确心态是把它当成一次基础能力的筛选而不是一锤定音的判决。笔试过了说明你的基础达到了门槛面试才是展示你综合能力的舞台。很多人太看重笔试分数遇到模棱两可的题目就慌了反倒影响正常发挥这是最亏的。同样重要的是笔试试卷本身是一份极好的学习大纲。每做完一套题不管结果如何把错题整理成一份“知识盲区清单”按“完全不会/了解但说不清/会但速度慢”三个等级分类然后针对性地补强。这套方法我后来带实习生的时候也在用效果好过盲目刷新题。5.2 2018年的卷子放到今天还有参考价值吗这是我在写这篇文章时反复思考的问题。从技术栈的角度看2018 年的卷子确实旧了Vue 3 已经是默认选择React Hooks 全面普及webpack 虽然还在用但 Vite 已经抢走了大量新项目的份额TypeScript 也已经成为生产项目的标配。但把这张卷子的题目“翻译”成今天的版本你会发现考察逻辑几乎没有变化当年考 Vue 2 的 Object.defineProperty 响应式今天考 Vue 3 的 Proxy 响应式当年考 webpack 的 Tree Shaking 原理今天考 Vite 的依赖预构建和 ESBuild当年考 Promise 实现和宏微任务今天依然可以原封不动地出现在面试里。所以我的结论是这类历史笔试卷的价值不在于题目本身而在于它帮你建立的前端知识框架。只要这个框架够稳无论技术栈怎么变你都能快速把新知识安放到合适的位置上。这也是为什么我一再强调备考前端校招千万不能只看框架文档和刷题核心的语言基础、浏览器原理、网络知识、工程化认知才是穿越技术周期的硬通货。如果你正在准备校招不妨找几份 2018、2019 年的大厂前端笔试卷不限百度腾讯、阿里、字节的都行先不查资料做一遍再对照答案逐题复盘。这个过程可能有些打击人但请相信我把五份这样的卷子吃透你的前端基本功一定会有肉眼可见的提升。