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和border；IE怪异盒模型（box-sizing: border-box）下，width包含内容、内边距和边框。现代前端开发规范里，几乎清一色推荐border-box，因为布局计算更直观，不会出现“设置了宽度又撑爆”的尴尬场面。

有一道经典题：父容器宽度300px，子元素设置width: 100%，然后再加上padding: 20px，在不设置box-sizing的情况下，子元素实际占多少宽度？答案是340px，因为width: 100%算出来是300px，再加上左右各20px的padding。这就是为什么好多新人写页面时发现元素溢出，根子往往在盒模型上。

3.2 水平垂直居中的五种方案对比

“水平垂直居中”是笔试和面试都绕不开的题，B卷也不例外。考察的核心不是你会一种，而是你能不能在多个场景下给出合理方案：

你可能会问，直接全用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 rel="stylesheet">虽然不会阻塞DOM解析，但会阻塞渲染，所以要合理设置加载顺序。能把这些细节说清楚，阅卷人立刻能判断出你是真写过页面，而不是背了八股文。

4.2 浏览器缓存机制：强缓存和协商缓存怎么配合

缓存机制也是B卷的高频考点，因为直接关系到前端性能。强缓存通过Cache-Control和Expires实现，命中的话浏览器根本不会发请求；协商缓存通过Last-Modified/If-Modified-Since和ETag/If-None-Match实现，需要发请求问服务器资源有没有变，没变就返回304。

有一个容易混淆的点：Cache-Control: max-age=3600和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到Proxy

B站技术栈里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注入DOM，css-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卷也会让你手写一个简单的EventEmitter：

class 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与WebSocket

7.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的拆解，也算是我这些年看校招笔试的一点经验沉淀。如果你最近在准备大厂前端岗位，希望这篇内容能帮你少走一点弯路。把基本功吃透，把常见题型练熟，你的笔试成绩一定不会差。