B站前端笔试考的不只是那几道题。我自己带了几年校招生也出过几次笔试题再看这份2020年的卷子反而觉得它把前端面试的底层逻辑讲得挺清楚基础扎实度、知识体系完整度、以及现场解决问题的思路。这些到现在依然是选人的核心标准只是考察形式和深度变了。这篇文章我就以这份卷子为线索把里面的考点一个个拆开结合这几年前端技术栈的变化聊聊每道题背后面试官真正想看什么以及你能怎么准备。1. 考点地图B站这套笔试卷到底在测什么先说整体印象。这套试卷的题目分布很有代表性基本覆盖了前端面试的四大块语言基础HTML/CSS/JavaScript、浏览器与网络、框架与工程化、以及手写代码能力。其中JavaScript占的比重最大这跟2020年前后的行业风向一致——三大框架混战但不管用哪个框架语言基本功永远是筛人的第一关。我统计了一下这套卷子如果拆成知识点大概是这个分布考点模块典型题目方向考察层级HTML语义化与基础标签语义化标签选择、SEO相关记忆理解CSS布局与样式Flex布局、盒模型、水平垂直居中理解应用JavaScript核心闭包、this指向、事件循环、原型链分析综合浏览器机制渲染流程、重排重绘、存储理解分析网络与安全HTTP/HTTPS、跨域、XSS/CSRF记忆理解手写代码数组去重、防抖节流、深拷贝、Promise应用综合这套结构放到现在依然是主流。B站的题目难度在校招里属于中等偏上没有特别偏门的冷知识但每一道题都能往下追问两三层的深度。比如考闭包它不会直接问你什么是闭包而是给你一段实际代码让你分析输出结果。这就是面试官在模拟日常工作里读别人代码的场景。还有一个值得注意的点这套卷子比较重视代码输出题就是给一段代码写出控制台输出什么这种。我特别喜欢这种考法因为它能考察你对知识点的理解是否精确而不是死记硬背。很多候选人觉得自己都会一写输出题就露馅——比如var和let在循环里的区别背过八股文肯定能说出来但换成具体的代码块写着写着就分不清哪个输出什么了。所以这篇文章我不会按题目答案的老套路来讲而是按知识块来梳理把同一类考点的出题变化、考察意图、常见坑、以及现在的面试趋势都串在一起。这样你看完不只是会做这套题而是能触类旁通应对大多数中大厂的校招笔试。2. HTML与CSS:体系化基础才是真正的分水岭2.1 语义化标签和SEO的关系,别只背结论2020年的卷子特别愿意考语义化标签,几乎每年都有一道。B站的题目在这里的考法比较直接给你一系列标签让你选哪些是语义化标签或者让你给一个页面结构推荐合适的标签。但你别被简单骗了我见过太多候选人能背出header、nav、main、footer这些标签的名字但问一句为什么用语义化标签对SEO有帮助就支支吾吾说不清楚了。语义化标签的核心价值其实在两个层面。第一是对开发者一个结构清晰的页面不用看class名就能知道哪块是导航、哪块是正文协作效率会高很多。第二是对搜索引擎和辅助设备爬虫和屏幕阅读器没有看的能力它们是靠标签来理解页面结构的。比如article标签爬虫会认为这是独立、完整的内容块在搜索结果里可以触发富摘要展示而如果整个页面全都是div加一堆class爬虫就只能靠猜。在答题的时候有个技巧遇到语义化选择题先想一下这个标签放在真实页面里它表达的是什么角色。比如time不只是显示时间它还能通过datetime属性给机器读figure和figcaption是配套使用的表达的是图文组合不是单纯一个容器。你能把这个角色感讲出来面试官就会觉得你是真用过而不是背过。2.2 CSS盒模型与Flex布局:2026年了为什么还在考盒模型这道题几乎是所有前端笔试的开场白。B站的考法通常是这么几种问box-sizing的两个值content-box和border-box的区别给一个具体width加padding的布局让你算实际占用的空间或者给你两个元素问水平垂直居中有几种方法。我看到有不少候选人觉得这题太简单不屑于准备。但实话说我在面试里见过翻车最多的就是这种简单题。一道计算题width: 200px; padding: 20px; border: 5px;在content-box下实际占多少答案应该是250px宽度200 左右各20的padding 左右各5的border。很多人会脱口而出200px说明对盒模型的实际占据空间和内容区宽度这两个概念没有区分清楚。至于Flex布局2020年考的是主流2026年依然是主流。虽然现在CSS Grid也普及了但Flex在一维布局的场景里依然是优先选择而且很多组件库内部都在大量使用。B站这道题如果考Flex大概率会让你写出一个flex容器的几个关键属性或者分析一个弹性项目的对齐效果。justify-content是主轴上对齐align-items是交叉轴上对齐这个关系必须刻在脑子里。有个实际经验可以分享我建议你在准备Flex的时候把主轴和交叉轴的概念、flex简写属性三个值的含义flex-grow、flex-shrink、flex-basis、以及flex: 1到底等价于什么这三个问题吃透。其中flex: 1等价于flex: 1 1 0%而不是很多资料里写的1 1 auto。这个细节判断题很容易考也是实际写样式时最容易踩的坑。3. JavaScript核心考点:闭包、this、事件循环3.1 闭包与this指向:运行时的灵魂JavaScript核心考点里闭包和this指向是雷打不动的两座大山。B站的卷子里闭包通常不会单独出一道什么是闭包的简答题而是给一段代码让你分析输出。比如经典的计数器例子或者循环里用var声明变量的输出题。这种题目背后的考察点是看你是否理解闭包的本质函数在定义时捕获了所在作用域的引用这条引用链直到函数被销毁才释放。循环和闭包组合是最高频的考法。我给一个典型例子for (var i 0; i 3; i) { setTimeout(function() { console.log(i); }, 1000); }这段代码输出什么答案是3、3、3。原因在于var声明的i属于全局作用域setTimeout里的回调函数在1秒后执行时i已经变成了3。如果想输出0、1、2最简单的做法是把var换成let因为let在每次循环迭代中都会创建一个新的绑定。如果面试官再深挖一步问能不能用var实现同样效果你就得说用IIFE立即执行函数表达式来包裹或者用bind等方法传参。this指向的题目就更有意思了。我见过B站这套卷子里有一道很典型的题const obj { name: bilibili, getName: function() { return this.name; } }; const fn obj.getName; console.log(fn());这里fn()的调用方式决定this的指向obj.getName取出来赋值给fn之后调用时this已经不再是obj了。在非严格模式下this指向全局对象所以输出undefined因为全局对象上没有name属性严格模式下直接报错TypeError。这道题考的就是**this的指向取决于调用方式而不是定义位置**。我平时带人的时候会推荐一个调用的套路来判断this看函数是怎么被调用的前面有没有点obj.method()这种、有没有用call/apply/bind改变指向、是不是被当作构造函数new、或者就是普通调用。把这四个规则理一遍绝大多数this指向题都能搞定。3.2 事件循环与异步:从回调到Promise再到async/await事件循环Event Loop是B站这份卷子里的压轴戏之一同时也是候选人拉开差距的地方。我记得卷子里有一道题把setTimeout、Promise、async混在一起让写出输出顺序。这种题特别能考验人因为如果你只背了Promise是微任务setTimeout是宏任务这个结论遇到嵌套和顺序更复杂的场景就容易乱。我先梳理一个最核心的执行顺序模型console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);输出顺序是script start→script end→promise1→promise2→setTimeout。整体逻辑是先执行同步代码然后处理微任务队列这里就是Promise的then回调最后才轮到宏任务setTimeout。每执行完一个宏任务都要回头清空微任务队列这是一个循环的关系。如果再加入async/await可以这么理解await后面的代码相当于被放进了.then()里。比如async function test() { console.log(a); await Promise.resolve(); console.log(b); } test(); console.log(c);输出是a、c、b。因为console.log(a)是同步执行的紧接着await会让出线程后面的console.log(b)被当成微任务排队而console.log(c)是同步代码所以先执行。这里有一个很多教程不会细讲的点await会先执行右侧的表达式然后把右侧的结果挂起来等同步代码跑完后再继续。如果右侧不是Promise它也会自动包一层Promise。这就是为什么await能等待异步结果本质还是微任务调度。3.3 数组方法、原型链与深拷贝数组方法是笔试卷里的常客尤其map、filter、reduce、forEach这四兄弟。B站的一份卷子喜欢考它们之间的差别和不恰当的使用方式。比如forEach和map的区别forEach只是遍历并执行回调没有返回值map会返回一个新数组回调的返回值会被收集到新数组里。filter则是根据回调返回的布尔值来决定保留还是丢弃当前元素。reduce更强大它可以把整个数组归并成一个值比如求和、扁平化数组、或者分组统计。这些看起来基础但我在实际面试中发现能熟练使用reduce的候选人真的不多。很多人在工作中习惯了写循环或者只用map和filter遇到稍微复杂一点的统计逻辑就一筹莫展。所以如果你在准备校招我强烈建议你专门练一下reduce的常见场景数组求和、数组扁平化、数组去重、按条件计数、对象分组。把reduce的第二个参数初始值理解透了很多题目都能迎刃而解。原型链和深拷贝一般是连在一起考的。原型链问你实例对象.__proto__、构造函数.prototype、构造函数本身这三者的关系以及instanceof的判断原理。深拷贝就升级成了手写题给你一个多层嵌套的对象要求实现深拷贝并且要考虑到数组、日期、正则等特殊对象类型。我建议你掌握一个层次递进的手写深拷贝方案。第一版最简单JSON.parse(JSON.stringify(obj))能实现大部分场景但会丢失undefined、函数、Symbol和循环引用且Date会被转成字符串。第二版用递归手动复制判断每个属性的类型如果是对象就继续递归。第三版加个WeakMap缓存来记录已拷贝的对象解决循环引用问题。我实际面试时的经验是一个候选人如果能写出第二版并主动提到第三版的循环引用问题我会认为他是真正理解深拷贝的而不是只会背代码。4. 浏览器与网络渲染机制和HTTP的原理题4.1 浏览器渲染流程从URL输入到页面展示B站这套卷子在浏览器部分问得比较系统核心是从输入URL到页面展示的完整过程。后面还深入考了重排reflow和重绘repaint的区别。重排是布局变化引起的比如改宽度、改位置、删除元素重绘是样式变化但布局没变比如改颜色、改背景。后者不会影响布局所以性能开销小很多。如果你要回答从URL输入到页面展示这道题可以按这个流程DNS解析域名拿到IP → 建立TCP连接后续HTTP/2/3会有些差异 → 发送HTTP请求 → 服务器返回HTML → 浏览器解析HTML构建DOM树 → 解析CSS构建CSSOM树 → 两者结合成渲染树 → 布局计算 → 绘制到屏幕。注意这个过程中JavaScript的加载和执行有可能会阻塞DOM的解析所以才有defer和async两种加载方式defer是等文档解析完再执行且保证顺序async是下载完就立即执行不保证顺序。在2026年的面试里这道题往往会加一个延伸让你说说现在的性能优化手段。我知道很多人会背合并请求、压缩资源、CDN、懒加载这些但你是不是真的懂为什么减少重排能提升性能我建议你在准备的时候额外关注几个现代指标LCP最大内容绘制怎么优化、CLS布局偏移是什么、Web Worker能不能用来解析大任务、以及content-visibility之类的CSS新属性。这些跟渲染原理能串起来显得你不是在死背书。4.2 HTTP/HTTPS、HTTP/2、HTTP/3网络部分的题目B站比较爱考GET和POST的区别、HTTP无状态的理解、HTTPS加解密流程以及HTTP缓存机制。这些属于基本功但也是能挖得很深的话题。比如GET和POST除了GET参数在URL上、POST在请求体里这个表面区别还涉及幂等性、缓存策略、历史上对URL长度的限制以及浏览器对两者的不同处理方式。HTTPS的握手流程是一个高频考点。你至少得理解客户端发起ClientHello服务器返回证书客户端验证证书然后双方通过非对称加密协商出一个对称密钥之后通信用对称加密。这里比较关键的一个细节是现在主流的TLS握手已经演进到TLS 1.3它把握手的往返次数从两次减到一次性能提升明显。如果在面试里提到这个点会是加分项。另外一个值得准备的是HTTP缓存。简单记住这个判断顺序先看Cache-Control的max-age或者Expires过期了再看ETag/Last-Modified做协商缓存。实际开发中强缓存和协商缓存几乎每个项目都会用到尤其静态资源的hash命名配合强缓存是打包部署时的常见策略。这里我可以给个建议在准备的时候把一张强缓存协商缓存的流程图自己画一遍能让你理解得更扎实。4.3 跨域CORS、JSONP、以及现代的代理方案跨域是前端面试里绕不开的题B站这套卷子也有考。核心在于浏览器同源策略协议、域名、端口三者都相同才算同源否则跨域。跨域解决方案里JSONP虽然老但仍在考因为理解它能帮你理解浏览器没有对script标签做同源限制这个机制。而CORS是官方推荐的现代方案核心在于服务器返回Access-Control-Allow-Origin等响应头告诉浏览器允许这个来源访问。在实际项目中前后端分离的开发环境一般用webpack devServer的proxy或者Vite的proxy做代理转发同源策略不会触发。生产环境则靠Nginx反向代理。如果你在笔试或面试中遇到跨域最好能体现我知道每种方案背后解决的是什么问题。JSONP是只能发GET简单场景够用CORS需要后端配合改响应头代理方案需要把接口地址和前端页面地址放在同一个域名下。把这三个层次说清楚就比单纯罗列方案强很多。5. 框架与工程化从选型到实践5.1 框架必考题生命周期、数据通信、虚拟DOM2020年B站的笔试里框架主要考的是Vue和React二选一的基础原理。比如Vue的响应式原理v-model的语法糖本质组件的生命周期React的State和PropssetState的异步性组件卸载时的清理工作。这些题目到了2026年依然是校招常考题只是框架版本更新了一些比如Vue 3的Composition API和React Hooks已经是默认写法。我有个判断框架部分的题目面试官其实想确认你是否真的在项目里用过而不只是看过文档。比如Vue 3的ref和reactive的区别这两者都是响应式APIref包裹基本类型时访问和修改需要用.valuereactive直接作用于对象但不适合解构。实际项目中我用reactive容易逻辑清晰但如果你在封装hook拆开变量时就会破坏响应式所以这时候我会建议用ref加toRefs。面试时把这些实际取舍讲出来比背概念有用得多。React这边useEffect的依赖数组是高频考点。很多人只记得不传依赖就每次渲染都执行传空数组只在挂载时执行但遇到具体场景还是会出错。比如你写了一个useEffect里调接口依赖数组里忘了加id发出去的请求可能就是上一次的id这种bug非常隐蔽。还有一个很容易被问的setState异步更新问题连续调用多个setStateReact会合并批处理最终只渲染一次。这也是为什么你不能在setState之后立刻读取最新的state值。5.2 webpack与工程化性能优化和构建工具演进工程化在笔试卷里的地位逐年上升。B站2020年的卷子已经涉及webpack的一些基本概念比如loader和plugin的区别tree-shaking是什么。到了2026年Vite已经成了很多新项目的主力构建工具但webpack因为生态成熟仍然大量存在。我在面试时经常问的是你们项目为什么选这个构建工具它解决了什么问题能回答出这个说明候选人不是只会跑npm run dev。如果笔试遇到loader和plugin的区别你可以这样理解loader是转换器负责把一种文件内容转换成另一种比如babel-loader把ES6转ES5css-loader处理CSS的import和url()plugin是扩展器能做loader做不了的事比如HtmlWebpackPlugin动态生成HTML、MiniCssExtractPlugin提取CSS文件。plugin是在构建的生命周期里执行钩子很多。tree-shaking也是一个经典题。它依赖ES Module的静态结构因为import/export是在编译期就能确定关系的所以打包工具才能把未被使用的导出摇掉。这里面有个坑如果你用了CommonJS的require则tree-shaking基本失效所以新项目默认用ES Module。另外写了sideEffects: false告诉打包工具我这个包里的文件都是纯的可以放心摇。5.3 微前端与性能优化2026年的大热考点从2025年到2026年热词里出现微前端的次数明显多了。虽然2020年B站的卷子上没有直接考微前端但以我的经验现在的大厂面试几乎都会问一句你们了解过微前端吗它解决什么问题不是要求你会写代码而是看你对架构层面有没有认知。微前端解决的核心问题是多团队、多技术栈的大型中后台系统的集成。比如一个后台管理平台登录和用户中心是A团队开发的用的是Vue 2订单模块是B团队开发的用的是React。你想让它们同时跑在一个壳子里单一框架就做不到了这时候微前端就能派上用场。主流的方案有qiankun基于single-spa、Module Federationwebpack提供了跨应用共享模块的能力等。如果你对微前端感兴趣我建议先从qiankun入手因为它的上手成本最低社区资料也多。核心概念是主应用注册子应用子应用暴露生命周期钩子bootstrap、mount、unmount主应用负责加载、挂载和卸载。这种架构下子应用的样式隔离和JS沙箱是最容易出问题的点也是面试官最爱深挖的点。性能优化部分除了上面提到的渲染机制相关的优化现在的考题更偏向于真实业务场景。比如首屏加载太慢你会怎么排查和优化这种题没有标准答案但有经验的人会答出层次先看Network面板确认资源大小和耗时再看Lighthouse给出的指标然后从资源体积、请求数量、加载时机、缓存策略四个维度去优化。能说出这个流程比单纯背图片压缩、代码分割、懒加载要高级不少。6. 手写题与综合题怎么在有限时间里拿分6.1 高频手写题数组去重、防抖节流、Promise.allB站这类大厂校招笔试卷手写题基本是固定的无非是数组去重、防抖节流、深拷贝、Promise.all、以及简单的EventEmitter。这些题看着基础但有几个隐藏加分点值得你注意。先说数组去重。最简单的方案是[...new Set(arr)]一行搞定。但如果你能写出来之后补充说明Set的去重基于SameValueZero算法NaN和NaN会被认为是相同的但对象因为引用不同不会被去重面试官就会觉得你真的理解而不是背了个API。如果题目要求保留第一次出现的元素你可以用filter加indexOf或者用Map记录出现标记。防抖节流是另一个烂大街但永远在考的手写题。核心区别一句话防抖是在事件触发后延迟执行如果在延迟期间又触发了就重置计时器节流是一段时间内只执行一次。用生活类比防抖就像电梯关门只要一直有人进门就一直不关节流就像地铁发车不管站台上人多不多到点就发。手写防抖的完整版本function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }throttle最常见的是时间戳版本function throttle(fn, interval) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这两个版本都有个细节如何保证回调里this指向正确。如果你直接用fn(...args)this就丢了所以要用fn.apply(this, args)。这是我平时review代码时经常看到的问题手写题也会考。Promise.all的手写版本考察点是Promise的内部机制和一个关键定式用计数器判断所有任务是否都完成了。function myPromiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; for (let i 0; i promises.length; i) { Promise.resolve(promises[i]).then(value { results[i] value; count; if (count promises.length) { resolve(results); } }).catch(reject); } }); }这里有个细节results[i] value而不是results.push(value)是为了保证结果顺序和传入的顺序一致。如果你用push异步任务完成的先后顺序会导致最终结果乱序。6.2 综合题从笔试题到业务场景题2020年B站的卷子笔试后面往往还有一两道综合题比如设计一个图片懒加载组件实现一个并发控制的请求队列或者给一个长列表页你怎么优化性能。这些题目本质上是考察你是否能把前面那些基础知识点串起来应用到真实场景。以图片懒加载为例基本的实现思路是用IntersectionObserver监听图片是否进入视口进入后再设置真正的src。这个方案的兼容性和性能都要优于传统的监听scroll事件计算getBoundingClientRect。如果你在回答里提到除了图片懒加载还可以用content-visibility: auto让浏览器跳过视口外的渲染会是个加分项。再看并发控制的请求队列。这个场景在实际项目中太常见了比如批量上传文件时你需要限制同时上传的数量避免服务端压力过大。手写一个带并发限制的调度器是一个很好的练习。核心思路是维护一个任务队列同时最多执行limit个任务每完成一个就从队列里取下一个。实现上可以用递归也可以用async/await配合计数器。我在这里分享一个通用经验手写综合题的时候哪怕时间不够写完也一定要把思路和核心结构写出来比如我会用一个队列存任务一个计数器记录当前并发数然后循环启动任务。面试官看笔试最重要的不是你的代码能不能直接跑而是你的思路是否正确、边界条件是否考虑到了。空着不写是大忌我筛简历看到空白卷基本就一票否决了。6.3 送分题与压轴题的取舍策略笔试时间有限学会取舍很重要。我一般建议的做题顺序是先扫一遍所有题把你有把握的、短时间能做完的送分题先做掉比如概念题、简单的代码输出题然后集中精力做手写题和综合题最后留一点时间检查有没有粗心算错的输出题。碰到一道完全没思路的题不要一条路走到黑。笔试里经常出现一道题卡了20分钟的情况特别亏。你先跳过等到最后如果还剩时间再回来从出题人想考我什么这个角度推一推。比如一道看起来是考Promise的题如果你实在不确定想一想如果我是出题人我会把微任务和宏任务的顺序隐藏在哪里往往能猜出大概方向。还有一个技巧手写题注重代码规范。变量命名有意义、函数拆分明细、该加注释的地方加注释这些都会给阅卷人留下好印象。我见过一些候选人代码思路完全对但变量名全是a、b、c函数几十行不拆分这会让面试官觉得你的代码习惯不好。校招笔试不只是看你会不会也在看你的代码习惯能不能直接上团队项目。7. 高频错题与常见坑这套卷子的陷阱实录7.1 输出题里的经典坑变量提升与暂时性死区输出题是最容易踩坑的题型。B站2020年这套卷子里有一道很经典的变量提升题直到现在我都还在用类似题目面人console.log(a); // ? var a 1; console.log(b); // ? let b 2;答案分别是undefined和报错ReferenceError。var声明的变量会被提升到作用域顶部但赋值不提升所以第一行打印undefinedlet也存在提升但进入了暂时性死区在声明之前访问会直接报错。很多候选人只记了let不会提升这是错的let其实也会提升但因为有暂时性死区所以不能提前访问。能把这个细节讲清楚的人对JavaScript引擎的理解才算到位。7.2 异步顺序题为什么输出顺序和我以为的不一样这种题我见得最多的错误是以为Promise.then会比async/await快或者以为微任务会在所有宏任务之前统一执行完。我用一个综合性的例子来说明setTimeout(() { console.log(timeout1); }, 0); Promise.resolve().then(() { console.log(promise1); setTimeout(() { console.log(timeout2); }, 0); }); console.log(sync);输出是sync→promise1→timeout1→timeout2。注意promise1里注册的timeout2虽然是在微任务里注册的但setTimeout的回调还是进宏任务队列而且会排在原来的timeout1之后。所以不要以为先有微任务后注册的宏任务就跑在前面。7.3 作用域与闭包题不要忽略块级作用域还有一个高频坑是块级作用域。比如这段代码let x 1; { let x 2; console.log(x); // ? } console.log(x); // ?答案分别是2和1。let是块级作用域内部的x和外部的x是两个变量互不干扰。如果把let换成var内部和外部就是同一个变量输出就变成2和2了。这类题很多时候是考你是不是真的理解了作用域链和块级作用域而不是考你会不会读代码。我做一个实用的建议在笔试前把var、let、const的差异var的提升let的暂时性死区以及作用域链、闭包、this指向这六个主题各准备5个左右的例题反复写输出。这个基础牢了输出题基本不会失分。8. 笔试之后简历与面试准备怎么配合8.1 框架之外一份有区分度的简历笔试只是第一关通过之后通常会有1~2轮技术面。这里我想多说一句B站这类大厂的校招笔试成绩和简历是放在一起综合看的。如果你笔试分数很高但简历项目经历写得特别空面试官反而会提高期待问很多细节来验证比如你这个项目里的数据是怎么缓存的为什么选这个库而不是那个库。这恰好是很多候选人的短板。我的建议是简历上的每个项目都应该回答四个问题项目背景解决什么问题、你的角色与贡献、技术栈选型及原因、以及你踩过最大的坑。第四点往往是最有区分度的。比如你可以写在项目中实现了大文件分片上传解决了nginx对大文件请求体的限制问题面试官就会顺着问分片大小怎么定的断点续传怎么做服务端怎么合并分片这些都是加分互动。8.2 面试中怎么讲项目和展示思维如果你过了笔试面试官多半会围绕笔试里的错题和简历项目进行深度追问。我个人比较建议用STAR法则来组织项目经验Situation背景、Task任务、Action行动、Result结果。讲的时候不要太久两三分钟足够重点放在Action部分即你怎么做的为什么这么做有没有对比过其他方案。技术面还有一个高频环节是现场编程。很多时候面试官会出一个比笔试简单一点的题让你边说边写。这时候注意不要闷头写要有节奏地边写边解释你的思路是什么为什么这么写边界条件怎么处理。哪怕最终代码没跑通沟通中的思路展示也能挽回不少分。我见过很好的候选人写代码时先讲伪代码再动手写完之后主动说我来验证几个边界情况这种表现比闷头写完把代码一交要强太多。8.3 校招时间线与复习节奏建议最后聊一下时间线。如果以秋招9月为截止点倒推4月到6月集中补基础、做项目7月开始刷笔试真题每天做一套并整理错题8月复习错题、背概念、练手写题9月投递和面试。这个节奏核心是基础不欠账刷题有反馈。刷题的时候建议不要只刷一份卷子B站的卷子做完可以再做腾讯、字节、阿里的真题。你会发现很多考点是重叠的只是出题风格不同。还有一点做完一套卷子后把自己答错的题目整理成错题本每隔一周拿出来重做一次。重复是记忆的关键我见过太多人刷了很多题但从不复看重做效率特别低。另外现在很多大厂会先有一轮智力题或者行测题考察逻辑和反应速度这部分考前可以做几套题找感觉但不用花太多时间。真正核心的还是你的前端基础和技术深度。9. 2026年视角:这套卷子过时了吗聊到最后回答一个你可能关心的问题2020年的这套卷子放到2026年还有参考价值吗我的答案是价值很大但不能只看题目本身。从知识点的角度看HTML/CSS/JavaScript/浏览器/网络这些基础至今没有变化。虽然前端框架换了一茬又一茬构建工具从webpack卷到Vite再到Rspack但底层的语言特性和浏览器原理依然是前端的硬通货。这套卷子作为基础练兵完全不过时。但从出题趋势看确实有变化。2026年的大厂笔试越来越偏向场景题直接问知识点的题目在减少。比如你现在需要在页面上传一个1GB的大文件你会怎么设计如何保证前端项目的可访问性a11y你的团队引入AI辅助开发后code review要关注什么这些题目没有标准答案更看重你解决问题的思维链路和对前沿方向的敏感度。我的感受是前端这个行业技术迭代快但底层规律稳定。不管题目怎么变基础扎实 知识成体系 能解决实际问题这三个能力始终是校招筛选的核心。所以你在准备这份B站卷子的时候不妨多问自己几个为什么把每个知识点背后的原理搞通透比多做十道题都有用。我个人带新人的经验是能把这套卷子做懂做透尤其是能解释清楚每道错题背后的原理再配合一段自己真实写过的项目经历在校招里已经能超过大部分候选人了。后面的路还长前端的技术世界足够大保持学习节奏就好。