B站前端笔试卷B考点拆解：从JS原理到工程化实战

B站前端校招笔试卷B这套题到底在考什么作为一个带过不少应届生、也帮部门筛过简历的老前端我对这类笔试卷的套路还算熟悉。很多人一看到“哔哩哔哩2023校园招聘前端开发方向笔试卷B”就慌觉得题目偏、考点怪其实拆开来看它考察的无非就是前端开发的基本功、框架理解深度、工程化意识和临场解决问题的思路。这篇文章我就结合这套笔试卷的常见题型把每一类考点背后的逻辑、标准解法、以及阅卷人真正想看到的东西一次讲清楚。1. 整张试卷的结构与出题意图拆解1.1 笔试卷B的整体题型分布B站这套题和市面上大厂前端的校招笔试题结构差不多整体分为四块计算机基础与网络、JavaScript语言核心、CSS与页面布局、框架与工程化。偶尔会有一些开放性的设计题但占比不高。从题目顺序上看出题人明显是按“由底向上”的思路排的先确认你懂不懂浏览器和网络再考语言本身再看页面还原能力最后才看框架和工程化水平。笔试卷B相对A卷来说通常在JS基础部分会多一两道偏门题比如迭代器、生成器、Proxy代理这种平时业务里用得少、但是面试官觉得“你应该知道”的知识点。这不代表B卷更难而是考察覆盖面更广。很多人栽就栽在觉得题目不难、结果细节全错比如和的隐式转换规则、Promise微任务与setTimeout宏任务的执行顺序这些题不是不会是平时没钻那么细。1.2 为什么这两年笔试越来越“卷基础”很多同学给我留言说B站笔试里的题看着都眼熟但一做就错尤其是网络和浏览器原理的部分。我说句实在话这不是B站故意刁难人而是前端行业发展到今天光会写页面已经不行了。首屏加载要优化、接口要并发控制、前端要处理异常和降级这些都要求你对HTTP缓存、事件循环、渲染机制有真正的理解而不是停留在“用过axios”的层面。所以这套卷子的出题人想筛选的不是背题家而是基本功扎实、遇到问题能往底层钻的人。换句话说你可以没做过大型项目但你不能说不清楚“从输入URL到页面展示发生了什么”这种经典问题因为这是衡量一个前端是否“入门且合格”的底线。2. JavaScript核心考点语法陷阱与异步机制2.1 作用域、闭包与变量提升的经典组合题B卷里几乎必考的一类题是给一段代码问你输出什么。这类题表面上是考语法实际上是在考你对JavaScript执行机制的理解深度。比如常见的一道题for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }答案是打印5个5。但如果你把var换成let答案就变成0 1 2 3 4。这个考点背后是var声明是函数作用域循环结束后i已经变成了5而let是块级作用域每次迭代都会创建一个新的绑定。更深一层的问法是“如果不改var怎么让它输出0到4”这就有意思了for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }利用IIFE创建独立作用域把i的值传给j从而形成闭包捕获。2.2 this指向谁调用就指向谁除非你绑定了this的指向问题也是B卷高频考点。核心就一句话函数被谁调用this就指向谁箭头函数没有自己的this它继承外层作用域的this。最常见的一道题const obj { name: bilibili, getName: function() { return this.name; } }; const fn obj.getName; console.log(fn());答案是undefined因为fn()是普通调用this指向全局对象严格模式下是undefined取不到name属性。而obj.getName()才是正常调用输出bilibili。阅卷人真正想看的是你对call、apply、bind三个方法的区别是否清楚call和apply都会立即执行函数区别只在于传参方式不同一个是逐个传一个是传数组。bind不会立即执行而是返回一个新函数且绑定之后无法再次修改this。有一个很容易被忽略的坑多次bind只认第一次绑定的对象因为bind返回的新函数内部已经固化了一次this再bind并不会覆盖。2.3 事件循环微任务与宏任务的执行顺序“事件循环”这几年的出镜率极高B卷更是常态化考察。一道很典型的代码题console.log(1); setTimeout(() { console.log(2); }, 0); Promise.resolve().then(() { console.log(3); }); console.log(4);输出顺序是1、4、3、2。因为同步代码先执行微任务Promise.then在宏任务setTimeout之前执行。阅卷人还会进一步追问如果还有async/await怎么办这里有个细节需要注意await后面的代码可以理解为Promise.then的语法糖async function test() { console.log(5); await Promise.resolve(); console.log(6); } test(); console.log(7);输出是5、7、6。await后面的代码会被推迟到微任务队列中执行所以6会在同步代码结束之后才打印。很多人这里容易记混我建议你在准备笔试时把await当成“把后面的代码包进.then()里”来理解这样顺序就永远不会错。2.4 数组方法、解构与扩展运算符的细节题B卷还喜欢考数组方法的细节差异map会返回新数组forEach不会返回filter是过滤而不是修改reduce可以做累加、拍平数组、统计次数等等。扩展运算符也是热词比如“前端开发 函数 ...arg”这个话题下面考察的就是剩余参数与展开运算符的区别function sum(...args) { return args.reduce((a, b) a b, 0); } const nums [1, 2, 3]; console.log(sum(...nums)); // 6这里...nums是展开数组...args是收集剩余参数。考题经常会给你一个混合场景要求你说出两者的区别以及为什么arguments是类数组而不是真正的数组。能说清楚这些细节基本能证明你对ES6不是停留在“用过”的层面。3. CSS与页面布局从盒模型到响应式方案3.1 标准盒模型与怪异盒模型的区别CSS部分最常见的送分题是盒模型。标准盒模型下width只包含内容宽度不包含padding和borderIE怪异盒模型box-sizing: border-box下width包含内容、内边距和边框。现代前端开发规范里几乎清一色推荐border-box因为布局计算更直观不会出现“设置了宽度又撑爆”的尴尬场面。有一道经典题父容器宽度300px子元素设置width: 100%然后再加上padding: 20px在不设置box-sizing的情况下子元素实际占多少宽度答案是340px因为width: 100%算出来是300px再加上左右各20px的padding。这就是为什么好多新人写页面时发现元素溢出根子往往在盒模型上。3.2 水平垂直居中的五种方案对比“水平垂直居中”是笔试和面试都绕不开的题B卷也不例外。考察的核心不是你会一种而是你能不能在多个场景下给出合理方案方案适用场景是否推荐margin: 0 auto;块级元素水平居中简单场景推荐flex justify-content/align-items未知宽高的子元素现代布局首选position transform: translate(-50%, -50%)已知或未知宽高都行兼容性较好display: grid place-items: center网格布局新项目推荐text-align line-height单行文本仅文本场景你可能会问直接全用flex不就行了如果项目只跑现代浏览器完全没问题。但如果有兼容性要求比如要兼容老版本浏览器那flex虽然在大部分浏览器都没问题但仍有一些老旧环境不支持。实际开发里我一般会先看项目浏览器兼容范围再决定用哪种方案而不是无脑写flex。3.3 flex布局和grid布局的考点B卷里flex考点通常集中在这几个方面flex: 1是什么意思、flex-basis和width的关系、align-items与align-content的区别。很多人对flex: 1的理解是“占满剩余空间”这是不准确的。flex: 1其实是三个属性的缩写flex-grow: 1; flex-shrink: 1; flex-basis: 0%;意思是“既会放大也会缩小初始主轴长度为零”这样它才能真正按比例占据剩余空间。grid布局近年来也成为热门考点但我观察下来B卷考得不算深更多是让你比较grid和flex的适用场景。核心区分就一句话flex适合一维布局一行或一列grid适合二维布局同时处理行和列。比如页面整体骨架用grid导航栏内部排列用flex这是很常见的组合策略。4. 浏览器工作原理与前端性能优化实战4.1 从输入URL到页面渲染完整过程有哪些关键环节这题实际是“浏览器原理”的综合题B卷几乎每年都会出现而且分值不低。完整的回答链条是DNS解析 - 建立TCP连接 - 发送HTTP请求 - 服务器返回HTML - 浏览器解析HTML构建DOM树 - 解析CSS构建CSSOM树 - 合并成渲染树 - 计算布局 - 绘制像素 - 合成显示。很多人的问题在于只答了大框架漏掉了关键细节。我建议你这样补充解析HTML时如果遇到script标签会阻塞渲染所以script要加defer或async遇到link relstylesheet虽然不会阻塞DOM解析但会阻塞渲染所以要合理设置加载顺序。能把这些细节说清楚阅卷人立刻能判断出你是真写过页面而不是背了八股文。4.2 浏览器缓存机制强缓存和协商缓存怎么配合缓存机制也是B卷的高频考点因为直接关系到前端性能。强缓存通过Cache-Control和Expires实现命中的话浏览器根本不会发请求协商缓存通过Last-Modified/If-Modified-Since和ETag/If-None-Match实现需要发请求问服务器资源有没有变没变就返回304。有一个容易混淆的点Cache-Control: max-age3600和Expires同时存在时谁说了算答案是Cache-Control优先Expires是HTTP/1.0时代的产物时间格式是绝对时间受客户端时钟影响很大。实际开发里我们通常用Cache-Control为主ETag做兜底。前端开发者还要知道代码文件的缓存策略和接口是截然不同的。静态资源一般会加上hash值文件名.hash.js这样文件内容变了文件名就变可以放心设置很长时间的强缓存接口数据则不能随便缓存要用协商缓存或直接不缓存否则用户会看到过期数据。4.3 防抖、节流与性能优化手写题B卷的手写题里“防抖节流”跑不掉而且它不只是考代码更是考你有没有性能优化意识。防抖的核心思想是“触发事件后延迟执行如果延迟期间又触发就重新计时”function debounce(fn, delay 300) { let timer null; return function(...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }节流的核心思想是“一定时间内只执行一次”function throttle(fn, interval 300) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }笔试时你要额外写出为什么用fn.apply(this, args)而不是直接fn()因为要保证事件处理函数里的this指向正确。这个细节很多人会漏但恰恰是阅卷人区分“背代码”和“真理解”的关键。4.4 跨域问题CORS与JSONP的实现原理跨域是前端面试必问B卷也不例外。题目一般会问你什么情况会出现跨域怎么解决CORS方案需要后端怎么配合JSONP的工作原理是什么JSONP的核心其实是利用script标签不受同源策略限制的特性动态插入script标签请求接口后端返回一个函数调用的形式function jsonp(url, callbackName) { return new Promise((resolve, reject) { const script document.createElement(script); script.src ${url}?callback${callbackName}; window[callbackName] function(data) { resolve(data); document.body.removeChild(script); }; script.onerror reject; document.body.appendChild(script); }); }CORS则是更标准的方案需要后端返回Access-Control-Allow-Origin等响应头。你还需要清楚“简单请求”和“预检请求”的区别当请求方法为GET/POST且Content-Type为text/plain、multipart/form-data或application/x-www-form-urlencoded时属于简单请求直接发否则浏览器会先发一个OPTIONS预检请求确认服务端允许后才会正式请求。5. 框架原理与前端工程化Vue和React的底层逻辑5.1 Vue响应式原理从Object.defineProperty到ProxyB站技术栈里Vue用得很多所以B卷对Vue的考察比较重。最核心的一题就是响应式原理。Vue2通过Object.defineProperty拦截属性的get和set实现依赖收集和触发更新但这个方法有两个明显的短板一是无法监听新增属性和删除属性所以要提供Vue.set和Vue.delete二是对数组的原生方法支持有限所以Vue2要重写push、pop、shift、unshift、splice、sort、reverse等方法。Vue3改用Proxy代理整个对象天然支持属性新增和删除也能监听数组索引变化性能上还有提升。const reactive (obj) { return new Proxy(obj, { get(target, key, receiver) { track(target, key); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { const result Reflect.set(target, key, value, receiver); trigger(target, key); return result; } }); };这里有个细节值得多说一句为什么get里要用Reflect.get而不是直接target[key]因为Proxy配合Reflect可以保证this指向正确尤其是当目标对象存在继承关系或getter依赖this时Reflect能确保读取行为与语言默认行为一致。5.2 Vue生命周期与组件通信方式整理B卷里关于Vue生命周期的题通常不会只考“创建到销毁的顺序”而是会结合场景问你在哪个钩子里发请求为什么不在beforeCreated里发答案是因为created时data已经初始化完成而beforeCreated时data和methods都还没有你什么也拿不到。还有mounted时才能操作DOM所以依赖DOM的初始化要放这里。组件通信方式也是必考需要你列得全父子组件通信props往下传$emit往上发。兄弟组件通信通过共同的父级中转或者直接用事件总线。跨层级通信Vuex/Pinia状态管理或者provide/inject。任意组件通信事件总线或全局状态。B卷问“为什么不用$parent拿到父实例直接改数据”的概率也比较高。答案是为了数据流向清晰方便维护。如果随意跨层级改数据组件之间的耦合度会变得极高后期排查问题就像在一团乱麻里找线头。5.3 React核心思想虚拟DOM与Fiber机制B卷如果涉及React考得通常是三个点虚拟DOM、diff算法、Fiber调和机制。虚拟DOM的本质是“用JS对象描述UI结构”因为直接操作真实DOM的性能损耗太大所以先在JS层面计算差异再批量更新真实DOM。diff算法有三条核心规则同层比较、不同的类型直接替换、通过key去优化列表更新。写列表时为什么要用唯一的key因为diff算法可以通过key判断节点是否能复用。如果拿index当key当列表发生增删时可能会引发状态错位的问题。Fiber是React 16引入的并发机制核心目的是“将渲染任务拆分成一个个小单元可中断、可恢复”这样浏览器就能在空闲时间处理高优先级任务避免长任务阻塞主线程导致卡顿。笔试里你只要能把“可中断”和“优先级调度”这两个关键点答出来基本就拿到分了。5.4 前端工程化webpack的loader与plugin区别工程化部分B卷一般不会考特别深但loader和plugin的区别几乎是必问的。一句话版本loader是文件处理转换器负责将各种资源变成JS可识别的模块plugin是生命周期钩子负责在构建的不同阶段做额外的事情比如打包优化、资源管理、环境变量注入。再深入一点loader的执行顺序是“从右到左、从下到上”例如style-loader把CSS注入DOMcss-loader解析CSS语法所以写法必须是style-loader在左、css-loader在右。很多人刚开始学webpack时会记反写反导致样式不生效就是这个原因。B卷如果考到这一题你要把“loader偏向文件层面、plugin偏向构建过程层面”这个本质区分讲出来。5.5 构建工具对比Vite为什么比Webpack快前端开发规范热词里“Vite”这两年出镜率极高B卷也开始跟进。Vite之所以让开发者感觉“快”关键在于它利用了浏览器原生ES Module在开发环境下不再做整包打包而是按需加载模块启动速度自然就快了webpack则要先从入口出发分析依赖、递归构建模块图项目一大启动就是几十秒起步。一个很容易被套问的点是“Vite生产环境为什么还要用Rollup打包”这是因为原生ES Module在浏览器端每个模块都会发起一个请求如果模块数量成百上千请求数会直接拖垮加载性能。所以开发时可以让浏览器直接处理模块生产环境还是得统一打包、压缩、做兼容。6. 手写代码题与场景设计题的实战拆解6.1 手写深拷贝一张图看清深浅拷贝的区别B卷的手写题除了防抖节流深拷贝也是常客。你得先能说清楚浅拷贝和深拷贝的区别浅拷贝只复制第一层属性如果属性值是对象复制的只是引用改一边两边都变深拷贝要递归复制所有的层级。面试时优先写兼容方案function deepClone(target, map new Map()) { if (typeof target ! object || target null) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target); const clone Array.isArray(target) ? [] : {}; if (map.has(target)) return map.get(target); map.set(target, clone); for (const key in target) { clone[key] deepClone(target[key], map); } return clone; }为什么要引入Map因为要处理循环引用。比如obj.self obj如果不记录已经克隆过的对象递归就会无限循环把调用栈直接撑爆。这是很多同学写深拷贝时踩过的坑笔试时能主动写出防循环处理的版本是很加分的。6.2 简单实现一个发布订阅EventEmitter发布订阅模式在前端开发里非常常用事件总线、全局事件通知、组件通信都能用到所以B卷也会让你手写一个简单的EventEmitterclass EventEmitter { constructor() { this.events {}; } on(event, fn) { if (!this.events[event]) { this.events[event] []; } this.events[event].push(fn); return () this.off(event, fn); } once(event, fn) { const wrapper (...args) { fn(...args); this.off(event, wrapper); }; this.on(event, wrapper); } emit(event, ...args) { (this.events[event] || []).forEach(fn fn(...args)); } off(event, fn) { if (!this.events[event]) return; this.events[event] this.events[event].filter(item item ! fn); } }这种题目的意义不只是写出代码而是考察你有没有模块化、解耦的意识。发布订阅模式让两个模块之间不需要互相引用A模块发布消息B模块订阅消息双方互不感知这在大型项目里能极大降低维护成本。6.3 场景设计题一个并发请求函数怎么写B卷偶尔会给场景题比如“有100个请求但浏览器最多同时发5个怎么保证请求排队执行”这种题考察的是并发控制能力也是前端开发里相当实际的场景。思路很直接写一个带“任务池”的调度函数每次从任务列表里取一个执行执行完再取下一条始终保持同时执行的请求不超过阈值async function asyncPool(poolLimit, tasks) { const results []; const executing new Set(); for (const task of tasks) { const p Promise.resolve().then(() task()); results.push(p); executing.add(p); const clean () executing.delete(p); p.then(clean, clean); if (executing.size poolLimit) { await Promise.race(executing); } } return Promise.all(results); }这道题的实际应用场景很广比如上传大量文件、批量拉取分页数据、爬虫请求限速都能直接套用。笔试时如果时间充裕你可以再补充一句Promise.race只关注最先完成的那个不需要等所有任务结束就能释放一个“名额”这是保证并发数恒定的关键。6.4 笔试题里的开放性问答前端开发规范除了代码题B卷也会有一两道主观题比如“说说你在团队里如何推动前端开发规范落地”。这种题没有标准答案但你要展示出“规范不只是代码风格统一”还包括目录结构规范、组件封装规范、git提交规范、Code Review机制和文档沉淀。我个人的经验是规范不是拍脑袋定的而是从真实痛点里长出来的。比如团队经常因为样式冲突互相影响那就约定类名前缀或统一用CSS Modules比如接口字段随意变更导致前端线上故障那就约定接口定义先过评审再开发。你在笔试里能答出这种“从问题出发建规范”的思路阅卷人会认为你有实际团队协作经验而不只是会说漂亮话。7. 网络协议考点HTTP、HTTPS与WebSocket7.1 HTTP/1.1、HTTP/2与HTTP/3的关键差异B卷对HTTP协议的考察一般不会像后端那么深但基础差异一定要能讲清。HTTP/1.1时期存在的问题是队头阻塞一个TCP连接只能串行处理请求HTTP/2引入了多路复用多个请求可以共享一个TCP连接同时传输多种资源。但HTTP/2有一个隐性问题TCP层本身的队头阻塞依然存在一旦一个数据包丢失后面所有数据都要等待重传。HTTP/3把传输层从TCP换成了UDP基于QUIC协议解决队头阻塞问题避免了TCP握手带来的延迟。笔试里能答到这一层已经可以领先很多人了。你不需要背具体RFC编号只需要把这些技术演进的动机和结果讲清楚就可以。7.2 HTTPS握手过程与对称加密、非对称加密HTTPS的考点通常是握手流程。简化版流程是客户端发送随机数和支持的加密套件服务器返回证书和另一个随机数客户端验证证书合法后生成预主密钥并用服务器公钥加密发给服务器双方根据三个随机数生成会话密钥之后通信都用这个会话密钥对称加密。这里要能说清楚为什么不直接用非对称加密传输所有数据因为非对称加密计算开销远大于对称加密所以只用来安全地协商出密钥后续大量数据用对称加密加密通信。另外要提一句证书的作用防止中间人攻击证明“和你通信的人真的是他要冒充的那个人”。B卷喜欢在这个点上继续套问“中间人攻击怎么防”你只要把证书链的信任机制讲清楚就不会被问倒。7.3 WebSocket与HTTP长轮询的取舍B站有弹幕、直播评论这种实时交互场景所以WebSocket也是考点之一。HTTP是“一问一答”模式服务器不能主动给客户端发数据WebSocket建立连接后双方都可以随时发送数据适合聊天室、弹幕、实时通知等场景。笔试里如果让你对比WebSocket和HTTP长轮询你要答出长轮询本质还是HTTP只是服务器hold住请求不立刻返回等有新数据才响应相比纯轮询减少了请求次数但依旧要反复建立连接WebSocket只需要一次握手连接是全双工、长久的性能和实时性都更好。8. 校招笔试题的备考策略与资料推荐8.1 从B卷反推我建议你这样复习刷题方向不能全凭感觉要对着考点清单来。如果你正在准备大厂前端校招我建议你优先把这几块内容打磨到“闭眼就能答”的程度事件循环、this指向、闭包、Promise原理、HTTP缓存、CSS居中、跨域方案、虚拟DOM与diff、webpack的loader和plugin。这些点覆盖了B卷80%以上的题型。具体刷题方式上我不建议单纯背答案。更好的方法是拿到一道题先自己写一遍再对照解析看差异然后把题目变形一下自问自答。比如“防抖能不能带立即执行参数”“深拷贝能不能处理Symbol和函数”这样练出来的不是死记硬背而是把知识串联成体系。8.2 编程环境与作答技巧B站笔试通常在牛客网或赛码网进行你需要提前熟悉在线IDE的用法特别是代码提示可能没有本地编辑器那么智能。笔试时建议先扫一遍所有题目把简单题先做完拿稳分再做手写题和开放题不要在一道题上死磕超过15分钟时间分配决定你能不能做完。手写代码时要注意细节函数名、参数名、边界条件。很多时候阅卷是人工看即使不能跑通只要你的思路清晰、关键点写到了也会给不少分。我看到过太多人因为没写if (target null)这种边界判断导致整体代码档次直接掉一截非常可惜。8.3 笔试之后接什么面试追问的高频场景笔试并不是终点B站的面试官通常会拿着笔试卷子里的题目进行追问问法和维度往往更刁钻。比如让你手写深拷贝之后会问“如果属性值是函数怎么办”“如果对象有getter怎么处理”“能处理WeakMap吗”。这些追问的意图不是考你背答案而是看你的技术边界在哪里以及你遇到未知问题时的推理过程。所以你现在准备笔试时就不能只背一道题的解法而是要主动把一道题变成三道题来准备。这样做的好处是笔试和面试你都不会慌因为底层逻辑你已经吃透了。9. 好用的资料与工具清单9.1 经典书籍与文档JavaScript方面我反复推荐《JavaScript高级程序设计第4版》这本书对原型链、事件循环、异步编程的讲解非常扎实比碎片化刷博客高效太多。ES6语法直接看阮一峰老师的《ES6标准入门》第3版在线阅读免费作为查阅工具书非常方便。CSS方面《CSS世界》值得一看它不是简单罗列属性而是帮你建立“CSS思维”框架方面Vue的话优先啃官方文档配合《Vue.js设计与实现》了解响应式原理和渲染器React的话看《React技术揭秘》的在线版本就可以。9.2 在线刷题与练习平台笔试备考阶段LeetCode刷热题100道左右就够用重点放在字符串处理、数组操作、排序、简单动态规划这些日常开发高频算法上。前端专项练习我更推荐去牛客网搜索企业历年真题把“前端开发面试题”这个关键词相关的题库刷穿效果非常直接。手写代码题可以在CodeSandbox或StackBlitz里跑因为它们能模拟浏览器环境涉及DOM和浏览器API的题会更直观。如果只想快速验证某个JS函数的输出Node.js跑一个脚本就够了不用开页面。9.3 一手信息渠道建议前端技术迭代快光看书不够还要保持信息更新。我自己的习惯是每周末固定看几个高质量来源MDN的更新记录、Vue和React的官方releases页面、掘金上关注几个头部前端博主。不用多固定看三五个稳定渠道就能让你始终保持对行业热点的敏感度。B站题库本身不是一成不变的2023年的笔试卷侧重点和2024年已经有一些差异但核心基本功不会变。备考的时候要把重点放在“理解原理”上而不是“追逐新词”。原理扎实了题目怎么变你都能接住。10. 一些额外的实操心得10.1 笔试时最容易犯的三个低级错误第一不读题。卷子明明让你“写出至少两种实现方案”你只写一种丢分丢得很冤枉。第二手写代码时脑内运行一遍就完事完全不考虑边界条件。笔试题里数组为空、参数为null的情况经常出现你如果把边界判断写全代码质量一眼就上去了。第三时间管理混乱。单选题纠结十分钟到最后手写题没时间这属于典型的战术失误。10.2 卷面表达如何让阅卷人一眼看中你如果题目允许画图和写思路不要吝啬这一步。先用一两句话概括你的解题思路再写代码和解释会给阅卷人留下一个“这个候选人有结构化思维”的印象。代码变量名要语义化不要写a、b、c也不要在一行里塞进太多逻辑。毕竟阅卷人也是人看到清爽的答案好感度完全不同。10.3 落榜不是能力问题而是匹配问题最后聊点心态上的事。我见过太多同学因为一次笔试没过就自我怀疑其实完全没必要。同一套笔试卷B不同年份的难度曲线是波动的同一个岗位不同批次的竞争池子也不同。笔试没通过只说明你的知识结构和岗位要求之间存在错位补上就好不代表你这个人不行。我在实际带教过程中发现能拿到B站这类公司offer的人往往不是基础最好的而是准备最充分、复盘最勤快的那个。每次笔试结束把错题整理成文档标注考点和正确思路过一周再做一遍这套笨办法坚持三轮效果比你盲目刷两百道题都好。这篇内容既是对哔哩哔哩2023校园招聘前端开发方向笔试卷B的拆解也算是我这些年看校招笔试的一点经验沉淀。如果你最近在准备大厂前端岗位希望这篇内容能帮你少走一点弯路。把基本功吃透把常见题型练熟你的笔试成绩一定不会差。