“字节跳动2018校招前端方向第四批”这个标题对很多后来者来说可能有点陌生但对经历过那个阶段的人而言这套题几乎是“前端面试题”这门玄学最早的标杆之一。我是在2018年秋招时收到的笔试链接晚上七点开考两小时内被一套题打得怀疑人生。后来我自己做了多年前端也参与过不少团队的校招出题再回头看这套题才明白当时出题人真正想筛的不是“刷过多少API”而是“有没有把基础吃透”。这套题适合谁看第一类是正在准备校招或社招前端面试的人尤其是想进大厂、想摸清自己基础扎实程度的人第二类是已经工作几年、想回炉一下基础的前端开发第三类是想了解大厂笔试出题逻辑的团队负责人。它和2026年最新的前端面试题相比框架和工具确实旧了但底层的JS机制、网络原理、算法思维到今天依然是面试重点而且在很多新题里被包装得更深、更拐弯。1. 2018年字节跳动前端笔试到底在考什么1.1 出题风格重基础、重原理、轻配置2018年的笔试没有“环境搭建”这种操作型考题也不会考“webpack怎么配entry”更不会让你手写一个Vue组件。选择题的范围非常集中JavaScript语言细节、CSS布局与盒模型、HTTP与浏览器机制、网络安全、Vue 2响应式原理编程题则是算法加手写JS的组合。为什么这样出因为校招候选人背景差异太大有人科班出身有人自学转行如果出“如何用某框架写一个页面”那没学过框架的人直接出局根本筛不出潜力。出题人的策略是用算法题统一考察数据结构和逻辑思维用JS/CSS/网络选择题考察语言与浏览器底层理解用少量手写题考察代码功底。这个结构到今天仍然是许多大厂笔试的通用模板只是题目从“Vue 2的Object.defineProperty”换成了“Vue 3的Proxy”或“React 18的并发特性”。1.2 为什么第四批值得单独复盘第四批相比前三批有两个明显特点。一是在事件循环相关考点上做了加码出现了多段代码结合考察的输出顺序题这类题需要把调用栈、任务队列、微任务和宏任务整个串起来死记结论很容易翻车。二是在编程题上保留了一道结合字符串和数字处理的题目也就是后来被反复提到的“大数相加”题目本身不复杂但很考验对JavaScript数字精度限制的理解。整体难度在四批里算居中但陷阱非常多属于那种“选择题看着都眼熟一选就错”的类型。后来很多求职者把这套题当“前端面试八股文”背我的态度是背结论不如推导过程。只要你能把每个选项为什么错讲清楚基础基本就过关了。2. 高频考点拆解选择题背后的原理2.1 JavaScript语言细节闭包、作用域与this指向JavaScript语言的细节题是这套卷子的重头戏几乎不可能避开。首先是闭包它不只是“函数返回函数”这么简单核心是词法作用域与变量生命周期。经典题长这样for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }输出是什么答案是连续五个5不是0 1 2 3 4。原因有两个第一var声明的变量不构成块级作用域所以循环里那五个匿名函数共享的是同一个全局变量i第二setTimeout的回调不是立即执行而是等循环结束后才进入任务队列所以它们读到的i已经是循环退出后的5。如果改成let声明每次迭代都会创建独立的绑定输出才是0 1 2 3 4。如果不想改声明方式用IIFE也能隔离for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }这一题的变体非常多有的会改成在循环里给对象挂回调有的会改成用Promise包一层。但底层只有一句话回调执行时读取的是变量当下指向的值而不是定义时的快照除非你人为创建了新作用域。this指向的题就更花式了。普通函数调用时严格模式下this是undefined非严格模式下指向全局对象对象方法调用时this指向调用它的对象构造函数里的this指向实例箭头函数没有自己的this它沿词法作用域向上找。理论上都好记但混在一起就很容易错。比如var name global; var obj { name: obj, say: function() { return function() { console.log(this.name); }; } }; obj.say()();输出是global还是obj答案是global因为返回值是一个普通函数调用时属于独立函数调用this不指向obj。要让它输出obj要么用箭头函数要么在外面保存一个self变量。这类题考的就是你是否清楚“this是在调用时确定的不是在定义时确定的”。2.2 事件循环与异步机制这套题对事件循环的考察可以说是当时所有大厂笔试题里最细的。先来一道入门题console.log(script start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); console.log(script end);输出顺序是script start、script end、promise、timeout。原因在于同步代码先执行然后清空微任务队列promise的then最后才轮到宏任务setTimeout。这就是网上常说的“微任务优先于宏任务”但它不是靠背结论就能万无一失的。第四批加码的地方在于它把async/await和Promise混在一起让整体顺序变得反直觉。我当时最怕的就是这种。核心理解点是await后面的代码相当于被放进了Promise的then回调里属于微任务而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);在2018年主流的Chrome版本下输出序列是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。很多人会挂在async1 end和promise2的顺序上。原因是async1在await处挂起之后后续代码作为一个微任务排队而new Promise的then也在后面排队两者的具体顺序取决于引擎实现。新版V8里这个顺序可能变成promise2在async1 end之前所以这种题在面试现场很容易引发争论。我觉得比记答案更重要的是理解机制await是语法糖它把后续代码推进微任务队列而不是什么“遇到await就整体暂停”。2.3 原型链与继承原型链考察属于“必考但不难”的板块难的是把Function、Object和构造函数之间的关系理清楚。常见的选择题会给你一个对象obj然后问某个属性或方法是否存在或者问obj instanceof Object和Object instanceof Function分别是什么。记住几条硬规则对象通过__proto__找到它的原型对象函数的__proto__指向Function.prototypeObject.prototype是原型链的顶端再往上就是null除了Object.create(null)创建的对象几乎所有对象都能找到Object.prototype上的toString、hasOwnProperty等。继承部分重点在区分ES5组合继承和ES6 class继承。ES5组合继承是构造函数继承加原型链继承的混合问题在于父类构造函数会被调用两次。ES6 class的extends则通过原型链和内部[[Prototype]]机制实现子类实例的原型是子类.prototype子类.prototype的原型是父类.prototype同时子类的构造函数还通过静态属性继承父类的静态方法。选择题如果问“class Son extends Father中Son.__proto__是什么”答案是Father不是Function.prototype这个点容易忽略。2.4 CSS布局与盒模型CSS部分在2018年的卷子里占的比重不小而且很看重计算。盒模型计算题是必出的需要区分标准盒模型content-box和怪异盒模型border-box。同样的宽度设置后者会把padding和border算进width里前者则是纯内容宽度。浮动清除考过不止一次。为什么要清浮动因为浮动元素会脱离文档流导致父容器高度塌陷。常见解法有四种父容器触发BFC、使用clear:both的空元素、父元素用::after伪元素清除、直接给父元素定高。其中伪元素法是最终推荐方案因为它不侵入DOM结构。BFC的触发条件也要记住overflow值不为visible、float不为none、position是absolute或fixed、display是inline-block或table-cell等。flex布局当时已经普及但出题人更爱考“为什么能居中”而不是“怎么写居中”。给一个父容器display:flex后justify-content控制主轴方向对齐align-items控制交叉轴方向对齐默认flex-direction是row主轴是水平方向。如果改成flex-direction:column主轴就变垂直了这时justify-content控制的是垂直方向。这个主轴和交叉轴的转换是很多人写居中时翻车的原因。2.5 HTTP缓存与浏览器机制HTTP缓存是网络层面的重点2018年考的是缓存头优先级和触发场景。当浏览器发起请求时命中强缓存直接返回本地副本状态码是200 from memory cache或200 from disk cache强缓存未命中时携带协商缓存的请求头问服务器资源有没有变化服务器返回304则继续用本地副本返回200则用新资源并更新缓存。强缓存的字段是ExpiresHTTP/1.0和Cache-ControlHTTP/1.1Cache-Control优先级更高。注意Cache-Control: no-cache不等于不缓存它的意思是“使用缓存前必须去服务器验证”no-store才是真正禁止缓存。协商缓存字段是Last-Modified/If-Modified-Since和ETag/If-None-MatchETag优先级高于Last-Modified因为Last-Modified只能精确到秒同一秒内文件改动会漏判。浏览器渲染机制也有题考点是渲染主流程解析HTML生成DOM树解析CSS生成CSSOM树两者合成渲染树然后布局、绘制。有一个高频坑JavaScript脚本在HTML解析过程中是阻塞的默认遇到script标签会暂停DOM解析去下载并执行JS所以传统优化是script标签放body底部或者用async和defer属性。async是下载完立刻执行不一定按顺序defer是延迟到文档解析完再执行并且保证顺序。2.6 Vue 2响应式原理与diff算法2018年Vue 2如日中天这套卷子很难绕开它。Vue 2响应式的核心是Object.defineProperty它只能拦截对象已有属性的getter和setter无法监听新增属性和删除属性也无法拦截数组通过索引直接赋值以及修改length。所以Vue 2才提供了$set方法和Vue.set本质是对于对象直接调用Object.defineProperty给属性建立响应式对于数组调用splice方法触发更新。选择题如果问“为什么Vue 2直接改数组下标不会更新视图”答案就是Object.defineProperty的局限。nextTick也是考点。它内部实现了一个微任务队列优先使用Promise其次MutationObserver然后是setImmediate最后才是setTimeout。为什么要用nextTick因为Vue的DOM更新是异步的数据改变后视图不会立刻更新需要等本轮事件循环结束后统一patch。这个机制和事件循环的考点能联动起来属于跨章节的综合题。diff算法部分考得比较多的是key的作用。列表更新时key让Vue能识别节点是否复用避免不必要的DOM重建。如果key用的是数组index在列表头部插入一条数据时所有元素的index都会变导致Vue复用错误的节点可能引发状态错乱。这个坑直到今天还在面试里反复出现只不过问法从Vue 2换成了Vue 3和React。3. 编程题实战复盘三种必会题型3.1 大数相加模拟竖式避开JavaScript精度陷阱大数相加是这套卷子里很有代表性的一道题。题目大概是这样给定两个字符串形式的非负整数num1和num2返回它们的相加结果也是字符串形式。为什么不能直接转Number相加因为JavaScript的Number能安全表示的整数范围是2的53次方减1一旦超过这个范围就会出现精度丢失而字符串可以表达任意长的整数。正确思路是模拟竖式加法从最低位开始逐位相加用carry变量记录进位最后把每一位的结果拼起来。function addStrings(num1, num2) { let i num1.length - 1; let j num2.length - 1; let carry 0; let res ; while (i 0 || j 0 || carry 0) { const a i 0 ? num1.charCodeAt(i) - 48 : 0; const b j 0 ? num2.charCodeAt(j) - 48 : 0; const sum a b carry; carry Math.floor(sum / 10); res (sum % 10) res; i--; j--; } return res; }这里有几个值得注意的细节。第一用charCodeAt(i) - 48而不是Number(num1[i])是为了减少一次隐式类型转换性能更好也符合笔试环境的代码习惯。第二循环条件是i 0 || j 0 || carry 0最后这个carry 0不能漏掉否则最高位进位时结果会少一位。第三res (sum % 10) res是头插法每次把当前位的结果放到最前面不需要在循环结束后再reverse。这道题的错误高频点是有人用parseInt逐段截取或者用BigInt直接算。BigInt在JavaScript里是原生支持的但笔试通常希望你自己实现而且有些老版本运行环境不支持。所以老老实实模拟竖式最稳妥。3.2 二叉树的层序遍历BFS模板与队列优化树相关的算法题在这套卷子里也出现过其中层序遍历是高频中的高频。层序遍历要求按层输出每一层的节点放在一个子数组里。递归不大好写BFS配合队列才是标准解。function levelOrder(root) { if (!root) return []; const queue [root]; const result []; while (queue.length) { const levelSize queue.length; const currentLevel []; for (let i 0; i levelSize; i) { const node queue.shift(); currentLevel.push(node.val); if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(currentLevel); } return result; }这里有一个必须想清楚的细节每次循环先保存levelSize queue.length然后for循环里只处理当前层的节点这样最后push进队列的下一层节点不会串到本层里。如果直接写for (let i 0; i queue.length; i)因为队列长度在动态变化执行结果就会错乱。另一个可以优化的点是shift方法的性能。数组的shift操作会把后面的元素全部往前移一位时间复杂度是O(n)在节点很多时会拖慢整体性能。更推荐的做法是用一个索引指针代替真正的出队操作function levelOrder(root) { if (!root) return []; const queue [root]; const result []; let head 0; while (head queue.length) { const levelSize queue.length - head; const currentLevel []; for (let i 0; i levelSize; i) { const node queue[head]; head; currentLevel.push(node.val); if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(currentLevel); } return result; }虽然笔试里用shift通常也能通过但能用指针优化是加分项说明你清楚数组操作的底层成本。3.3 事件循环输出题不只是背结论手写事件循环输出题是第四批里区分度特别高的一题。前面2.2节的示例就是这类题的代表。这种题没有固定答案可背因为只要换一个顺序、加一个await、或者把Promise放到async函数里结论就会变。我当时的应对策略是在草稿纸上画两条队列微任务队列和宏任务队列。遇到await就把它拆成“右侧表达式先执行后续代码入微任务队列”。遇到new Promise就注意executor是同步执行的then回调才入队列。遇到setTimeout哪怕是0毫秒也一定是宏任务排在微任务后面。还有一个小细节Promise回调只有在resolve或reject之后才进入微任务队列如果executor里没有调用resolvethen是不会执行的。这个很多人容易忽略觉得写了Promise就一定会执行then。笔试里有一种陷阱就是executor里调用了resolve但后面代码抛错或者resolve之后又调了一次reject后者的调用会被忽略因为Promise状态一旦改变就不可逆。3.4 答题时间规划与得分策略这套笔试限时大概两小时题量不小。我自己的建议是选择题控制在60分钟以内编程题至少留90分钟最后还要留10到20分钟检查。曾经有朋友在最后一道算法题上耗了40分钟没写出来前面的选择题又没时间检查最后他告诉我好几道应该拿到的分都丢了很可惜。从出题人的角度看编程题是按测试用例给分的不是只有AC才得分。所以哪怕卡住了也要写一个暴力解把能处理的用例都处理掉一部分通过也有分。我在做算法题时有个习惯先写边界判断比如空输入、单个元素、最大值等再写主流程。这样至少不会因为边界条件挂掉所有用例。4. 踩坑实录与复习策略旧题新用4.1 当年大家普遍踩的5个坑我复盘了当时和后来几届学弟学妹的反馈把最典型的翻车点整理成了一张表翻车点典型表现根本原因解决建议for循环和setTimeout混用以为输出0到4实际全是同一个值没有真正理解var块级作用域缺失把let、IIFE、块级作用域的原理吃透Promise状态理解偏差以为then一定会执行忽略executor里必须调用resolve/reject从Promise状态机角度理解flex主轴与交叉轴混淆垂直居中写成水平居中对flex-direction改变主轴方向不熟绘图记忆主轴和交叉轴的关系大数相加直接Number()转换数字超过安全整数范围后精度丢失不了解Number精度边界用字符串模拟竖式或用BigInt兜底HTTP缓存优先级记混以为Expires优先级更高死记硬背但没理解字段演进把HTTP/1.0和HTTP/1.1的字段按时间线记这五类问题到今天的新题里依然存在尤其是事件循环和this绑定属于前端面试的“钉子户”题目。如果你能把这几个坑从原理上想清楚很多新面试题做起来会顺手很多。4.2 这套题放到2026年还适用吗很多人问过我这个问题2018年的旧题放到2026年都快8年了还有必要刷吗我的答案是有必要但要有取舍。像事件循环、作用域闭包、this指向、HTTP缓存、原型链这类题目属于语言和浏览器机制层面的“底层恒定知识”8年过去依然是面试高频。除了Vue 2响应式那部分需要更新成Vue 3的Proxy实现网络层需要补上HTTP/2、HTTP/3和WebSocket相关题目之外大部分选择题背后的原理并没有过时。但2026年的前端面试题也确实多了很多新东西。工程化方面会问Vite和webpack的差异、模块联邦、微前端方案框架方面会问React 18的并发渲染、Vue 3的Composition API和Teleport工具链方面会问AI辅助编码工具比如Cursor、Copilot对开发流程的影响甚至有些团队开始问大模型接口对接、前端如何直接调用AI能力。还有一类新题和“全栈化”趋势有关。现在不少团队要求前端能承担部分后端工作比如用Node写BFF层所以会问SSEServer-Sent Events的使用场景、SSE和WebSocket的区别、如何在后端本地启动一个SSE服务等。这些都是2018年的卷子里不会出现的内容。所以我的建议是把2018年的题当成“基础题库”来用先把它的知识点全部吃透再拿2026年的最新面试题去补盲区。基础不牢的话刷再新的题也只是在背答案换个问法就露馅了。4.3 用旧题做新复习的具体方法最后分享一套我验证过的复习流程。第一步限时模拟。拿出一大块完整时间按笔试流程计时做完这套题中途不要查资料不要翻书。这个环节的目的是摸清自己当前的水平和薄弱点分数不重要。第二步逐题写解析。不要只对答案要把每一道题都写出完整的推导过程。选择题要写出每个选项为什么对、为什么错编程题要写注释讲清楚每一步在做什么。这个过程会比较耗时但收获最大。第三步把错题按知识点分类。比如事件循环归成一类、原型链归成一类、HTTP缓存归成一类。然后针对每个类别去找2026年的最新面试题做扩展。每类至少做三到五道新题确认自己真的掌握了而不是只会这一道旧题。第四步追着问“为什么”。对每个知识点连续追问三次为什么直到答不出来再带着问题去查资料或看源码。比如HTTP缓存就追问为什么ETag优先级高于Last-Modified因为前者能精确判断内容变化而后者只能精确到秒再追问为什么no-cache不是不缓存因为RFC 7234明确规定no-cache表示使用前必须验证。能回答到这个深度面试官一般不会再为难你。第五步每周复盘一次。把之前的错题重新做一遍看是不是还会在同一个地方出错。我见过很多人第一次看完讲解都懂一周后再做又错原因就是没有完成“把短期记忆转化为长期理解”的过程。我个人在实际操作中的体会是这套题最大的价值不在于题目本身而在于它强迫你把从前端页面开发的舒适区里拉出来重新审视那些最基础、最容易忽略的问题。我现在做技术面试时偶尔还会翻出这套题用里面的输出题问候选人倒不是想刁难人而是想看看对方是凭记忆背下来的还是真的能把调用栈、任务队列和微任务之间的关系讲清楚。从2018年到2026年前端行业变化很大但基础能力和排查问题的思维方式一直是这个职业最值钱的护城河。