先说结论如果想在2023年百度秋招前端岗笔试里拿到面试机会拼的不只是刷了多少题而是“会用浏览器登录赛码网答题、能读懂输入输出格式、能在高压下把手上的活稳定输出”这三件事。我是在8月底投递的简历9月初收到笔试邮件整个笔试过程加上复盘前后花了大概两周最后顺利走到了面试环节。这篇文章不是面经搬运是我个人在赛码网真实考试环境里的完整记录和踩坑总结希望能给准备大厂前端笔试的同学省点弯路。1. 笔试全流程复盘从投简历到读完笔试邮件1.1 笔试邮件里的关键信息排查投递百度前端岗之后邮箱里收到的笔试邀请一般会写明考试平台、时间段、考试时长和注意事项。我当时收到的是赛码网的链接邮件里会附一个专属的考试地址点击进去之后会先进入信息确认页核对姓名、手机号、邮箱然后进行设备检测。这个环节最容易被忽略的两件事是摄像头权限和浏览器兼容性。赛码网笔试通常要求开启摄像头和麦克风监控浏览器建议用Chrome或Edge并且要提前允许网站使用摄像头不然考试开始后弹权限框会非常慌。我的建议是提前一天就把设备检测流程走一遍不要等到考试前半小时才折腾。另一个要点是考试时间段。百度秋招笔试一般会给出一个时间区间比如“2023年9月9日 14:00-16:00”或者更灵活的开放时间段需要在有效期内选择一次进入。如果是固定时间千万不要卡点进我当时提前了15分钟结果系统提示考场尚未开放等了十分钟后才进入。这个等待过程容易让人焦虑但正常现象。1.2 赛码网考试环境与设备调试赛码网的前端笔试环境有几个特点第一是选择题在线作答可以回看和修改第二是编程题为在线OJ模式需要自己处理输入输出第三是全程会进行实时监控包括切屏检测和摄像头抓拍。切屏检测是很多人会踩的坑。我在做题过程中切了几次屏幕去查别的窗口结果考试结束后录播回放记录里会显示切屏次数。虽然百度不一定因为切屏直接淘汰你但这类行为如果过于频繁在后台会被标记极有可能影响最终评分。所以考前务必把考试期间可能用到的资料提前打开或者干脆不要依赖外部资料。设备调试方面建议准备一台带摄像头的电脑网络尽量稳定。我记得考试过程中有一次网络波动页面卡顿了几秒赛码网会有一个“重新连接”的提示但不会暂停计时这种意外会白白浪费宝贵的答题时间。有条件的话尽量用有线网络或者保证路由器不要被其他设备占用。1.3 笔试的时间分配与整体节奏2023年百度前端岗笔试的题型大致分为三部分选择题、简答题、编程题。不同批次的题量和分值会有差异我那一场是30道选择题单选多选、2道简答题、3道编程题总时长120分钟。我的时间分配策略是选择题控制在45分钟内简答题25分钟编程题45分钟最后留5分钟检查。这里很多人会犯一个错误——在选择题上死磕尤其是多选题拿不准的不确定项会反复推敲结果编程题时间不够。多选题一般是有漏选得一半分、错选不得分的规则所以除非非常确定否则宁少选不多选。编程题建议按照从易到难的顺序做。赛码网的题目列表会显示题号但不保证难度递增所以先快速扫一眼三道题的题干挑出最有思路的先写拿到基础分再回来啃难题。这个习惯我在笔试里吃到了不少红利因为最难的那道题我最后只写了一个暴力版本照样能拿部分用例分。2. 选择题里的高频陷阱基础考点比想象中细2.1 JavaScript运行时输出题事件循环与作用域百度前端笔试选择题的大头永远是JavaScript其中事件循环输出题和闭包/作用域题出现频率极高。先说事件循环经常给一段代码让你判断输出顺序比如setTimeout、Promise、async/await、微任务和宏任务混在一起。我印象很深的一道题是async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); async1(); new Promise(resolve { console.log(promise1); resolve(); }).then(() { console.log(promise2); }); console.log(script end);这道题在网络上一搜到处都是但笔试场上能一次写对的人不多。关键点在于async函数中await之前的代码是同步执行的await后面的代码相当于被放入微任务队列整个script代码本身也是一次宏任务执行完同步代码后再处理微任务微任务清空后再执行下一个宏任务。输出顺序是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。我当时做的时候没有多想考完复盘才发现这个顺序的坑在于promise2和async1 end的顺序——因为async2执行完后await返回一个Promiseasync1 end 被注册为微任务比promise2的then要早一个微任务队列的位置所以先输出async1 end。闭包和作用域链的题也很刁钻尤其是结合var和let的区别。比如经典for循环中setTimeout的i值问题改成let之后为什么能输出正确结果选择题选项里往往会混入“let会创建新的词法环境”和“let每次迭代都重新声明变量”这两种表述需要你选出最本质的解释。准备这类题没有捷径建议把事件循环的完整机制、微任务宏任务的各种排列组合刷熟尤其是await的深入行为以及async/await与Promise混写的情况。网上有一份很经典的“事件循环面试题大合集”我当时练习了大概40道笔试里遇到的基本都是变体。2.2 浏览器原理与网络协议从缓存到跨域选择题的第二大高频区块是浏览器原理和网络。百度笔试对http缓存、跨域、安全防御这三块特别偏爱几乎每次都会有。http缓存的核心在于强缓存和协商缓存的区分。选择题通常会给出一个响应头表格让你判断某个资源在特定场景下是否会命中缓存或者Cache-Control和Expires同时存在时谁的优先级更高。这里需要记住Cache-Control优先级大于Expiresno-cache不是不缓存而是每次使用前需要向服务端验证private和public的区别在于是否允许中间代理缓存。这些细节很容易混淆建议整理成对比表来记。跨域相关的题会问“以下哪种方式可以解决跨域”“JSONP的缺点是什么”“postMessage适用于什么场景”。很多人知道CORS、JSONP、代理这些词但分不清它们的适用边界。笔试里的典型陷阱是JSONP只能支持GET请求并且需要服务端配合回调函数而CORS虽然支持所有HTTP方法但需要服务端设置Access-Control-Allow-Origin响应头前端配置并不能单独解决跨域。网络安全方面XSS和CSRF的区别几乎是必考项。需要你能写出XSS是攻击者把恶意脚本注入到页面中执行重点是“注入”CSRF是引导用户在已登录的网站上执行非本意的请求重点是“借刀杀人”。选择题里经常给一个攻击场景让你判断属于哪种漏洞并且要选出正确的防御方案比如CSP、HttpOnly、CSRF Token、SameSite Cookie等。2.3 CSS布局与页面渲染的考察重点CSS的题在百度笔试里占比不算特别高但考察点很固定flex布局、grid布局、盒模型、BFC、层叠上下文、CSS选择器优先级。flex布局的题最常见的问法是“给定以下flex属性判断子元素的排列方向或不换行表现”比如flex-direction: column-reverse、flex-wrap: wrap-reverse、flex: 1、flex: 0 0 100px这些。flex: 1实际上是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写但很多人以为flex: 1等价于flex-grow: 1忽略了对flex-basis的重置选择题里如果把这个作为选项会因为“flex-basis属性同样被改变导致元素宽度计算方式不同”而不完全正确。盒模型那边主要考点是content-box和border-box的区别以及width的计算方式。这里的坑在于使用border-box时width包含padding和border但不包含margin而JS中offsetWidth和clientWidth的取值差异也经常被拿出来考。BFC的题一般是一个浮动元素高度塌陷的场景问你如何清除浮动或者触发BFC。常见触发条件要背熟overflow不为visible、float不为none、display为inline-block/flex/grid/table-cell、position为absolute/fixed。我记得有一道多选题就是列出四个选项让你选出哪些能创建BFC其中一个错误选项是position: relative因为position: static和relative都不会触发BFC。2.4 框架与工程化React/Vue原理、Webpack核心2023年的前端笔试如果问框架基本离不开React和Vue的原理性内容。百度笔试更喜欢问思想层面的东西比如“React中的key有什么作用”“Vue的响应式原理基于什么”“虚拟DOM的diff算法复杂度”。关于key的作用答题时一定要提到key帮助diff算法识别节点是否复用从而最小化DOM操作不建议用数组索引作为key因为插入或删除元素时索引会变化可能导致状态错乱。选择题的陷阱选项往往是“key是用于提高渲染性能的唯一标识”这种半对半错的说法因为key的本意是追踪节点身份性能提升是它的附带效果而不是主要目的。Vue的响应式原理在选择题里一般是版本对比Vue2使用Object.defineProperty劫持数据Vue3使用Proxy代理。考察点在于defineProperty的局限无法检测新增属性和数组下标直接赋值的变化所以Vue2才提供了Vue.set和this.$set。如果选项里出现“Proxy能够检测到对象属性删除操作”这也是一个正确描述。工程化方面Webpack的loader和plugin的区别在选择题里面出现过。loader用于转换模块的源代码在import文件时预处理plugin则用于执行范围更广的任务如打包优化、资源管理、环境变量注入。一道常见的多选题给几个工具名问哪些是loader、哪些是plugin比如babel-loader、css-loader、HtmlWebpackPlugin、MiniCssExtractPlugin。只要记住loader的名字里基本都带“-loader”plugin一般以Plugin结尾基本不会错。3. 简答题没有标准答案但需要踩中得分点3.1 笔试中常见简答题的答题结构百度前端笔试的简答题通常不是纯背诵而是给一个实际场景让你分析。我当时遇到的两道题一题是“如何优化首屏加载速度请结合前端工程化手段说明”另一题是“什么是前端路由请对比hash路由和history路由的原理及优缺点”。这类题的得分点不是“你有没有听说过这个词”而是你有没有结构化的表达。我自己的答题套路是先说定义再说原理然后列手段最后结合具体工具或代码说明。比如优化首屏加载速度不能只写“压缩JS、CSS、图片”而是要把每一项展开代码分割用React.lazy还是动态import、作用域提升用webpack的什么配置、图片用WebP还是CDN缓存、服务端用SSR还是预渲染以及每一项为什么能加速首屏。如果遇到不会的题千万别留白。简答题是按点给分的你写出的每一个合理的关键词都可能变成得分点。哪怕只知道某一个概念的表面含义也要用尽量通顺的语言把它描述出来因为阅卷时如果踩中关键词依然能拿到部分分数。3.2 为什么会考性能优化和安全防护从2023年百度前端笔试的题目倾向来看简答题非常偏爱“性能优化”和“安全”这两大场景因为这两个主题最能体现你是否有真实项目的体感而不是只会在LeetCode里刷题。性能优化题的回答框架可以这样搭网络层CDN、HTTP缓存、资源合并、渲染层减少DOM操作、避免重排重绘、CSS动画使用transform、构建层代码分割、Tree Shaking、压缩混淆、交互层懒加载、骨架屏、虚拟滚动。每个方向至少写一个具体方案并说明解决的问题。比如懒加载解决的是图片和组件在首屏非必要加载的问题虚拟滚动解决的是长列表一次性渲染过多节点导致卡顿的问题。安全防护的题则更偏向实际场景。比如“前端如何防御XSS攻击”要写出的核心点包括对用户输入进行转义、使用CSP限制脚本来源、给cookie设置HttpOnly防止被JS读取、对富文本内容进行白名单过滤。如果题目给了具体业务的上下文比如“评论区功能”你还应该提到前端展示时不要使用v-html或dangerouslySetInnerHTML直接渲染用户输入的内容这能体现出你的代码安全习惯。3.3 如何用“项目经历原理”的方式组织简答简答题一个容易被忽视的得分技巧是如果题目问“你如何做XX”尽量在回答中加入自己的项目实践用实际案例来佐证。这样既显得回答不空洞也能让阅卷人相信你确实做过而不是临时背八股。比如题目问“如何解决前端跨域问题”你就不能只罗列CORS、JSONP、nginx代理三种方案而应该说在最近做的XX项目中前端部署在A域名接口服务在B域名我们采用的是CORS方案后端设置了允许的origin并且请求时携带了withCredentials和token同时由于项目里有图片上传需求遇到自定义Header的问题需要在服务端配置allowedHeaders。这样的回答比纯理论要有说服力得多。不过要注意分寸——简答题的篇幅不等于长篇大论。每个问题通常给一块空白区域没有严格字数上限但你写太多也会稀释重点。我在考场里的策略是每个点用一个小标题或数字编号引出来比如“1. 网络层优化压缩合并、CDN、HTTP缓存”让阅卷者一眼看到结构比一大段文字更友好。4. 编程题实战赛码网OJ模式下的输入输出坑4.1 赛码网的输入输出规范与本地调试百度笔试的编程题用的是赛码网OJ模式这意味着你提交的是完整的可运行程序需要从标准输入读取数据、向标准输出打印结果。和LeetCode的那种已经给你封装好函数签名的方式完全不同很多刷惯了LeetCode的同学在这里会翻车。赛码网JavaScriptNode.js模式下的输入输出模板大概是这样的const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout }); let lines []; rl.on(line, line { lines.push(line.trim()); }).on(close, () { // 此时lines数组里是每一行输入 // 处理逻辑写在这里 });这里有几个容易踩的坑第一赛码网的若干输入用例是在同一个程序里连续输入的不能只处理一行就结束。如果只用一次readline读一行后面的用例就不会被处理结果直接判错。第二如果题目输入第一行是数字n接下来有n行数据需要自己根据lines[0]计算出要处理的范围而不是一次性把所有行全部解析成同一个数据结构。第三要记得用trim()去掉每一行的空格和换行符但也要注意某些情形下要去除的是空格而不是换行按行split后就不要再trim了避免把字符串内部本来存在的空格误删。我在考试前提前准备了一个模板文件里面写好了读一行、读多行、读矩阵、读不定行数的几种常见模式。考试时直接把题目数据套进去就行大大节省了调试时间。4.2 典型题目拆解从暴力解到最优解编程题一般3道难度分布大约是一道简单偏中等一道中等一道中等偏难。我遇到的题目有一个是类数组去重排序的变种一个是最短路径的变种一个是动态规划。类数组去重排序那题题意大致是给一串以逗号分隔的数字要求去掉重复项并按照某种自定义规则排序输出。这道题简单但存在一个陷阱输入可能是负数、可能是大数排序规则不是默认的数字升序而是按绝对值的倒序。如果不用Array.from(new Set(arr)).sort((a, b) Math.abs(b) - Math.abs(a))一次性处理而是在sort里硬写逻辑很容易在负数的情况下出错。最短路径那题是二维网格的变体每格有代价求从左上角到右下角的最小代价。这个题一眼就能看出是动态规划或者Dijkstra。因为网格较大我考虑到如果做BFS会超时所以直接用动态规划。其实解题的关键是先把递推公式写清楚dp[i][j] grid[i][j] Math.min(dp[i-1][j], dp[i][j-1])然后注意边界条件。最难的那道动态规划题我当场没有想出完美的状态转移只写了一个暴力搜索。根据赛码网的评分机制暴力解如果能在小规模用例下通过也能拿到部分分数所以千万不要因为想不出最优解就不写代码。当时我大概能跑到30%的测试用例也算没有白费。4.3 时间复杂度的判断与优化思路赛码网的编程题会给出数据范围比如n 10^5如果你用的算法复杂度达到O(n^2)在超大数据量下必然超时。所以拿到题的第一件事不是急着写代码而是先通过数据范围倒推期望的复杂度。一般来说n 20可以用递归或状态压缩DP。n 10^5期望是O(n)或O(n log n)可以排序、二分、双指针。n 10^6只能O(n)要非常注意常数因子和输入输出的效率。如果涉及图的最短路V 10^5用Dijkstra堆优化V 500可以考虑Floyd但好像笔试不常考这种。如果条件允许我有个小技巧先用暴力法把答案跑出来再对随机小规模输入和最优解做对拍确保思路正确后再提交。这个习惯在LeetCode上很好用但赛码网的在线编辑器没有对拍能力所以我们只能在本地写代码通过赛码网的输入样例做初步验证。我考试时的做法是先读题假设有思路就在本地IDE里写一个带样例的完整程序跑通样例后再贴到赛码网的代码提交区。这样可以利用本地Node.js的console语法调试过程比在线编辑器舒服太多。但要注意贴上来的代码不能有本地调试用的自定义输入不然判题系统会认为你在等待输入直接超时。5. 失分最多的五个环节与应对策略5.1 编程题边界条件与数据范围编程题最容易失分的地方不是算法本身而是边界条件。从我自己踩坑的经验来看有五个点是高频失分点第一空数组或空输入。很多题在n0时应当输出空行或特定提示但你写的for循环可能直接越界。第二单个元素的处理。排序题、最短路径题在只有一个元素时代码逻辑和多个元素完全不一样需要单独考虑。第三负数参与计算。当你对绝对值排序、对负数取余、或者在计算过程中出现负数时JavaScript的Math.abs和取模运算要格外小心。第四输入中包含空格或空行。赛码网的题目输入往往有几行以空格分隔的数字或字符串如果你用split( )处理遇到连续空格就会得到空字符串需要在过滤空字符串后进行数值转换。第五输出格式要求末尾无多余空格。很多在线OJ会严格要求输出格式最后一个元素后面不能有空格否则即使答案正确也会被判格式错误。我现场就吃过一次亏明明结果对了因为多了个空格那题直接没分。要规避这些问题最简单的办法是拿到题目后先手动构造几个边界用例比如空输入、单元素、最大最小值、包含重复项、包含负数的用例在本地跑一遍再提交到赛码网。5.2 简答题的语言组织和踩分意识简答题的失分往往不是不知道答案而是语言混乱、没有结构。我自己刚开始练习时遇到“说说你对前端工程化的理解”这种题会写一大段没有分点的话阅卷人根本找不到重点自然拿不到高分。一个万能的简答回答模板是“定义背景怎么做优缺点”。比如“什么是前端工程化”——先给定义工程化是将软件开发流程中的规范化、标准化和自动化应用到前端领域再说背景随着项目规模变大手工维护代码容易出问题然后列措施模块化、组件化、自动化构建、自动化测试、持续集成与部署最后点出优缺点提升了开发效率和代码可维护性但引入了学习和配置成本。踩分意识这一点一定要提。笔试不像面试不会等你把话说完阅卷人只会扫关键词。你必须把最重要的关键词比如“模块化”“自动化”“代码分割”“缓存”“diff算法”这些词尽可能多地体现在答案里。最好用加粗或者编号的方式把它们突出但在线笔试一般没有富文本编辑器所以用数字编号就足够了。5.3 考试环境下的心态与体力管理很多人忽略了一个问题两个小时的笔试是一场脑力和体力的双重消耗。我考试那天下午精神不太好做到编程题时明显感觉大脑转不动最终有一道题的边界条件没处理好。事后我非常后悔因为如果在前一晚好好休息、考试当天中午不过度进食结果可能会更好。这里分享几个我总结下来的考场操作习惯第一考前15分钟做几道简单题热身让大脑进入做题状态而不是考试开始后再慢慢热身。第二考试过程中如果遇到卡壳题果断跳过先做后面有把握的。不要在一道选择题上耗超过3分钟因为后面编程题的分数更值钱。第三如果编程题写了很久还是不对先把代码注释掉重新读一遍题确认输入输出格式有没有理解错。很多时候提交一次错误答案后会进入“思维惯性”越写越偏。第四保留最后的5分钟做整体检查登录信息是否正确、选择题有没有漏答、编程题是否都提交了。赛码网不会自动帮你提交未完成的代码如果时间到了还没提交等于白做。6. 笔试后的复盘把这场考试变成下一场的养料6.1 从笔试反推自己的知识盲区笔试结束后的半小时是复盘效率最高的时间。不要等到第二天因为届时你对题目细节的记忆就模糊了。我当时考完直接把能回忆出来的题目都记在备忘录里包括每道题的大意、我的答案和不确定的点。然后我按知识块整理了一份盲区清单事件循环的不同输出组合还没玩透http缓存的一些细节搞混了动态规划的中等难度题还会卡壳。针对这些盲区我用了大概一周时间做了专项补强——事件循环就集中刷题缓存就画时间线整理强缓存与协商缓存动态规划就按背包、序列、网格三种类型过一遍经典题。到面试的时候这些盲区基本都补上了。一个有用的方式把你投递的其他大厂的笔试题目也放在一起做横评。不同大厂虽然有各自偏好但核心题库高度重叠百度考过的题腾讯、字节、拼多多很可能换个壳继续考。真题的复用率比想象中高。6.2 后续笔试备考的实用建议根据2023年秋招的整体节奏百度前端笔试如果过了一般在两周内会收到面试通知。但同时期你大概率还会收到其他厂的笔试邀请所以备考不是考完就结束而是要持续滚动。我的建议是把笔试准备分成三层第一层是基础题保命每天保证一定量的选择题练习涉及JS、网络、CSS、框架第二层是算法题训练按照“数组/字符串、链表、树、图、动态规划、贪心”六大类刷常考题型每个类型至少刷20道数据范围注意看不要仅靠LeetCode默认的函数签名第三层是模拟考试每周至少找一套赛码网或牛客网的模拟卷限时完整走一遍流程。这里尤其想说赛码网和牛客网的系统要提前适应。很多同学在认真刷题但真正到了笔试平台连怎么读多行输入都要想半天自然影响发挥。建议至少提前在赛码网上做两三次模拟题把输入输出模板、判题规则、时间显示和切屏监控都先体验一遍考场上才能更从容。最后再分享一个小技巧笔试结束后不管感觉考得好不好都建议把回忆出来的题目发到社区或者自己的博客里。记录的过程本身就是一次高强度复盘而且过几天再回头看你会发现很多当时觉得很难的题其实只是某个原理没搞透这样的成长速度比单纯刷题快得多。