2. 一份2020年的前端笔试卷放到现在还有没有参考价值说实话拿到哔哩哔哩2020校园招聘前端笔试卷一这个标题的时候我第一反应是这卷子是不是已经过时了毕竟前端这行框架半年一小变、一年一大变2020年的题放到2026年能有多少参考价值但真正把这份卷子的考察逻辑捋了一遍之后我的结论变了前端笔试题的核心考察点远比很多人想象的要稳定。B站这份卷子之所以值得拿出来反复刷不是因为它的题目有多新而是因为它代表了头部互联网公司校招笔试的标准命题思路——基础语言功底、浏览器原理、框架理解、工程化思维、算法逻辑五大块一个不少。先说2020年前端校招的技术背景。那时候Vue 2还是绝对主流React 16.8刚把Hooks推出来没多久TypeScript在中小厂还没完全普及Webpack正处在4到5的过渡期。ES6已经是标配但很多候选人写代码还是习惯用var和回调函数。B站的前端团队当时以Vue技术栈为主业务覆盖主站、直播、番剧、社区等板块对候选人的要求是基础扎实、能写业务、对性能和安全有基本意识。放到2026年回头看技术栈确实变了Vue 3和Vite成了新项目的默认选择React Server Components开始在部分团队落地esbuild、Rspack这类工具在构建领域抢了不少份额。但笔试考的东西变了吗没怎么变。JavaScript的原型链依然在考闭包依然在考事件循环依然是必考题浏览器的渲染机制和缓存策略依然在考手写防抖节流、深拷贝、Promise依然是保留项目。这不叫过时这叫基本功。基本功的东西十年也不会变。所以这份卷子的价值可以从三个层面来看对正在准备校招的2026届、2027届学生来说它是一份大厂笔试到底考什么的样本能帮你快速校准复习方向对工作两三年的前端开发者来说它是检验自己基本功是否扎实的一面镜子很多知识点平时写业务用不到但面试就是会考对需要出笔试题的面试官来说它也是一份很好的结构参考照着这个框架去设计题目覆盖面不会出大问题。总结成一句话别盯着2020这个年份要盯着题目背后的考察逻辑。下面我就把这份卷子背后对应的核心知识点、命题思路、以及备考策略完整拆一遍。现在开始逐块解析。我尽量不写标准答案式的八股文而是把每个考点背后的为什么考、怎么答才能拿分、常见的坑在哪讲清楚。3. 大厂前端笔试卷的命题套路它到底在筛什么人看一份笔试卷先别急着做题先想一个问题出题人希望用这份卷子筛掉什么样的人这个问题想明白了你复习的方向就对了。校招和社招不一样。社招可以针对具体的业务方向出题比如你做过视频播放器吗那讲讲首帧优化的方案。但校招候选人几乎没有实战经验所以笔试的核心目的是验证三件事第一你的计算机基础到底扎不扎实第二你有没有主动学习新技术的能力第三在限定时间内解决未知问题的思维模式是否合格。具体到B站这份卷子它考察的维度可以分成四个层面。第一个层面是语言基础。JavaScript是前端的根无论你用什么框架最终编译出来都是JS。所以原型链、闭包、作用域、this指向、事件循环、Promise、ES6语法这些是必考的。出题人的逻辑很简单框架可以速成但语言功底骗不了人。一个把原型链讲得清清楚楚的候选人大概率在别的知识点上也不会太差。第二个层面是浏览器与网络。前端代码跑在浏览器里一个页面从输入URL到展示出来中间发生了什么这是经典中的经典。考察点包括DOM渲染机制、重排重绘、事件冒泡捕获、本地存储、HTTP缓存、跨域、HTTPS、TCP连接等等。这个维度考的是你对运行时环境的理解深度。很多人写了好几年代码以为浏览器就是输入代码让页面显示但如果连defer和async的区别都说不清面试官很难相信你能定位线上性能问题。第三个层面是框架与工程化。2020年的卷子里Vue和React通常二选一考原理比如Vue的响应式数据绑定是怎么实现的、虚拟DOM的diff算法过程、组件的生命周期、路由的实现方式等等。工程化则会考Webpack的打包流程、Loader和Plugin的区别、Tree Shaking的原理、代码分割怎么做。这个维度考的是你在实际项目中能不能踩对技术方向。很多人在简历上写熟悉Vue结果一问响应式原理就露馅这种候选人笔试这关就已经出局了。第四个层面是算法与逻辑。大厂笔试基本都有编程题LeetCode的难度集中在简单到中等偏上但注意笔试题的算法难度通常不会太高因为它考的不是竞赛思维而是你处理问题的基本逻辑边界条件、时间空间复杂度、代码组织能力。手写防抖节流、深拷贝、Promise.all这类代码本质上是原理代码能力的综合检验。还有一个很多人忽略的点笔试的评分逻辑不是答对了就满分而是谁更稳。基础题大家都答得差不多真正拉开差距的是那些看起来简单、但暗藏细节的题目。比如让你写一个防抖函数大多数人能写出个大概但能考虑到this绑定、事件参数传递、取消功能、立即执行选项的就是少数。所以我一直给准备校招的同学强调笔试考的是你的下限不是上限。决定你过不过的不是那道最难的加分题而是那道所有人都应该做对的题目你做没做对。4. 语言基础题原型链、闭包、this、异步每一个都能挖出三层追问语言基础是前端笔试卷的绝对主角B站这份卷子也不例外。这一节我把高频考点逐个拆开讲清楚每种题型背后能挖多深以及怎么答才能让面试官眼前一亮。4.1 原型链与继承不仅会画图还要会讲prototype和proto原型链几乎是必考题但大部分候选人只停留在背结论实例.__proto__ 构造函数.prototype。如果你只会这一句考卷上那道题稍微变形一下你就懵了。原型链常见的出题方式有这几种给定一个对象让写出沿着原型链查找属性的过程。比如创建一个数组const arr []问arr.map、arr.__proto__.map、Array.prototype.map是不是同一个函数。各种继承方式的手写与优缺点对比原型链继承、构造函数继承、组合继承、寄生组合继承、ES6 class继承。原型链上同名属性遮蔽的问题。比如构造函数里定义了this.name原型上也挂了一个name访问的时候取哪个。我建议在复习时把原型链当成一张图来理解而不是背公式。当一个对象访问某个属性时JS会沿着__proto__链一直向上查找直到找到或到达Object.prototype的__proto__即null为止。这个机制本身很简单但出题人会通过继承关系来设置陷阱。真正的加分点在于你能否用原型链解释为什么ES6的class本质上是语法糖。给候选人一个提示当你理解了class Child extends Parent等价于Child.prototype的原型指向Parent.prototype你就掌握了class继承的本质。这不只是概念题很多手写题比如实现一个new、实现一个Object.create都要用到这个理解。4.2 闭包从作用域到内存泄漏的理解闭环闭包这边笔试题通常从三个角度切入概念题什么是闭包一句话版本是函数能够访问其定义时所在作用域中的变量因为函数在被定义时会把外层作用域保存下来即使外层函数已经执行完毕。输出题典型场景是for循环里用var定义变量然后异步回调输出索引问输出是多少、怎么改才能正确输出。这个题考的就是var没有块级作用域、闭包捕获的是变量而不是值。手写题用闭包实现私有变量、实现单例模式、实现防抖和节流。这里特别提醒一个高频丢分点闭包和内存泄漏的关系。很多候选人知道闭包可能导致内存泄漏但说不清楚到底怎么泄漏的。正确答案是如果一个闭包长期存在并且它引用了外层作用域中一个很大的对象比如一个数组、一个DOM引用那么即使外部已经不再使用这个对象垃圾回收器也无法回收它因为闭包仍然持有引用。所以不是闭包导致了泄漏而是不被清理的闭包可能长期持有大对象。这个区分在笔试简答题里是加分项。4.3 this指向死记硬背不如会推导this指向是前端笔试的高频易错点。核心规则其实只有几条但如果只背结论换一种出题方式照样错。两个特别好用的推导思路看调用方式而不是看定义位置。函数作为对象的方法调用时this指向这个对象普通函数调用时this指向全局严格模式下是undefined箭头函数的this继承自外层作用域。显式绑定优先于隐式绑定。call、apply、bind可以强制指定thisnew绑定会让this指向新创建的对象。所以优先级是newcall/apply/bind 方法调用 默认绑定。实际考卷里最常见的变形题是把this和对象方法赋值给变量混在一起。比如const obj { name: bilibili, getName() { return this.name; } }; const fn obj.getName; console.log(fn()); // 输出什么这里obj.getName被赋值给fn再调用时已经变成了普通函数调用所以this指向全局输出的是undefined严格模式下或全局对象上的name。很多人一看到对象方法就默认this指向对象忽略了调用位置已经改变。这种题比拼的就是基本功一点花哨都没有。4.4 事件循环从背顺序到画任务队列事件循环在前端笔试中的出场率接近100%。题目形式通常是给一段包含setTimeout、Promise、async/await、process.nextTickNode环境的代码要求写出输出顺序。这里我强烈建议不要死背结论而是在纸上画出宏任务队列和微任务队列。每次执行完一个宏任务要清空整个微任务队列然后才执行下一个宏任务。Promise.then和async/await后面的代码属于微任务setTimeout属于宏任务。还有一个容易搞混的点async函数内部的await会让出执行权await后面相当于放进了微任务队列但在微任务内部的执行顺序上它有自己的一套调度规则。笔试的题量有限不会考到特别罕见的边界情况但把每次宏任务结束后清空所有微任务这个规则用熟绝大多数题都不会做错。再加一个提示如果你在简历里写了熟悉Node.js面试官很可能还会追问process.nextTick和Promise.then的执行顺序区别。答案是process.nextTick属于下一轮之前的立即执行队列比Promise.then更早执行。这一条在Node环境下经常被拿来挖坑。5. 浏览器与网络不只是背八股还要能解释为什么语言基础之外浏览器与网络是前端笔试的第二大战场。这一部分的特点是知识点不复杂但容易记混。出题人特别喜欢用细节来筛选背过和理解过的候选人。5.1 从输入URL到页面展示一题串起所有核心知识点这道题几乎是大厂笔试标配B站卷子里通常以简答题或论述题出现。完整的回答链条是DNS解析 - 建立TCP连接 - 发送HTTP请求 - 服务器返回响应 - 浏览器解析HTML - 构建DOM树 - 加载CSS构建CSSOM - 合并成渲染树 - 布局Layout- 绘制Paint- 合成Composite。如果能提到HTTP/2多路复用、强缓存/协商缓存、渲染阻塞、懒加载优化分数会更高。但很多人不知道的是这道题其实有进阶版服务端返回的HTML中只有一个div idrootJavaScript打包文件非常大首屏白屏时间怎么优化这就从原理题变成了性能优化题考的是async和defer的区别、critical CSS内联、代码分割按需加载、骨架屏方案。2020年的笔试正好处在这个问题的热度上升期如果你能答出把路由级别的页面拆成独立chunk配合React.lazy或Vue的异步组件首屏只加载当前页面需要的JS这道题基本就稳了。5.2 缓存策略强缓存与协商缓存的优先级不能记反缓存是笔试必考也是容易丢分的地方。核心内容其实只有一张表维度强缓存协商缓存触发条件缓存未过期缓存已过期但资源可能没变相关响应头Cache-Control、ExpiresLast-Modified/If-Modified-Since、ETag/If-None-Match状态码200from disk cache / memory cache304 Not Modified优先级Cache-ControlExpiresETagLast-Modified这里有个经常被问到的细节Cache-Control和Expires同时存在时以Cache-Control为准因为Expires是HTTP/1.0时代的产物依赖客户端的本地时间而Cache-Control是HTTP/1.1的标准可以指定相对时间max-age3600。同理协商缓存中ETag比Last-Modified更精确因为Last-Modified只能精确到秒而且可能因为文件修改但内容没变而产生不必要的重新请求。笔试里针对缓存还有一种变形题用户刷新页面F5和强制刷新CtrlF5时缓存策略有什么不同普通刷新会走协商缓存强制刷新会直接跳过所有缓存重新向服务器请求。这是实际开发中调试缓存问题时最常踩的坑之一。5.3 跨域问题不仅要知道JSONP还要知道CORS的完整流程跨域是前端笔试的经典考点因为它在业务开发中太常见了。基本概念不用多说关键在于答全。一个完整的跨域问题答案应该包含同源策略的定义协议、域名、端口三者完全一致跨域的常见解决方案JSONP只能GET、CORS后端设置Access-Control-Allow-Origin等响应头、反向代理开发环境用proxy生产环境用Nginx、postMessage、document.domain子域场景CORS的完整请求流程包括简单请求和预检请求Preflight的区别。看到Content-Type: application/json这种非简单请求时浏览器会先发一个OPTIONS请求服务器返回允许的跨域规则后才会发正式请求。补充一个实操细节开发环境用Vite或webpack-dev-server的proxy配置解决跨域原理是同源策略只存在于浏览器服务器之间的请求没有跨域限制。所以代理本质上是在开发服务器层面转发请求浏览器的请求变成了相对路径自然不会触发跨域。这个问题在B站这类Vue技术栈团队的面试里几乎是必问的。6. 框架与工程化Vue/React原理看图说话构建配置处处是坑框架和工程化题目在校招笔试里往往和前面四章的内容交叉出现。不是说单独考一道Vue原理的大题而是通过代码题、选择题、简答题来考察候选人是否真的理解框架的设计思想。2020年B站以Vue为主但这部分的知识点对React同样适用。6.1 响应式原理从Object.defineProperty到Proxy的演进逻辑Vue笔试的核心题是Vue 2的响应式原理是什么它有什么缺陷Vue 3为什么改用ProxyVue 2的实现逻辑是递归遍历data对象的每个属性用Object.defineProperty把每个属性转换成getter/setter。读取属性时getter收集依赖Dep收集Watcher修改属性时setter通知依赖更新。但这样做有三硬伤新增或删除属性时Vue检测不到。因为数据在初始化时就已经完成了响应式转换之后新增的属性没有经过getter/setter劫持。Vue 2只能通过Vue.set或$set来手动处理。数组索引和长度变化无法被检测。所以Vue 2对数组的7个方法push、pop、shift、unshift、splice、sort、reverse做了重写绕过了这个限制。初始化时递归遍历所有属性深层嵌套的对象性能开销较大。Vue 3改用Proxy之后代理的是整个对象而不是某个属性新增属性、删除属性、数组索引变化都能被拦截而且不需要递归逐层遍历getter触发时才惰性收集性能明显更好。笔试时能答出上面这些基本就够了。但如果想拿高分需要再补一句Proxy的兼容性不如definePropertyVue 3也因此放弃了对IE11以下的支持。这一句话能体现出你对框架技术选型的理解不只是代码层面的。6.2 虚拟DOM与diff算法不背源码但要理解设计思想虚拟DOM的diff算法是面试官非常喜欢追问的点。校招笔试不会要求你默写整个diff过程那太长了但会通过选择题或简答题来考察几个关键结论为什么需要虚拟DOM因为直接操作真实DOM的代价比较高JS层面的计算成本远低于浏览器重排重绘的成本。Vue和React的diff都是同层对比不会跨层级比较这是为了避免算法复杂度从O(n)级别上升到O(n^3)级别。key的作用在列表渲染中用key来标识节点身份帮助diff算法更准确地判断哪些节点是复用、哪些需要新增或删除。使用index作为key是反模式因为当列表顺序变化时index会错位导致节点复用错误引起渲染bug。补充一个React和Vue实现上的区别Vue 2的diff是双端比较从两边往中间收React的diff是单方向遍历所以两者的优化策略略有不同。笔试中不要求你细说但如果你能说出Vue做了双端比较优化React通过Fiber架构把diff拆成了可中断的单元面试官对你的评价会直接上一个档次。6.3 工程化与构建Webpack的Loader和Plugin别搞混工程化是笔试中区分只写过页面和会搭项目的关键维度。2020年Webpack 4是主流笔试题主要围绕这几个点Loader和Plugin的区别Loader是文件转换器负责把一个模块的源码转换成另一个模块的代码Plugin是构建流程的插件可以监听Webpack编译生命周期、执行更广泛的任务。简单记忆Loader处理文件Plugin处理流程。Loader的执行顺序同一类型多个Loader的语义是从右向左从下到上执行的。比如sass-loader - css-loader - style-loader先让sass-loader把SCSS转成CSS再让css-loader处理CSS中的url和import最后由style-loader把样式以style标签形式注入页面。这个顺序搞反了构建直接报错。Tree Shaking的原理基于ES Module的静态结构分析在打包时移除没有真正被引用的导出代码。注意它只能对ES Module生效CommonJS模块require因为动态加载的特性无法做静态分析。这也是为什么很多库要求同时提供ES Module格式的构建产物。代码分割Code Splitting用import()动态导入语法把大文件拆成多个chunk配合路由懒加载实现按需加载。我建议2026年的候选人不要只盯着WebpackVite的相关概念也要准备。Vite利用浏览器原生ES Module支持开发环境冷启动速度比Webpack快得多生产构建底层用Rollup这已经是目前前端工程化的主流方向。B站2020年的卷子没怎么涉及Vite因为当时Vite还不够成熟但现在的校招笔试Vite出现的概率很高。7. 编程题不要只会刷LeetCode要会写能跑的代码笔试的最后一关是编程题。这一节要把刷题和写代码区分开LeetCode刷题是练算法思维笔试题编程题练的是在浏览器环境/Node环境下写出能运行、能处理边界情况的代码。两者都要练但侧重点不同。7.1 手写实现防抖、节流、深拷贝、Promise手写题是前端笔试编程题的核心类型。这几个是出镜率最高的我一个一个说。防抖debounce和节流throttle防抖事件触发后延迟N秒执行如果延迟期间又触发了重新计时。实际场景搜索框输入联想。核心代码function debounce(fn, delay 300, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; } clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked true; }, delay); }; }节流事件触发后在N秒内只执行一次。实际场景滚动事件、窗口resize。核心代码function throttle(fn, interval 300) { let lastTime 0; return function(...args) { const context this; const now Date.now(); if (now - lastTime interval) { fn.apply(context, args); lastTime now; } }; }笔试中能写出基本逻辑能拿一半分但要注意三个加分项保留this指向、透传参数、immediate选项。很多候选人写出来的函数在事件回调里this指向window结果一跑就出bug。这几个细节写上了这道题基本就是满分。深拷贝深拷贝主要考察递归实现、循环引用处理、特殊类型Date、RegExp、Map、Set、Function处理。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 cloneTarget Array.isArray(target) ? [] : {}; map.set(target, cloneTarget); Reflect.ownKeys(target).forEach(key { cloneTarget[key] deepClone(target[key], map); }); return cloneTarget; }这里WeakMap是用来解决循环引用问题的经典题目const a {}; a.self a; deepClone(a)。如果不做缓存处理会无限递归、栈溢出。Promise相关手写Promise是硬核中的硬核但B站2020年这套卷子里更多是让候选人手写Promise.all、Promise.race或者实现一个简易版Promise。手写Promise.all的要点是接收一个Promise数组返回新的Promise所有成功则返回结果数组任何一个失败则reject。function promiseAll(promises) { return new Promise((resolve, reject) { const result []; let count 0; if (promises.length 0) { resolve([]); return; } promises.forEach((promise, index) { Promise.resolve(promise).then(value { result[index] value; count; if (count promises.length) resolve(result); }, reject); }); }); }这个实现的细节在于结果要通过index记录而不是push这样保证返回结果的顺序和传入顺序一致Promise.resolve(promise)保证了传入的非Promise值也能正常处理。两个细节都写出来面试官会认为你写代码是动过脑子的。7.2 算法题难度不在难在稳前端笔试卷的算法题难度一般不会超过LeetCode中等题。常见的类型是字符串/数组操作反转字符串、去重、扁平化、两数之和排序手写快排考察递归和分治链表反转链表、判断是否有环二叉树层序遍历、最大深度。但有一个B站这类流媒体公司特别爱考的数据量大时的性能优化思路。比如有一个100万条数据的数组要在不阻塞主线程的情况下渲染到页面上这个问题不是纯算法题而是算法浏览器性能的结合。常规思路有分片渲染requestAnimationFrame分批插入、虚拟滚动只渲染可视区域、Web Worker后台处理数据。这类题在B站前端笔试中出现跟B站的弹幕、评论这类海量信息展示业务直接相关。7.3 编程题的隐性要求代码规范与边界意识最后强调一件事笔试编程题不是只判正确性还在看代码习惯。同样的功能有人写出来一堆游离的var变量、不写分号、不处理空值有人能写出清晰的注释、变量命名语义化、每个边界条件都有判断。既然条件基本相同面试官当然优先选择后者。所以我的建议是笔试时即使时间紧张也要保持好代码风格。函数名用动词开头、变量名不用a、b、tmp这种无意义命名能空一行的地方适当空行。这些细节不会直接加分但给面试官留下的这个候选人代码洁癖在线的印象会在后续面试环节体现出来。8. 针对这份卷子的备考路线三个月实操计划把整份卷子的知识点拆完之后最后给准备校招的读者一份可直接执行的备考路线。我见过太多候选人前期乱复习、后期疯狂刷题结果基础不牢遇到变形题就崩。下面这份计划是按照语言基础 - 浏览器与网络 - 框架工程化 - 刷题模拟四阶段来排的正常节奏三个月每天保证4到6小时高效学习即可。8.1 第一阶段语言基础打牢第1到4周这一阶段只做一件事把JavaScript语言的核心机制吃透。推荐的材料是《JavaScript高级程序设计第4版》的原型链、闭包、异步、ES6几个重点章节配合《你不知道的JavaScript中卷》的异步部分。每天坚持做两件事默写/手写实现new、实现Object.create、实现call/apply/bind、实现防抖节流、实现深拷贝、实现Promise.all。不要看着答案写要合上书自己写。做输出题去网上搜集50道JavaScript输出题每道题都要能在纸上写出代码运行结果并解释每一步的this指向和任务队列变化。阶段结束时自测标准见到任意一段包含Promise、setTimeout、async/await的代码能在30秒内准确写出输出顺序。达不到就继续练这是后续所有面试环节的基石。8.2 第二阶段浏览器与网络深挖第5到8周这一阶段的主线是从输入URL到页面展示这条链路把每个环节都吃透。推荐材料《图解HTTP》前八章、MDN上关于渲染、缓存、跨域的文档。每天坚持做的事情在浏览器DevTools里实际观察Network面板的缓存命中情况、Performance面板的渲染耗时。把理论知识和实际数据对应起来而不是只会背书。用Nginx开一个本地服务自己配置缓存头、配置代理实测不同响应头对缓存行为的影响。阶段结束时自测标准能不看任何资料用10分钟把输入URL到页面展示的完整流程写在纸上并针对每个环节说出一项优化措施。8.3 第三阶段框架与工程化深挖第9到12周这一阶段的核心是形成框架不只是API的理解。不管主攻Vue还是React都要往下挖一层。推荐方式把官方文档通读一遍注意读深入或原理部分比如Vue官网的深入响应式原理、React官网的协调Reconciliation。创建一个最小项目不依赖脚手架从零配置Webpack或Vite分别接入Babel、ESLint、样式处理理解每一行配置的作用。尝试读一遍框架核心源码中某一个模块比如Vue的reactive、React的useState不求全懂但要把数据流和触发更新的链路捋出来。阶段结束时自测标准能画出一张从修改数据到页面更新的完整流程图并解释每个环节中框架做了什么。8.4 刷题策略与资源最后一个月或者贯穿三个月保持每天刷题的节奏LeetCode按高频标签刷数组、字符串、链表、二叉树、动态规划入门每天2道简单、每周4道中等。手写题20道经典手写题反复练直到不假思索能写出来。包括深拷贝、防抖、节流、Promise.all、Promise.race、new、call/apply/bind、instanceof、发布订阅、数组扁平化、去重、柯里化、函数记忆、Object.create、reduce实现map、LRU缓存等。模拟笔试每周至少花2小时完整做一套真实的前端笔试卷牛客网上有大量历年大厂真题掐时间做做完之后把错题对应的知识点回归到前三个阶段。刷题阶段我给一个反直觉的建议不要追求刷了多少题要追求每种题型的套路都熟悉。前端笔试的算法题套路化很强看到数组就想到指针和哈希表看到二叉树就想到递归和层序队列看到字符串就想到双指针和动态规划。把套路吃透比题海战术更有效。9. 最后说点我的体会这张2020年B站前端笔试卷如果只把它当成一份旧题目那它确实会过时但如果把它当成一面镜子照出来的其实是前端这个行业对基本功的执念。我自己参与过不少校招面试一个很深的感受是候选人之间的差距往往不在项目经历的华丽程度而在基础知识的牢固程度。那些能把原型链、事件循环、缓存策略讲得清清楚楚的同学到了工作岗位上写代码的稳定性和排查问题的效率通常会明显更高。所以别嫌这些知识点旧、都是八股。真正的八股是只背结论不理解原理而这份卷子里的每个考点都能在日后的业务场景中找到对应。你遇到的线上偶发bug、页面白屏、接口反复请求、列表渲染错乱追根溯源大多数都落在这些基础知识点上。按上面的路线踏实走完三个月我不敢保证你一定能拿到B站或同级别大厂的offer但至少笔试这一关你的通过率会比大多数人高出一个级别。功夫在平时祝顺利。 从B站2020前端笔试卷看大厂校招命题套路与基本功考察
2. 一份2020年的前端笔试卷放到现在还有没有参考价值说实话拿到哔哩哔哩2020校园招聘前端笔试卷一这个标题的时候我第一反应是这卷子是不是已经过时了毕竟前端这行框架半年一小变、一年一大变2020年的题放到2026年能有多少参考价值但真正把这份卷子的考察逻辑捋了一遍之后我的结论变了前端笔试题的核心考察点远比很多人想象的要稳定。B站这份卷子之所以值得拿出来反复刷不是因为它的题目有多新而是因为它代表了头部互联网公司校招笔试的标准命题思路——基础语言功底、浏览器原理、框架理解、工程化思维、算法逻辑五大块一个不少。先说2020年前端校招的技术背景。那时候Vue 2还是绝对主流React 16.8刚把Hooks推出来没多久TypeScript在中小厂还没完全普及Webpack正处在4到5的过渡期。ES6已经是标配但很多候选人写代码还是习惯用var和回调函数。B站的前端团队当时以Vue技术栈为主业务覆盖主站、直播、番剧、社区等板块对候选人的要求是基础扎实、能写业务、对性能和安全有基本意识。放到2026年回头看技术栈确实变了Vue 3和Vite成了新项目的默认选择React Server Components开始在部分团队落地esbuild、Rspack这类工具在构建领域抢了不少份额。但笔试考的东西变了吗没怎么变。JavaScript的原型链依然在考闭包依然在考事件循环依然是必考题浏览器的渲染机制和缓存策略依然在考手写防抖节流、深拷贝、Promise依然是保留项目。这不叫过时这叫基本功。基本功的东西十年也不会变。所以这份卷子的价值可以从三个层面来看对正在准备校招的2026届、2027届学生来说它是一份大厂笔试到底考什么的样本能帮你快速校准复习方向对工作两三年的前端开发者来说它是检验自己基本功是否扎实的一面镜子很多知识点平时写业务用不到但面试就是会考对需要出笔试题的面试官来说它也是一份很好的结构参考照着这个框架去设计题目覆盖面不会出大问题。总结成一句话别盯着2020这个年份要盯着题目背后的考察逻辑。下面我就把这份卷子背后对应的核心知识点、命题思路、以及备考策略完整拆一遍。现在开始逐块解析。我尽量不写标准答案式的八股文而是把每个考点背后的为什么考、怎么答才能拿分、常见的坑在哪讲清楚。3. 大厂前端笔试卷的命题套路它到底在筛什么人看一份笔试卷先别急着做题先想一个问题出题人希望用这份卷子筛掉什么样的人这个问题想明白了你复习的方向就对了。校招和社招不一样。社招可以针对具体的业务方向出题比如你做过视频播放器吗那讲讲首帧优化的方案。但校招候选人几乎没有实战经验所以笔试的核心目的是验证三件事第一你的计算机基础到底扎不扎实第二你有没有主动学习新技术的能力第三在限定时间内解决未知问题的思维模式是否合格。具体到B站这份卷子它考察的维度可以分成四个层面。第一个层面是语言基础。JavaScript是前端的根无论你用什么框架最终编译出来都是JS。所以原型链、闭包、作用域、this指向、事件循环、Promise、ES6语法这些是必考的。出题人的逻辑很简单框架可以速成但语言功底骗不了人。一个把原型链讲得清清楚楚的候选人大概率在别的知识点上也不会太差。第二个层面是浏览器与网络。前端代码跑在浏览器里一个页面从输入URL到展示出来中间发生了什么这是经典中的经典。考察点包括DOM渲染机制、重排重绘、事件冒泡捕获、本地存储、HTTP缓存、跨域、HTTPS、TCP连接等等。这个维度考的是你对运行时环境的理解深度。很多人写了好几年代码以为浏览器就是输入代码让页面显示但如果连defer和async的区别都说不清面试官很难相信你能定位线上性能问题。第三个层面是框架与工程化。2020年的卷子里Vue和React通常二选一考原理比如Vue的响应式数据绑定是怎么实现的、虚拟DOM的diff算法过程、组件的生命周期、路由的实现方式等等。工程化则会考Webpack的打包流程、Loader和Plugin的区别、Tree Shaking的原理、代码分割怎么做。这个维度考的是你在实际项目中能不能踩对技术方向。很多人在简历上写熟悉Vue结果一问响应式原理就露馅这种候选人笔试这关就已经出局了。第四个层面是算法与逻辑。大厂笔试基本都有编程题LeetCode的难度集中在简单到中等偏上但注意笔试题的算法难度通常不会太高因为它考的不是竞赛思维而是你处理问题的基本逻辑边界条件、时间空间复杂度、代码组织能力。手写防抖节流、深拷贝、Promise.all这类代码本质上是原理代码能力的综合检验。还有一个很多人忽略的点笔试的评分逻辑不是答对了就满分而是谁更稳。基础题大家都答得差不多真正拉开差距的是那些看起来简单、但暗藏细节的题目。比如让你写一个防抖函数大多数人能写出个大概但能考虑到this绑定、事件参数传递、取消功能、立即执行选项的就是少数。所以我一直给准备校招的同学强调笔试考的是你的下限不是上限。决定你过不过的不是那道最难的加分题而是那道所有人都应该做对的题目你做没做对。4. 语言基础题原型链、闭包、this、异步每一个都能挖出三层追问语言基础是前端笔试卷的绝对主角B站这份卷子也不例外。这一节我把高频考点逐个拆开讲清楚每种题型背后能挖多深以及怎么答才能让面试官眼前一亮。4.1 原型链与继承不仅会画图还要会讲prototype和proto原型链几乎是必考题但大部分候选人只停留在背结论实例.__proto__ 构造函数.prototype。如果你只会这一句考卷上那道题稍微变形一下你就懵了。原型链常见的出题方式有这几种给定一个对象让写出沿着原型链查找属性的过程。比如创建一个数组const arr []问arr.map、arr.__proto__.map、Array.prototype.map是不是同一个函数。各种继承方式的手写与优缺点对比原型链继承、构造函数继承、组合继承、寄生组合继承、ES6 class继承。原型链上同名属性遮蔽的问题。比如构造函数里定义了this.name原型上也挂了一个name访问的时候取哪个。我建议在复习时把原型链当成一张图来理解而不是背公式。当一个对象访问某个属性时JS会沿着__proto__链一直向上查找直到找到或到达Object.prototype的__proto__即null为止。这个机制本身很简单但出题人会通过继承关系来设置陷阱。真正的加分点在于你能否用原型链解释为什么ES6的class本质上是语法糖。给候选人一个提示当你理解了class Child extends Parent等价于Child.prototype的原型指向Parent.prototype你就掌握了class继承的本质。这不只是概念题很多手写题比如实现一个new、实现一个Object.create都要用到这个理解。4.2 闭包从作用域到内存泄漏的理解闭环闭包这边笔试题通常从三个角度切入概念题什么是闭包一句话版本是函数能够访问其定义时所在作用域中的变量因为函数在被定义时会把外层作用域保存下来即使外层函数已经执行完毕。输出题典型场景是for循环里用var定义变量然后异步回调输出索引问输出是多少、怎么改才能正确输出。这个题考的就是var没有块级作用域、闭包捕获的是变量而不是值。手写题用闭包实现私有变量、实现单例模式、实现防抖和节流。这里特别提醒一个高频丢分点闭包和内存泄漏的关系。很多候选人知道闭包可能导致内存泄漏但说不清楚到底怎么泄漏的。正确答案是如果一个闭包长期存在并且它引用了外层作用域中一个很大的对象比如一个数组、一个DOM引用那么即使外部已经不再使用这个对象垃圾回收器也无法回收它因为闭包仍然持有引用。所以不是闭包导致了泄漏而是不被清理的闭包可能长期持有大对象。这个区分在笔试简答题里是加分项。4.3 this指向死记硬背不如会推导this指向是前端笔试的高频易错点。核心规则其实只有几条但如果只背结论换一种出题方式照样错。两个特别好用的推导思路看调用方式而不是看定义位置。函数作为对象的方法调用时this指向这个对象普通函数调用时this指向全局严格模式下是undefined箭头函数的this继承自外层作用域。显式绑定优先于隐式绑定。call、apply、bind可以强制指定thisnew绑定会让this指向新创建的对象。所以优先级是newcall/apply/bind 方法调用 默认绑定。实际考卷里最常见的变形题是把this和对象方法赋值给变量混在一起。比如const obj { name: bilibili, getName() { return this.name; } }; const fn obj.getName; console.log(fn()); // 输出什么这里obj.getName被赋值给fn再调用时已经变成了普通函数调用所以this指向全局输出的是undefined严格模式下或全局对象上的name。很多人一看到对象方法就默认this指向对象忽略了调用位置已经改变。这种题比拼的就是基本功一点花哨都没有。4.4 事件循环从背顺序到画任务队列事件循环在前端笔试中的出场率接近100%。题目形式通常是给一段包含setTimeout、Promise、async/await、process.nextTickNode环境的代码要求写出输出顺序。这里我强烈建议不要死背结论而是在纸上画出宏任务队列和微任务队列。每次执行完一个宏任务要清空整个微任务队列然后才执行下一个宏任务。Promise.then和async/await后面的代码属于微任务setTimeout属于宏任务。还有一个容易搞混的点async函数内部的await会让出执行权await后面相当于放进了微任务队列但在微任务内部的执行顺序上它有自己的一套调度规则。笔试的题量有限不会考到特别罕见的边界情况但把每次宏任务结束后清空所有微任务这个规则用熟绝大多数题都不会做错。再加一个提示如果你在简历里写了熟悉Node.js面试官很可能还会追问process.nextTick和Promise.then的执行顺序区别。答案是process.nextTick属于下一轮之前的立即执行队列比Promise.then更早执行。这一条在Node环境下经常被拿来挖坑。5. 浏览器与网络不只是背八股还要能解释为什么语言基础之外浏览器与网络是前端笔试的第二大战场。这一部分的特点是知识点不复杂但容易记混。出题人特别喜欢用细节来筛选背过和理解过的候选人。5.1 从输入URL到页面展示一题串起所有核心知识点这道题几乎是大厂笔试标配B站卷子里通常以简答题或论述题出现。完整的回答链条是DNS解析 - 建立TCP连接 - 发送HTTP请求 - 服务器返回响应 - 浏览器解析HTML - 构建DOM树 - 加载CSS构建CSSOM - 合并成渲染树 - 布局Layout- 绘制Paint- 合成Composite。如果能提到HTTP/2多路复用、强缓存/协商缓存、渲染阻塞、懒加载优化分数会更高。但很多人不知道的是这道题其实有进阶版服务端返回的HTML中只有一个div idrootJavaScript打包文件非常大首屏白屏时间怎么优化这就从原理题变成了性能优化题考的是async和defer的区别、critical CSS内联、代码分割按需加载、骨架屏方案。2020年的笔试正好处在这个问题的热度上升期如果你能答出把路由级别的页面拆成独立chunk配合React.lazy或Vue的异步组件首屏只加载当前页面需要的JS这道题基本就稳了。5.2 缓存策略强缓存与协商缓存的优先级不能记反缓存是笔试必考也是容易丢分的地方。核心内容其实只有一张表维度强缓存协商缓存触发条件缓存未过期缓存已过期但资源可能没变相关响应头Cache-Control、ExpiresLast-Modified/If-Modified-Since、ETag/If-None-Match状态码200from disk cache / memory cache304 Not Modified优先级Cache-ControlExpiresETagLast-Modified这里有个经常被问到的细节Cache-Control和Expires同时存在时以Cache-Control为准因为Expires是HTTP/1.0时代的产物依赖客户端的本地时间而Cache-Control是HTTP/1.1的标准可以指定相对时间max-age3600。同理协商缓存中ETag比Last-Modified更精确因为Last-Modified只能精确到秒而且可能因为文件修改但内容没变而产生不必要的重新请求。笔试里针对缓存还有一种变形题用户刷新页面F5和强制刷新CtrlF5时缓存策略有什么不同普通刷新会走协商缓存强制刷新会直接跳过所有缓存重新向服务器请求。这是实际开发中调试缓存问题时最常踩的坑之一。5.3 跨域问题不仅要知道JSONP还要知道CORS的完整流程跨域是前端笔试的经典考点因为它在业务开发中太常见了。基本概念不用多说关键在于答全。一个完整的跨域问题答案应该包含同源策略的定义协议、域名、端口三者完全一致跨域的常见解决方案JSONP只能GET、CORS后端设置Access-Control-Allow-Origin等响应头、反向代理开发环境用proxy生产环境用Nginx、postMessage、document.domain子域场景CORS的完整请求流程包括简单请求和预检请求Preflight的区别。看到Content-Type: application/json这种非简单请求时浏览器会先发一个OPTIONS请求服务器返回允许的跨域规则后才会发正式请求。补充一个实操细节开发环境用Vite或webpack-dev-server的proxy配置解决跨域原理是同源策略只存在于浏览器服务器之间的请求没有跨域限制。所以代理本质上是在开发服务器层面转发请求浏览器的请求变成了相对路径自然不会触发跨域。这个问题在B站这类Vue技术栈团队的面试里几乎是必问的。6. 框架与工程化Vue/React原理看图说话构建配置处处是坑框架和工程化题目在校招笔试里往往和前面四章的内容交叉出现。不是说单独考一道Vue原理的大题而是通过代码题、选择题、简答题来考察候选人是否真的理解框架的设计思想。2020年B站以Vue为主但这部分的知识点对React同样适用。6.1 响应式原理从Object.defineProperty到Proxy的演进逻辑Vue笔试的核心题是Vue 2的响应式原理是什么它有什么缺陷Vue 3为什么改用ProxyVue 2的实现逻辑是递归遍历data对象的每个属性用Object.defineProperty把每个属性转换成getter/setter。读取属性时getter收集依赖Dep收集Watcher修改属性时setter通知依赖更新。但这样做有三硬伤新增或删除属性时Vue检测不到。因为数据在初始化时就已经完成了响应式转换之后新增的属性没有经过getter/setter劫持。Vue 2只能通过Vue.set或$set来手动处理。数组索引和长度变化无法被检测。所以Vue 2对数组的7个方法push、pop、shift、unshift、splice、sort、reverse做了重写绕过了这个限制。初始化时递归遍历所有属性深层嵌套的对象性能开销较大。Vue 3改用Proxy之后代理的是整个对象而不是某个属性新增属性、删除属性、数组索引变化都能被拦截而且不需要递归逐层遍历getter触发时才惰性收集性能明显更好。笔试时能答出上面这些基本就够了。但如果想拿高分需要再补一句Proxy的兼容性不如definePropertyVue 3也因此放弃了对IE11以下的支持。这一句话能体现出你对框架技术选型的理解不只是代码层面的。6.2 虚拟DOM与diff算法不背源码但要理解设计思想虚拟DOM的diff算法是面试官非常喜欢追问的点。校招笔试不会要求你默写整个diff过程那太长了但会通过选择题或简答题来考察几个关键结论为什么需要虚拟DOM因为直接操作真实DOM的代价比较高JS层面的计算成本远低于浏览器重排重绘的成本。Vue和React的diff都是同层对比不会跨层级比较这是为了避免算法复杂度从O(n)级别上升到O(n^3)级别。key的作用在列表渲染中用key来标识节点身份帮助diff算法更准确地判断哪些节点是复用、哪些需要新增或删除。使用index作为key是反模式因为当列表顺序变化时index会错位导致节点复用错误引起渲染bug。补充一个React和Vue实现上的区别Vue 2的diff是双端比较从两边往中间收React的diff是单方向遍历所以两者的优化策略略有不同。笔试中不要求你细说但如果你能说出Vue做了双端比较优化React通过Fiber架构把diff拆成了可中断的单元面试官对你的评价会直接上一个档次。6.3 工程化与构建Webpack的Loader和Plugin别搞混工程化是笔试中区分只写过页面和会搭项目的关键维度。2020年Webpack 4是主流笔试题主要围绕这几个点Loader和Plugin的区别Loader是文件转换器负责把一个模块的源码转换成另一个模块的代码Plugin是构建流程的插件可以监听Webpack编译生命周期、执行更广泛的任务。简单记忆Loader处理文件Plugin处理流程。Loader的执行顺序同一类型多个Loader的语义是从右向左从下到上执行的。比如sass-loader - css-loader - style-loader先让sass-loader把SCSS转成CSS再让css-loader处理CSS中的url和import最后由style-loader把样式以style标签形式注入页面。这个顺序搞反了构建直接报错。Tree Shaking的原理基于ES Module的静态结构分析在打包时移除没有真正被引用的导出代码。注意它只能对ES Module生效CommonJS模块require因为动态加载的特性无法做静态分析。这也是为什么很多库要求同时提供ES Module格式的构建产物。代码分割Code Splitting用import()动态导入语法把大文件拆成多个chunk配合路由懒加载实现按需加载。我建议2026年的候选人不要只盯着WebpackVite的相关概念也要准备。Vite利用浏览器原生ES Module支持开发环境冷启动速度比Webpack快得多生产构建底层用Rollup这已经是目前前端工程化的主流方向。B站2020年的卷子没怎么涉及Vite因为当时Vite还不够成熟但现在的校招笔试Vite出现的概率很高。7. 编程题不要只会刷LeetCode要会写能跑的代码笔试的最后一关是编程题。这一节要把刷题和写代码区分开LeetCode刷题是练算法思维笔试题编程题练的是在浏览器环境/Node环境下写出能运行、能处理边界情况的代码。两者都要练但侧重点不同。7.1 手写实现防抖、节流、深拷贝、Promise手写题是前端笔试编程题的核心类型。这几个是出镜率最高的我一个一个说。防抖debounce和节流throttle防抖事件触发后延迟N秒执行如果延迟期间又触发了重新计时。实际场景搜索框输入联想。核心代码function debounce(fn, delay 300, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; } clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked true; }, delay); }; }节流事件触发后在N秒内只执行一次。实际场景滚动事件、窗口resize。核心代码function throttle(fn, interval 300) { let lastTime 0; return function(...args) { const context this; const now Date.now(); if (now - lastTime interval) { fn.apply(context, args); lastTime now; } }; }笔试中能写出基本逻辑能拿一半分但要注意三个加分项保留this指向、透传参数、immediate选项。很多候选人写出来的函数在事件回调里this指向window结果一跑就出bug。这几个细节写上了这道题基本就是满分。深拷贝深拷贝主要考察递归实现、循环引用处理、特殊类型Date、RegExp、Map、Set、Function处理。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 cloneTarget Array.isArray(target) ? [] : {}; map.set(target, cloneTarget); Reflect.ownKeys(target).forEach(key { cloneTarget[key] deepClone(target[key], map); }); return cloneTarget; }这里WeakMap是用来解决循环引用问题的经典题目const a {}; a.self a; deepClone(a)。如果不做缓存处理会无限递归、栈溢出。Promise相关手写Promise是硬核中的硬核但B站2020年这套卷子里更多是让候选人手写Promise.all、Promise.race或者实现一个简易版Promise。手写Promise.all的要点是接收一个Promise数组返回新的Promise所有成功则返回结果数组任何一个失败则reject。function promiseAll(promises) { return new Promise((resolve, reject) { const result []; let count 0; if (promises.length 0) { resolve([]); return; } promises.forEach((promise, index) { Promise.resolve(promise).then(value { result[index] value; count; if (count promises.length) resolve(result); }, reject); }); }); }这个实现的细节在于结果要通过index记录而不是push这样保证返回结果的顺序和传入顺序一致Promise.resolve(promise)保证了传入的非Promise值也能正常处理。两个细节都写出来面试官会认为你写代码是动过脑子的。7.2 算法题难度不在难在稳前端笔试卷的算法题难度一般不会超过LeetCode中等题。常见的类型是字符串/数组操作反转字符串、去重、扁平化、两数之和排序手写快排考察递归和分治链表反转链表、判断是否有环二叉树层序遍历、最大深度。但有一个B站这类流媒体公司特别爱考的数据量大时的性能优化思路。比如有一个100万条数据的数组要在不阻塞主线程的情况下渲染到页面上这个问题不是纯算法题而是算法浏览器性能的结合。常规思路有分片渲染requestAnimationFrame分批插入、虚拟滚动只渲染可视区域、Web Worker后台处理数据。这类题在B站前端笔试中出现跟B站的弹幕、评论这类海量信息展示业务直接相关。7.3 编程题的隐性要求代码规范与边界意识最后强调一件事笔试编程题不是只判正确性还在看代码习惯。同样的功能有人写出来一堆游离的var变量、不写分号、不处理空值有人能写出清晰的注释、变量命名语义化、每个边界条件都有判断。既然条件基本相同面试官当然优先选择后者。所以我的建议是笔试时即使时间紧张也要保持好代码风格。函数名用动词开头、变量名不用a、b、tmp这种无意义命名能空一行的地方适当空行。这些细节不会直接加分但给面试官留下的这个候选人代码洁癖在线的印象会在后续面试环节体现出来。8. 针对这份卷子的备考路线三个月实操计划把整份卷子的知识点拆完之后最后给准备校招的读者一份可直接执行的备考路线。我见过太多候选人前期乱复习、后期疯狂刷题结果基础不牢遇到变形题就崩。下面这份计划是按照语言基础 - 浏览器与网络 - 框架工程化 - 刷题模拟四阶段来排的正常节奏三个月每天保证4到6小时高效学习即可。8.1 第一阶段语言基础打牢第1到4周这一阶段只做一件事把JavaScript语言的核心机制吃透。推荐的材料是《JavaScript高级程序设计第4版》的原型链、闭包、异步、ES6几个重点章节配合《你不知道的JavaScript中卷》的异步部分。每天坚持做两件事默写/手写实现new、实现Object.create、实现call/apply/bind、实现防抖节流、实现深拷贝、实现Promise.all。不要看着答案写要合上书自己写。做输出题去网上搜集50道JavaScript输出题每道题都要能在纸上写出代码运行结果并解释每一步的this指向和任务队列变化。阶段结束时自测标准见到任意一段包含Promise、setTimeout、async/await的代码能在30秒内准确写出输出顺序。达不到就继续练这是后续所有面试环节的基石。8.2 第二阶段浏览器与网络深挖第5到8周这一阶段的主线是从输入URL到页面展示这条链路把每个环节都吃透。推荐材料《图解HTTP》前八章、MDN上关于渲染、缓存、跨域的文档。每天坚持做的事情在浏览器DevTools里实际观察Network面板的缓存命中情况、Performance面板的渲染耗时。把理论知识和实际数据对应起来而不是只会背书。用Nginx开一个本地服务自己配置缓存头、配置代理实测不同响应头对缓存行为的影响。阶段结束时自测标准能不看任何资料用10分钟把输入URL到页面展示的完整流程写在纸上并针对每个环节说出一项优化措施。8.3 第三阶段框架与工程化深挖第9到12周这一阶段的核心是形成框架不只是API的理解。不管主攻Vue还是React都要往下挖一层。推荐方式把官方文档通读一遍注意读深入或原理部分比如Vue官网的深入响应式原理、React官网的协调Reconciliation。创建一个最小项目不依赖脚手架从零配置Webpack或Vite分别接入Babel、ESLint、样式处理理解每一行配置的作用。尝试读一遍框架核心源码中某一个模块比如Vue的reactive、React的useState不求全懂但要把数据流和触发更新的链路捋出来。阶段结束时自测标准能画出一张从修改数据到页面更新的完整流程图并解释每个环节中框架做了什么。8.4 刷题策略与资源最后一个月或者贯穿三个月保持每天刷题的节奏LeetCode按高频标签刷数组、字符串、链表、二叉树、动态规划入门每天2道简单、每周4道中等。手写题20道经典手写题反复练直到不假思索能写出来。包括深拷贝、防抖、节流、Promise.all、Promise.race、new、call/apply/bind、instanceof、发布订阅、数组扁平化、去重、柯里化、函数记忆、Object.create、reduce实现map、LRU缓存等。模拟笔试每周至少花2小时完整做一套真实的前端笔试卷牛客网上有大量历年大厂真题掐时间做做完之后把错题对应的知识点回归到前三个阶段。刷题阶段我给一个反直觉的建议不要追求刷了多少题要追求每种题型的套路都熟悉。前端笔试的算法题套路化很强看到数组就想到指针和哈希表看到二叉树就想到递归和层序队列看到字符串就想到双指针和动态规划。把套路吃透比题海战术更有效。9. 最后说点我的体会这张2020年B站前端笔试卷如果只把它当成一份旧题目那它确实会过时但如果把它当成一面镜子照出来的其实是前端这个行业对基本功的执念。我自己参与过不少校招面试一个很深的感受是候选人之间的差距往往不在项目经历的华丽程度而在基础知识的牢固程度。那些能把原型链、事件循环、缓存策略讲得清清楚楚的同学到了工作岗位上写代码的稳定性和排查问题的效率通常会明显更高。所以别嫌这些知识点旧、都是八股。真正的八股是只背结论不理解原理而这份卷子里的每个考点都能在日后的业务场景中找到对应。你遇到的线上偶发bug、页面白屏、接口反复请求、列表渲染错乱追根溯源大多数都落在这些基础知识点上。按上面的路线踏实走完三个月我不敢保证你一定能拿到B站或同级别大厂的offer但至少笔试这一关你的通过率会比大多数人高出一个级别。功夫在平时祝顺利。