百度2019校招Web前端工程师笔试卷第一批这个名字一看就是奔着大厂校招去的。我当年也刷过不少类似的卷子现在回头看这类笔试卷考察的核心其实很稳定基础扎不扎实、动手能力强不强、遇到问题有没有清晰的排查思路。Web前端岗位这些年变化很快框架换了一茬又一茬但校招笔试的风格反而一直很朴素不会问你“用过什么最新特性”更多是拿几道基础题和手写题看看你代码功底到底怎么样。这篇文章我打算围绕这套笔试卷展开从考察逻辑、考点拆解、答题思路到备考方法完整梳理一遍。不管你是正在准备校招还是已经工作几年想查漏补缺这篇内容都会对你有用。我不会只讲“这道题怎么做”而是尽量讲清楚“为什么这么考”“背后的原理是什么”“还有哪些同类变体”这样你换一套卷子也能应对。1. 这套笔试卷在考察什么从题目结构看大厂选人逻辑1.1 整体题型分布与考察目标百度2019校招前端的笔试卷第一批题型上跟当时大多数一线互联网公司保持了一致的风格选择题含单选和多选、简答题、手写代码题混合。选择题覆盖的面很宽从HTML标签语义、CSS布局特性到JavaScript运行机制、浏览器原理都有简答题则偏重概念解释和场景分析手写代码题是区分度最高的部分往往直接决定你能不能进入下一轮面试。这份卷子最难能可贵的一点是它并不追新。2019年的时候Vue和React已经非常流行了TypeScript也在升温但卷子里的重点仍然放在原生JavaScript上框架相关的内容占比不高。这说明出题人的核心思路是框架可以入职后学但语言功底和计算机基础短期内补不出来。这一逻辑到今天依然成立现在的校招笔试虽然增加了工程化、Node相关题目但底层考察点从来没变过。1.2 为什么这些考点被反复翻牌大家如果有印象前端面试题里翻来覆去就是那些闭包、原型链、事件循环、跨域、性能优化。有人觉得烦说“工作中根本用不到闭包啊”但笔试考这些不是没有道理的。举个例子闭包表面上是“函数嵌套函数、内部函数引用外部变量”的语法现象但真正理解闭包意味着你理解作用域链、变量生命周期、内存回收。这些概念直接关系到代码里会不会出现意外共享状态、内存泄漏、回调函数里this丢失等线上问题。原型链更是JavaScript面向对象的基础组件化开发中继承、方法复用的实现都离不开它。事件循环则决定了代码执行的顺序尤其在前端异步场景爆炸的今天一套交互里全是Promise、setTimeout、requestAnimationFrame不理解事件循环调试都会一头雾水。所以说笔试题目看起来“基础”实际上是在用最少的题目探测你的计算机功底和思维方式。这是大厂选人成本最低、效率最高的一种方式。2. 核心考点详细拆解拿到题目后应该怎么想2.1 HTML与CSS布局实战与细节陷阱HTML和CSS在笔试中通常不会太难但题目的坑往往藏在细节里。盒模型是必考项标准盒模型box-sizing: content-box和IE盒模型border-box的区别要能直接说清楚padding和border到底算不算在width内这是写布局的第一步。CSS布局的考察一般集中在三块居中方案、两栏/三栏布局、BFC清除浮动。居中问题经常以选择题形式出现问“下列哪个方案能实现水平和垂直居中”选项里可能有margin: auto、flex、绝对定位加transform、line-height等平时每种方案都要自己敲一遍考试才不会掉坑。比如flex布局的justify-content: center和align-items: center组合只有容器有确定高度时垂直居中才有效如果容器高度塌陷这个方案就失效了。笔试里如果有手写CSS的题建议按“从低版本兼容到高版本”的思路作答。比如实现三栏布局可以先写浮动再写flex最后补充grid同时把各自的适用场景和兼容性问题写清楚这样能体现你的方案意识而不只是会背代码。清除浮动的方式也要准备一套标准答案父级overflow: hidden、伪元素clear: both、父级也浮动等每个方案的触发条件和缺点都要说清楚。2.2 JavaScript基础考点原型、作用域与this指向JavaScript是笔试的重头戏百度这份卷子里JS题目占比非常高。选择题里常考的是类型判断、作用域、this指向手写题则偏向数组方法、防抖节流、深浅拷贝这类工具函数的实现。先说this指向。这个知识点看似简单但每一道题都能变形。核心规律只有一条this的指向取决于函数被调用时的方式而不是定义时的位置。普通函数调用this指向全局严格模式下是undefined对象方法调用this指向该对象构造函数调用this指向新创建的实例箭头函数没有自己的this它捕获定义时外层作用域的this。笔试里最常见的变形是“取出对象方法再单独调用”很多同学看到这样的代码直接懵其实只要记住“谁调用this指向谁”再落到具体代码上分析一遍就能解决。原型链的考察通常不会让你画整条链而是给一段代码问“输出什么”。比如定义一个构造函数在prototype上挂方法再new两个实例其中一个加了自有属性让你判断属性访问结果。这类题目建议先画出原型链再逐个属性往上找养成这个习惯后基本不会出错。2.3 异步编程与事件循环从看代码到写代码事件循环类的题百度的卷子里几乎每年都有。常考形式是给出一段混着setTimeout、Promise、async/await的代码让你说出输出顺序。这类题想拿分必须把浏览器的执行模型吃透同步代码先执行遇到微任务Promise.then、queueMicrotask放进微任务队列遇到宏任务setTimeout、setInterval放进宏任务队列当前宏任务执行完清空整个微任务队列再取出下一个宏任务循环往复。记一个简单版本同一轮事件循环里微任务永远比宏任务先执行。async/await本质上是Promise的语法糖await后面的代码相当于被包进了then回调里所以它也是微任务。笔试里面最常出错的点就是明明先写了setTimeout后写了Promise结果Promise先输出。原因就在于Promise属于微任务即使代码写在前面也得等当前宏任务结束后统一执行。如果卷子里有手写异步代码常见的是手写Promise.all、手写带并发限制的请求池等。这类题我要单独拎出来讲因为它们是笔试手写题里性价比最高的准备方向。3. 框架与工程化考察不追新但要懂原理3.1 框架考点生命周期和响应式原理2019年前后面试的时候React和Vue已经占据主导笔试里也会涉及框架题目但不会太深。Vue的考察重点是响应式原理和生命周期。响应式原理要能说清楚Object.defineProperty如何拦截数据读写、每个组件实例的Watcher如何收集依赖、数据变化后如何通知视图更新。同时也要知道Vue 3的Proxy是怎么实现的以及它解决了defineProperty数组和新增属性监听的问题。React的考点则集中在setState的批处理机制、生命周期尤其是旧版componentWillMount到新版getDerivedStateFromProps的变化、虚拟DOM和diff算法。很多人会背“key的作用是优化diff”但笔试如果让你具体说“diff算法怎么对比新旧节点”很多人就卡住了。这里的关键是同层对比、类型不同直接替换、类型相同只更新属性、列表通过key来复用。其实不需要把源码背下来把这三个原则用白话讲清楚再把key的作用结合场景说透就能拿不错的分数。3.2 工程化与浏览器原理性能题背后的知识体系工程化相关的笔试题目这几年越来越多。Webpack的考察点集中在loader和plugin的区别、构建流程、打包优化手段代码分割、Tree Shaking、缓存。这类题想答好最好真的去配过一遍Webpack因为很多说法只有配过才知道怎么回事。比如Tree Shaking生效的前提是模块使用ES Module语法且没有副作用这个条件在commonjs时代是不具备的。浏览器相关的题目也值得重视。渲染过程的基本链路是解析HTML生成DOM树、解析CSS生成CSSOM树、合并成渲染树、布局Layout、绘制Paint、合成Composite。性能优化的题目就是从这条链路往下展开的减少重排重绘、使用CSS动画代替JS操作DOM、图片懒加载、路由懒加载、代码分割、CDN加速、HTTP缓存。答这类题目要注意分点、有逻辑最好结合“用户可感知的加载指标”FCP、LCP、CLS来讲会让你的答案更显专业。4. 实操过程与核心环节实现两道手写题的完整解题思路4.1 手写防抖函数debounce防抖是笔试题里出现频率最高的手写题之一百度的卷子里也经常出变形比如“实现一个带立即执行选项的防抖函数”。别小看这道题能一次写对的人并不多。先明确防抖的核心思路事件触发后等待N秒再执行回调如果N秒内再次触发就重新计时。最基础的版本十行以内就能写完function debounce(fn, wait) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); timer null; }, wait); }; }这里有几个关键点必须说明。第一timer需要存在闭包里否则每次调用都会被重新初始化为null防抖就失效了。第二回调函数里用fn.apply(this, args)而不是直接fn(args)是为了保证事件处理函数内部的this指向正确比如在Vue组件里作为方法使用时this要指向组件实例。第三返回的函数必须是普通函数而不是箭头函数否则this会被绑定到定义时的外层作用域。笔试如果让你“加一个立即执行选项”思路也不难。加一个immediate参数如果为true则第一次触发时立即执行后续触发在等待期内不执行等待期结束后重新开放。实现时要维护一个记录“是否已执行过”的状态function debounce(fn, wait, immediate) { let timer null; return function(...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); }; }注意这里必须把timer重新置为null因为timer不单单是计时器句柄它还充当了“是否处于等待期”的状态标记。这道题能把这个细节写清楚基本就是满分答案。4.2 手写instanceof实现instanceof也是笔试常客。常规考察方式是问“instanceof的原理是什么”进阶版是让你手写一个。它的核心逻辑是检测某个对象是否出现在另一个构造函数的原型链上。function myInstanceof(left, right) { let proto Object.getPrototypeOf(left); const prototype right.prototype; while (proto) { if (proto prototype) return true; proto Object.getPrototypeOf(proto); } return false; }这里有两个要注意的边界。一个是left必须是非空对象或函数如果left是基本类型直接返回false另一个是right必须是函数否则拿right.prototype会报错。笔试场上可以先把这两个判断加上再写主体逻辑代码显得更严谨。另外如果能顺手提一句“Symbol.hasInstance可以自定义instanceof的行为”会让面试官觉得你对JS的元编程也有了解是加分项。4.3 手写深拷贝面试中最容易暴露问题的一道题深拷贝是另一个高频手写题。很多人上来就写JSON.parse(JSON.stringify(obj))这个答案如果作为简答题可以拿一部分分但作为手写题基本要被扣分因为它丢失了undefined、函数、Symbol、循环引用等场景。一个能覆盖大部分场景的深拷贝函数大约需要二十行function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }循环引用的问题必须处理不处理就会栈溢出。这里用WeakMap存储“原对象到克隆对象”的映射关系遇到循环引用时直接返回已经克隆过的对象。为什么用WeakMap不用Map因为WeakMap是弱引用不会阻止垃圾回收在原对象被回收后WeakMap里的键值对也会被自动清理不会造成内存泄漏。这道题如果能把“为什么不直接用Map”这个点说出来面试官通常都会眼前一亮。5. 笔试实战中的常见问题与排查经验5.1 选择题丢分的心理误区很多人在选择题上丢分不是因为不会而是因为读题太急。前端笔试题里选择题经常会在题干里埋“坑”。举个例子问“下列哪种方式能解决跨域问题”选项里同时出现“CORS”和“JSONP”好像都是对的但题目可能限定条件是“只支持GET请求的场景”那答案就变成了JSONP。再比如CSS题里四个选项都是实现居中的方案但题目问的是“在不改变DOM结构的情况下”那flex方案就废了。我的建议是选择题先划关键词再来看选项尤其是碰到“正确的是”“不正确的是”“优先使用的是”这些词一定要放慢速度。多选题丢分更加可惜很多知识点你其实知道只是没注意到选项里的“不一定”“都”“必须”这类绝对化表述。遇到这种词默认先数一遍它是不是真的成立多数情况下绝对化选项都是有条件的。5.2 手写题的排错思路与时间分配手写代码题最大的痛点是思路明明正确但代码一跑就报错。这通常集中在几个问题上分号缺失导致语法解析错误、变量名拼写不一致、函数参数漏传、this指向发生变化。笔试题的代码量不大报错之后先按这几个方向排查比干瞪眼有效得多。时间是笔试里最容易失控的资源。一份卷子七八十道题如果每道选择题都纠结到手写题的时候心态已经崩了。我的习惯是选择题先快速过一遍能确定的直接选不确定的标记一下最后统一回头看手写题先审清楚题目要求再打个草稿理思路最后写到答题区域。手写题里如果有“实现一个XXX函数”的题尽量给出完整可运行的版本哪怕多写几行边界判断也比只写一个空壳框架强。因为阅卷人看的是你的工程习惯边界处理能力是校招场上很关键的分水岭。5.3 复盘是提升最快的方式每次刷完一套卷子不要只看分数更该做的是把每一道错题都拆开找出错因。比如这道题错在“不知道这个API”那就在知识树上补上这一点如果错在“知道这个API但用错了场景”就该想一想它和相似API的边界在哪里。我习惯准备一个错题文档按“HTML/CSS、JS基础、异步、框架、网络、工程化”分类记录并标注错误类型概念不清、记忆模糊、粗心、场景不熟。这样考前翻一遍错题文档效率比重新刷十套卷子还要高。6. 从这份笔试卷反推出来的备考策略6.1 复习优先级排序如果你现在距离校招还有两到三个月建议按“核心基础、计算机基础、框架原理、工程化工具”的顺序安排时间。JS的原生知识点一定是第一优先级因为无论哪一场笔试手写题都集中在JS上而且这些题没有办法临时抱佛脚只能靠反复练习。CSS的复习策略是“重布局、轻特技”。Flex、Grid、定位、浮动、BFC这些高频考点要熟练掌握而冷门选择器、生僻属性了解即可。计算机网络是容易被忽视的一块尤其是HTTP缓存、HTTP/HTTPS、TCP三次握手、跨域解决方案这些在笔试里的出现率非常高。数据结构与算法方面数组、字符串、链表相关的简单到中等难度题目一定要刷到位尤其是排序、去重、两数之和这类经典题基本是每场笔试都会碰到的。6.2 手写题怎么练才有效手写题最怕“眼睛会了手不会”。看十遍答案不如自己在编辑器里敲一遍。建议每天挑两到三个高频手写题关掉题解从零开始写写完再对照标准答案看差异。重点关注的是边界条件的处理比如空值、参数顺序、隐式类型转换这些容易忽略的地方。还有一个小技巧不要只用一个方式实现。比如防抖先写基础版再写带立即执行版再想想能不能用箭头函数改一版最后再想想“如果需求变成节流代码要改哪里”。这样你学会的不是一道题而是一类题。笔试里的手写题从来不会原封不动地照搬题库更多是微调需求你掌握的是变化的规律而不是静态的答案。6.3 笔试之外的功夫把知识点串成体系这是我特别想强调的一点。备考笔试不应该是孤立的刷题而是借刷题的机会完善自己的知识体系。比如你刷到一道关于“浏览器缓存”的题不要只记“强缓存返回200 from cache协商缓存返回304”而是把整个链路串起来浏览器发起请求、命中强缓存直接读本地、未命中则带上缓存标识去服务器、服务器返回304或200、响应头里的Cache-Control和ETag如何配合。如果这个链路你脑中是有画面的无论题目怎么变形都不会怕。同样遇到“跨域”这个考点可以串出三个层次为什么会有跨域、常用的解决方案有哪些JSONP、CORS、代理、每个方案的原理和局限分别是什么。把知识点织成网之后你不仅答笔试更稳后续面试环节也会明显有底气。7. 纸上谈兵没用考场上的实操节奏与注意事项7.1 拿到试卷前五分钟应该做什么很多同学上考场第一件事就是埋头做题这其实不是最优解。我的建议是先花两到三分钟把整张试卷浏览一遍看清楚总题量、题型分布、以及手写题具体有几道。这样做有两个好处一是能根据题目难度分配时间二是能提前发现哪些题是自己薄弱的做到心中有数。比如你发现手写题有三道其中有一道是“实现一个带并发限制的异步请求池”这道题你不太熟悉那就应该在选择题上加快速度给手写题预留更多时间。相反如果你发现选择题里有一半都是计算机网络题而你刚复习过那就可以轻松一些把省出来的时间留给后面的难题。7.2 答题区域的表达方式代码排版和注释手写题不是只给代码就能稳拿分写在答题区域的代码能不能让阅卷人快速看懂也很重要。建议遵循几个基本规范函数名和变量名要有语义关键逻辑加上一句注释代码缩进保持一致每个函数之间留出空行。不要小看这些细节手写题阅卷通常很快一个结构清晰、注释得当的答案跟一份混乱的代码给阅卷人的印象是完全不同的。如果你是先在草稿纸上推演再誊写那就更要注意誊写的时候别漏行尤其是return语句。手写题最可惜的失分方式就是逻辑全对但代码因为少了一个return或者一个括号而变成死代码。7.3 遇到不会做的题别直接放弃笔试过程中一定会遇到一两道完全没思路的题。这种情况最忌讳的是空着不写。哪怕是简答题你也可以把自己知道的相关概念往上靠把思考过程写出来。阅卷人给分的时候通常会判断你是否具备“可培养的潜力”而不是要求你每个知识点都掌握。一道“手写Promise.all”的题如果你完整写出了Promise基本用法和all的语义但没写出并发处理的细节也能拿到一部分过程分。对于选择题如果确实不会可以先用排除法去掉明显错误的选项再在剩余选项里用“最不违背常识”原则做判断。但这些都是下策最好的策略永远是考前把高频考点啃透让“不会做”的概率降到最低。8. 最后再分享一点实战经验刷完百度这套笔试卷以及同期的其他大厂题目之后我最大的体会是前端校招笔试拼的不是天赋而是信息差和熟练度。信息差指的是你知不知道考点大概有哪些、范围在哪里熟练度则是你面对一道题能不能在短时间内给出结构完整的答案。这两样东西都可以通过有针对性的刷题和总结快速提升。备考期间我坚持做的一件小事是把每次手写题遇到的边界条件单独整理到一个文档里。比如“防抖函数里timer null 放在哪一步”“深拷贝里WeakMap存的是哪个方向”“instanceof第一个参数传基本类型会怎样”。这道题看着琐碎但考试的时候发现很多丢分点恰恰就是这些细节。你平时记录得越细考场上的错误就越少。如果你现在正处在校招备考阶段别慌按部就班地把JS基础、CSS布局、网络协议、算法基础这四块夯实再配合高频手写题的反复练习百度这套卷子的题型基本都能拿下来。更重要的是你在准备过程中建立起的知识体系会陪伴你走过后续的每一轮面试甚至入职后的前几年都一直在受益。这就是我想说的笔试只是关卡真正值钱的是你为了过关而积累下来的能力。 百度前端校招笔试卷解析：核心考点与手写题实战攻略
百度2019校招Web前端工程师笔试卷第一批这个名字一看就是奔着大厂校招去的。我当年也刷过不少类似的卷子现在回头看这类笔试卷考察的核心其实很稳定基础扎不扎实、动手能力强不强、遇到问题有没有清晰的排查思路。Web前端岗位这些年变化很快框架换了一茬又一茬但校招笔试的风格反而一直很朴素不会问你“用过什么最新特性”更多是拿几道基础题和手写题看看你代码功底到底怎么样。这篇文章我打算围绕这套笔试卷展开从考察逻辑、考点拆解、答题思路到备考方法完整梳理一遍。不管你是正在准备校招还是已经工作几年想查漏补缺这篇内容都会对你有用。我不会只讲“这道题怎么做”而是尽量讲清楚“为什么这么考”“背后的原理是什么”“还有哪些同类变体”这样你换一套卷子也能应对。1. 这套笔试卷在考察什么从题目结构看大厂选人逻辑1.1 整体题型分布与考察目标百度2019校招前端的笔试卷第一批题型上跟当时大多数一线互联网公司保持了一致的风格选择题含单选和多选、简答题、手写代码题混合。选择题覆盖的面很宽从HTML标签语义、CSS布局特性到JavaScript运行机制、浏览器原理都有简答题则偏重概念解释和场景分析手写代码题是区分度最高的部分往往直接决定你能不能进入下一轮面试。这份卷子最难能可贵的一点是它并不追新。2019年的时候Vue和React已经非常流行了TypeScript也在升温但卷子里的重点仍然放在原生JavaScript上框架相关的内容占比不高。这说明出题人的核心思路是框架可以入职后学但语言功底和计算机基础短期内补不出来。这一逻辑到今天依然成立现在的校招笔试虽然增加了工程化、Node相关题目但底层考察点从来没变过。1.2 为什么这些考点被反复翻牌大家如果有印象前端面试题里翻来覆去就是那些闭包、原型链、事件循环、跨域、性能优化。有人觉得烦说“工作中根本用不到闭包啊”但笔试考这些不是没有道理的。举个例子闭包表面上是“函数嵌套函数、内部函数引用外部变量”的语法现象但真正理解闭包意味着你理解作用域链、变量生命周期、内存回收。这些概念直接关系到代码里会不会出现意外共享状态、内存泄漏、回调函数里this丢失等线上问题。原型链更是JavaScript面向对象的基础组件化开发中继承、方法复用的实现都离不开它。事件循环则决定了代码执行的顺序尤其在前端异步场景爆炸的今天一套交互里全是Promise、setTimeout、requestAnimationFrame不理解事件循环调试都会一头雾水。所以说笔试题目看起来“基础”实际上是在用最少的题目探测你的计算机功底和思维方式。这是大厂选人成本最低、效率最高的一种方式。2. 核心考点详细拆解拿到题目后应该怎么想2.1 HTML与CSS布局实战与细节陷阱HTML和CSS在笔试中通常不会太难但题目的坑往往藏在细节里。盒模型是必考项标准盒模型box-sizing: content-box和IE盒模型border-box的区别要能直接说清楚padding和border到底算不算在width内这是写布局的第一步。CSS布局的考察一般集中在三块居中方案、两栏/三栏布局、BFC清除浮动。居中问题经常以选择题形式出现问“下列哪个方案能实现水平和垂直居中”选项里可能有margin: auto、flex、绝对定位加transform、line-height等平时每种方案都要自己敲一遍考试才不会掉坑。比如flex布局的justify-content: center和align-items: center组合只有容器有确定高度时垂直居中才有效如果容器高度塌陷这个方案就失效了。笔试里如果有手写CSS的题建议按“从低版本兼容到高版本”的思路作答。比如实现三栏布局可以先写浮动再写flex最后补充grid同时把各自的适用场景和兼容性问题写清楚这样能体现你的方案意识而不只是会背代码。清除浮动的方式也要准备一套标准答案父级overflow: hidden、伪元素clear: both、父级也浮动等每个方案的触发条件和缺点都要说清楚。2.2 JavaScript基础考点原型、作用域与this指向JavaScript是笔试的重头戏百度这份卷子里JS题目占比非常高。选择题里常考的是类型判断、作用域、this指向手写题则偏向数组方法、防抖节流、深浅拷贝这类工具函数的实现。先说this指向。这个知识点看似简单但每一道题都能变形。核心规律只有一条this的指向取决于函数被调用时的方式而不是定义时的位置。普通函数调用this指向全局严格模式下是undefined对象方法调用this指向该对象构造函数调用this指向新创建的实例箭头函数没有自己的this它捕获定义时外层作用域的this。笔试里最常见的变形是“取出对象方法再单独调用”很多同学看到这样的代码直接懵其实只要记住“谁调用this指向谁”再落到具体代码上分析一遍就能解决。原型链的考察通常不会让你画整条链而是给一段代码问“输出什么”。比如定义一个构造函数在prototype上挂方法再new两个实例其中一个加了自有属性让你判断属性访问结果。这类题目建议先画出原型链再逐个属性往上找养成这个习惯后基本不会出错。2.3 异步编程与事件循环从看代码到写代码事件循环类的题百度的卷子里几乎每年都有。常考形式是给出一段混着setTimeout、Promise、async/await的代码让你说出输出顺序。这类题想拿分必须把浏览器的执行模型吃透同步代码先执行遇到微任务Promise.then、queueMicrotask放进微任务队列遇到宏任务setTimeout、setInterval放进宏任务队列当前宏任务执行完清空整个微任务队列再取出下一个宏任务循环往复。记一个简单版本同一轮事件循环里微任务永远比宏任务先执行。async/await本质上是Promise的语法糖await后面的代码相当于被包进了then回调里所以它也是微任务。笔试里面最常出错的点就是明明先写了setTimeout后写了Promise结果Promise先输出。原因就在于Promise属于微任务即使代码写在前面也得等当前宏任务结束后统一执行。如果卷子里有手写异步代码常见的是手写Promise.all、手写带并发限制的请求池等。这类题我要单独拎出来讲因为它们是笔试手写题里性价比最高的准备方向。3. 框架与工程化考察不追新但要懂原理3.1 框架考点生命周期和响应式原理2019年前后面试的时候React和Vue已经占据主导笔试里也会涉及框架题目但不会太深。Vue的考察重点是响应式原理和生命周期。响应式原理要能说清楚Object.defineProperty如何拦截数据读写、每个组件实例的Watcher如何收集依赖、数据变化后如何通知视图更新。同时也要知道Vue 3的Proxy是怎么实现的以及它解决了defineProperty数组和新增属性监听的问题。React的考点则集中在setState的批处理机制、生命周期尤其是旧版componentWillMount到新版getDerivedStateFromProps的变化、虚拟DOM和diff算法。很多人会背“key的作用是优化diff”但笔试如果让你具体说“diff算法怎么对比新旧节点”很多人就卡住了。这里的关键是同层对比、类型不同直接替换、类型相同只更新属性、列表通过key来复用。其实不需要把源码背下来把这三个原则用白话讲清楚再把key的作用结合场景说透就能拿不错的分数。3.2 工程化与浏览器原理性能题背后的知识体系工程化相关的笔试题目这几年越来越多。Webpack的考察点集中在loader和plugin的区别、构建流程、打包优化手段代码分割、Tree Shaking、缓存。这类题想答好最好真的去配过一遍Webpack因为很多说法只有配过才知道怎么回事。比如Tree Shaking生效的前提是模块使用ES Module语法且没有副作用这个条件在commonjs时代是不具备的。浏览器相关的题目也值得重视。渲染过程的基本链路是解析HTML生成DOM树、解析CSS生成CSSOM树、合并成渲染树、布局Layout、绘制Paint、合成Composite。性能优化的题目就是从这条链路往下展开的减少重排重绘、使用CSS动画代替JS操作DOM、图片懒加载、路由懒加载、代码分割、CDN加速、HTTP缓存。答这类题目要注意分点、有逻辑最好结合“用户可感知的加载指标”FCP、LCP、CLS来讲会让你的答案更显专业。4. 实操过程与核心环节实现两道手写题的完整解题思路4.1 手写防抖函数debounce防抖是笔试题里出现频率最高的手写题之一百度的卷子里也经常出变形比如“实现一个带立即执行选项的防抖函数”。别小看这道题能一次写对的人并不多。先明确防抖的核心思路事件触发后等待N秒再执行回调如果N秒内再次触发就重新计时。最基础的版本十行以内就能写完function debounce(fn, wait) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); timer null; }, wait); }; }这里有几个关键点必须说明。第一timer需要存在闭包里否则每次调用都会被重新初始化为null防抖就失效了。第二回调函数里用fn.apply(this, args)而不是直接fn(args)是为了保证事件处理函数内部的this指向正确比如在Vue组件里作为方法使用时this要指向组件实例。第三返回的函数必须是普通函数而不是箭头函数否则this会被绑定到定义时的外层作用域。笔试如果让你“加一个立即执行选项”思路也不难。加一个immediate参数如果为true则第一次触发时立即执行后续触发在等待期内不执行等待期结束后重新开放。实现时要维护一个记录“是否已执行过”的状态function debounce(fn, wait, immediate) { let timer null; return function(...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); }; }注意这里必须把timer重新置为null因为timer不单单是计时器句柄它还充当了“是否处于等待期”的状态标记。这道题能把这个细节写清楚基本就是满分答案。4.2 手写instanceof实现instanceof也是笔试常客。常规考察方式是问“instanceof的原理是什么”进阶版是让你手写一个。它的核心逻辑是检测某个对象是否出现在另一个构造函数的原型链上。function myInstanceof(left, right) { let proto Object.getPrototypeOf(left); const prototype right.prototype; while (proto) { if (proto prototype) return true; proto Object.getPrototypeOf(proto); } return false; }这里有两个要注意的边界。一个是left必须是非空对象或函数如果left是基本类型直接返回false另一个是right必须是函数否则拿right.prototype会报错。笔试场上可以先把这两个判断加上再写主体逻辑代码显得更严谨。另外如果能顺手提一句“Symbol.hasInstance可以自定义instanceof的行为”会让面试官觉得你对JS的元编程也有了解是加分项。4.3 手写深拷贝面试中最容易暴露问题的一道题深拷贝是另一个高频手写题。很多人上来就写JSON.parse(JSON.stringify(obj))这个答案如果作为简答题可以拿一部分分但作为手写题基本要被扣分因为它丢失了undefined、函数、Symbol、循环引用等场景。一个能覆盖大部分场景的深拷贝函数大约需要二十行function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }循环引用的问题必须处理不处理就会栈溢出。这里用WeakMap存储“原对象到克隆对象”的映射关系遇到循环引用时直接返回已经克隆过的对象。为什么用WeakMap不用Map因为WeakMap是弱引用不会阻止垃圾回收在原对象被回收后WeakMap里的键值对也会被自动清理不会造成内存泄漏。这道题如果能把“为什么不直接用Map”这个点说出来面试官通常都会眼前一亮。5. 笔试实战中的常见问题与排查经验5.1 选择题丢分的心理误区很多人在选择题上丢分不是因为不会而是因为读题太急。前端笔试题里选择题经常会在题干里埋“坑”。举个例子问“下列哪种方式能解决跨域问题”选项里同时出现“CORS”和“JSONP”好像都是对的但题目可能限定条件是“只支持GET请求的场景”那答案就变成了JSONP。再比如CSS题里四个选项都是实现居中的方案但题目问的是“在不改变DOM结构的情况下”那flex方案就废了。我的建议是选择题先划关键词再来看选项尤其是碰到“正确的是”“不正确的是”“优先使用的是”这些词一定要放慢速度。多选题丢分更加可惜很多知识点你其实知道只是没注意到选项里的“不一定”“都”“必须”这类绝对化表述。遇到这种词默认先数一遍它是不是真的成立多数情况下绝对化选项都是有条件的。5.2 手写题的排错思路与时间分配手写代码题最大的痛点是思路明明正确但代码一跑就报错。这通常集中在几个问题上分号缺失导致语法解析错误、变量名拼写不一致、函数参数漏传、this指向发生变化。笔试题的代码量不大报错之后先按这几个方向排查比干瞪眼有效得多。时间是笔试里最容易失控的资源。一份卷子七八十道题如果每道选择题都纠结到手写题的时候心态已经崩了。我的习惯是选择题先快速过一遍能确定的直接选不确定的标记一下最后统一回头看手写题先审清楚题目要求再打个草稿理思路最后写到答题区域。手写题里如果有“实现一个XXX函数”的题尽量给出完整可运行的版本哪怕多写几行边界判断也比只写一个空壳框架强。因为阅卷人看的是你的工程习惯边界处理能力是校招场上很关键的分水岭。5.3 复盘是提升最快的方式每次刷完一套卷子不要只看分数更该做的是把每一道错题都拆开找出错因。比如这道题错在“不知道这个API”那就在知识树上补上这一点如果错在“知道这个API但用错了场景”就该想一想它和相似API的边界在哪里。我习惯准备一个错题文档按“HTML/CSS、JS基础、异步、框架、网络、工程化”分类记录并标注错误类型概念不清、记忆模糊、粗心、场景不熟。这样考前翻一遍错题文档效率比重新刷十套卷子还要高。6. 从这份笔试卷反推出来的备考策略6.1 复习优先级排序如果你现在距离校招还有两到三个月建议按“核心基础、计算机基础、框架原理、工程化工具”的顺序安排时间。JS的原生知识点一定是第一优先级因为无论哪一场笔试手写题都集中在JS上而且这些题没有办法临时抱佛脚只能靠反复练习。CSS的复习策略是“重布局、轻特技”。Flex、Grid、定位、浮动、BFC这些高频考点要熟练掌握而冷门选择器、生僻属性了解即可。计算机网络是容易被忽视的一块尤其是HTTP缓存、HTTP/HTTPS、TCP三次握手、跨域解决方案这些在笔试里的出现率非常高。数据结构与算法方面数组、字符串、链表相关的简单到中等难度题目一定要刷到位尤其是排序、去重、两数之和这类经典题基本是每场笔试都会碰到的。6.2 手写题怎么练才有效手写题最怕“眼睛会了手不会”。看十遍答案不如自己在编辑器里敲一遍。建议每天挑两到三个高频手写题关掉题解从零开始写写完再对照标准答案看差异。重点关注的是边界条件的处理比如空值、参数顺序、隐式类型转换这些容易忽略的地方。还有一个小技巧不要只用一个方式实现。比如防抖先写基础版再写带立即执行版再想想能不能用箭头函数改一版最后再想想“如果需求变成节流代码要改哪里”。这样你学会的不是一道题而是一类题。笔试里的手写题从来不会原封不动地照搬题库更多是微调需求你掌握的是变化的规律而不是静态的答案。6.3 笔试之外的功夫把知识点串成体系这是我特别想强调的一点。备考笔试不应该是孤立的刷题而是借刷题的机会完善自己的知识体系。比如你刷到一道关于“浏览器缓存”的题不要只记“强缓存返回200 from cache协商缓存返回304”而是把整个链路串起来浏览器发起请求、命中强缓存直接读本地、未命中则带上缓存标识去服务器、服务器返回304或200、响应头里的Cache-Control和ETag如何配合。如果这个链路你脑中是有画面的无论题目怎么变形都不会怕。同样遇到“跨域”这个考点可以串出三个层次为什么会有跨域、常用的解决方案有哪些JSONP、CORS、代理、每个方案的原理和局限分别是什么。把知识点织成网之后你不仅答笔试更稳后续面试环节也会明显有底气。7. 纸上谈兵没用考场上的实操节奏与注意事项7.1 拿到试卷前五分钟应该做什么很多同学上考场第一件事就是埋头做题这其实不是最优解。我的建议是先花两到三分钟把整张试卷浏览一遍看清楚总题量、题型分布、以及手写题具体有几道。这样做有两个好处一是能根据题目难度分配时间二是能提前发现哪些题是自己薄弱的做到心中有数。比如你发现手写题有三道其中有一道是“实现一个带并发限制的异步请求池”这道题你不太熟悉那就应该在选择题上加快速度给手写题预留更多时间。相反如果你发现选择题里有一半都是计算机网络题而你刚复习过那就可以轻松一些把省出来的时间留给后面的难题。7.2 答题区域的表达方式代码排版和注释手写题不是只给代码就能稳拿分写在答题区域的代码能不能让阅卷人快速看懂也很重要。建议遵循几个基本规范函数名和变量名要有语义关键逻辑加上一句注释代码缩进保持一致每个函数之间留出空行。不要小看这些细节手写题阅卷通常很快一个结构清晰、注释得当的答案跟一份混乱的代码给阅卷人的印象是完全不同的。如果你是先在草稿纸上推演再誊写那就更要注意誊写的时候别漏行尤其是return语句。手写题最可惜的失分方式就是逻辑全对但代码因为少了一个return或者一个括号而变成死代码。7.3 遇到不会做的题别直接放弃笔试过程中一定会遇到一两道完全没思路的题。这种情况最忌讳的是空着不写。哪怕是简答题你也可以把自己知道的相关概念往上靠把思考过程写出来。阅卷人给分的时候通常会判断你是否具备“可培养的潜力”而不是要求你每个知识点都掌握。一道“手写Promise.all”的题如果你完整写出了Promise基本用法和all的语义但没写出并发处理的细节也能拿到一部分过程分。对于选择题如果确实不会可以先用排除法去掉明显错误的选项再在剩余选项里用“最不违背常识”原则做判断。但这些都是下策最好的策略永远是考前把高频考点啃透让“不会做”的概率降到最低。8. 最后再分享一点实战经验刷完百度这套笔试卷以及同期的其他大厂题目之后我最大的体会是前端校招笔试拼的不是天赋而是信息差和熟练度。信息差指的是你知不知道考点大概有哪些、范围在哪里熟练度则是你面对一道题能不能在短时间内给出结构完整的答案。这两样东西都可以通过有针对性的刷题和总结快速提升。备考期间我坚持做的一件小事是把每次手写题遇到的边界条件单独整理到一个文档里。比如“防抖函数里timer null 放在哪一步”“深拷贝里WeakMap存的是哪个方向”“instanceof第一个参数传基本类型会怎样”。这道题看着琐碎但考试的时候发现很多丢分点恰恰就是这些细节。你平时记录得越细考场上的错误就越少。如果你现在正处在校招备考阶段别慌按部就班地把JS基础、CSS布局、网络协议、算法基础这四块夯实再配合高频手写题的反复练习百度这套卷子的题型基本都能拿下来。更重要的是你在准备过程中建立起的知识体系会陪伴你走过后续的每一轮面试甚至入职后的前几年都一直在受益。这就是我想说的笔试只是关卡真正值钱的是你为了过关而积累下来的能力。