1. 为什么2018年的前端面经今天依然值得看先说个结论前端这个行业面试题的形变得很快但神一直没变。我在2018年集中面了头条、腾讯、小米、百度四家那一年正好是前端工程化全面普及、Vue 2和React 16并行发力、小程序刚冒出头的关键节点。现在回看当时的面试记录很多题目在今天依然是高频题只是换个马甲继续考。这篇面经整理自四家公司的完整面试流程涵盖技术面、算法面、HR面以及我当时踩过的坑和复盘。适合三类人看正在准备大厂前端面试的候选人、想对照自己水平做查漏补缺的在职前端、以及刚入行想了解大厂考察逻辑的新人。哪怕题目过时了面试官考察的底层能力和思维方式是长期有效的。我当时的状态是两年多经验主要技术栈是Vue 2 Webpack 3React能写但不深入Node.js会一点算法基础一般。那时候没刷题App就是靠LeetCode和面经一点点啃。说句实话2018年的前端面试已经比前两年卷多了不光是问API用法而是开始大面积考察源码级理解、浏览器原理、性能优化、手写代码。这个趋势到现在只增不减。2. 四家公司的面试风格与考察偏重2.1 头条算法是硬门槛基础扎实就不慌头条现在的字节是我面的第一家整体流程最标准化效率也最高。一面、二面连续面完中间几乎不等待每轮45分钟到1小时。印象最深刻的是几乎每一轮都绕不开算法题而且是在线coding不是纸上写写就完事。头条的算法题偏重数据结构和逻辑思维不是那种背模板就能过的题。我遇到的题目包括数组去重升级版要求保持顺序且统计频次、二叉树层次遍历变种、字符串解析、二分查找变形。难度大致在LeetCode Medium水平不涉及特别复杂的动态规划但要求你写出的代码能跑、边界条件全。头条的基础题问得很细尤其是浏览器相关。比如从输入URL到页面展示发生了什么这个问题现在面试还在问但头条当时要求你讲得足够具体DNS解析的细节、TCP握手、HTTP缓存策略、渲染过程中的DOM树和CSSOM树构建、JavaScript执行对渲染的阻塞、回流和重绘。每一步都要能展开不是背个大概流程就完事。还有一道印象深刻的问题如果页面加载很慢你从哪些维度排查我当时从网络请求、资源体积、渲染阻塞、代码执行耗时几个角度答了面试官追问了如何量化每一项指标以及怎么用Performance面板定位具体瓶颈。这道题让我意识到大厂面试官要的不是知道名词而是真的排查过问题、有实操经验的人。2.2 腾讯层层深入挖项目源码理解要到位腾讯的面试风格和头条差异很大更像聊项目式的深挖。基本流程是一面基础项目二面项目源码三面交叉面或总监面四面HR。每一轮面试官都会围绕你简历上的项目一层层往下追问直到问到你答不上来为止。我简历上写了一个基于Vue 2的中后台管理系统面试官从你们项目状态管理用的什么开始一路问到Vuex的mutation为什么必须是同步的computed的缓存原理是什么nextTick的实现机制。这些问题现在看都是基础但当时如果只是会用Vue而不看源码确实容易卡壳。腾讯面试官特别爱问如果让你设计一个xxx你怎么做。比如如果让你设计一个前端错误监控系统你会怎么设计这题我在腾讯二面遇到了。其实考察的就是工程化思维采集什么数据、怎么上报、怎么去重、怎么聚合、怎么报警。我当时的回答虽然不完美但按照数据采集-数据上报-数据分析-告警通知的链路拆解面试官表示认可。腾讯还会考察你对团队协作和code review的理解这在其他公司相对少见。问过如果你发现同事的代码有性能问题你怎么处理你们团队的代码规范怎么落地。这些问题考察的不只是技术还有沟通能力和工程素养。2.3 小米实用主义路线性能优化必考小米的面试给我的感觉是务实不管是技术栈还是考察重点都偏向实际工作中用得上的东西。流程相对简洁两轮技术面加一轮HR面效率高不拖泥带水。小米的面试官明显对性能优化特别敏感这可能跟他们的业务形态有关系电商、商城场景页面性能直接影响转化率。一面有两道题我印象很深一道是首屏加载性能优化你能做哪些事另一道是长列表渲染性能问题你怎么解决。这两道题有个共同点面试官不断的问还有吗逼着你把能想到的都说完然后针对每一项追问具体做法和收益。小米还问了一些偏实用的题目比如Webpack打包优化你做过哪些图片加载优化有什么方案CDN的原理和应用场景。这些问题不刁钻但需要你真正做过才有话说只背面试题的话很容易被追问穿。我记得小米二面面试官问了一个让我意外的问题你平时是怎么学习前端的当时有点懵但后来想想这可能是想了解你的学习方法和自驱力。我如实说了自己会看源码、写技术笔记、做小项目验证想法面试官点点头似乎这样的回答比说我关注了很多公众号要加分。2.4 百度考察广度网络与安全要重视百度的面试流程比较完整一般三轮技术面加一轮HR面。给我的感觉是考察面特别广从HTML语义化到网络安全、从HTTP协议到前端框架原理都有涉及。百度面试里网络知识占比相当高HTTP和HTTPS的区别、TCP三次握手、WebSocket和HTTP的差异、跨域的各种方案这些都被问到了。而且追问很细比如问到JSONP的时候会继续问JSONP能发POST请求吗如果服务端返回异常怎么处理。百度的安全类题目也让我印象深刻XSS攻击的原理和防御、CSRF的原理和防御、内容安全策略CSP怎么配置。这些内容在职工作里可能很少主动关注但大厂面试确实会考因为涉及用户数据安全前端是防线之一。百度的框架题不算深更多是考察你会不会用、懂不懂原理。比如Vue和React的区别虚拟DOM是什么为什么需要虚拟DOMkey的作用是什么。这些题目在当年算高频现在更是前端面试八股文里的常客但那时候能讲清楚的人真不多。3. 核心考点拆解JavaScript基础与手写代码3.1 原型链、闭包和this指向大厂百问不厌这四家面试中几乎每一轮都有JavaScript基础题而原型链、闭包、this指向这三块又是绝对主角。原因很简单这三块能最快考察一个前端开发者的语言基本功靠死记硬背撑不过追问。关于this指向我当时被问到一道经典题目var name global; var obj { name: obj, getName: function() { return function() { return this.name; } } }; console.log(obj.getName()());答案是global因为返回的匿名函数调用时this指向的是全局对象。面试官会继续追问如何修改让结果变成obj这时可以用箭头函数、bind、或者在函数内部保存this等方案。这类题目考察的是对this绑定规则的理解而不是记住答案。闭包的经典考察方式是让写一个计数器或者防抖函数。实现本身不难关键是答出闭包的形成原理函数定义时的词法作用域决定了内部函数可以访问外部函数的变量即使外部函数已经执行完毕内部函数依然持有对变量的引用。原型链的考察通常结合继承实现。让写一个ES5的继承方式解释原型链的查找过程然后追问class的extends和ES5继承有什么区别、instanceof的原理是什么。回答这类题目画图会清晰很多面试时在白板上画出来比干讲效果好很多。3.2 异步编程从回调到Promise再到async/await异步编程是2018年前端面试的另一大重点因为那时候Promise刚普及不久async/await还比较新面试官很喜欢确认你是否真正理解异步的执行机制。最常见的是打印顺序题比如console.log(a); setTimeout(() console.log(b), 0); Promise.resolve().then(() console.log(c)); console.log(d);输出顺序是a、d、c、b原因是微任务优先于宏任务执行。这类题目能区分出你是背了答案还是真懂事件循环的机制。我当时还遇到一个更复杂的变种在里面加了async/await考察对await后面表达式是同步执行还是异步执行的判断。手写Promise是另一个高频题。我记得小米一面让我实现一个简易版Promise要求支持then链式调用。这道题我看着简单实际写起来涉及状态管理、回调队列、resolve的异步执行等细节。写完之后面试官追问了几个用例比如resolve传入另一个Promise的情况怎么处理、then中抛异常怎么传递给后续的then或catch。面试官还喜欢问Promise.all、Promise.race怎么实现以及多个请求并发控制怎么做。最后这个问题在四家面试中出现了两次说明是实际业务中的高频需求。我当时的回答是用一个任务队列限制同时执行的并发数每完成一个就取下一个任务直到队列清空。3.3 手写代码题防抖节流、深拷贝、call/apply/bind手写代码是2018年大厂前端面试的标配环节尤其是头条和腾讯几乎必考。我总结下来的高频题目集中在防抖节流、深拷贝、call/apply/bind、数组去重、Promise、柯里化这几类。防抖和节流在项目里太常用了我建议每个前端都把这两个手写版本吃透。防抖的核心思路是每次触发时清空之前的定时器重新计时节流的核心思路是一段时间内只执行一次。当时头条面试官让我写防抖时我还补充了立即执行版和取消能力明显能看到面试官眼神里的认可。深拷贝也是高频题。需要注意的点包括判断类型、处理数组、处理循环引用、处理特殊对象。基础版本很多人写得出来但循环引用能处理好的就少很多。我当时用WeakMap缓存已拷贝的对象来解决循环引用面试官追问了为什么用WeakMap而不是Map我答了WeakMap的key是弱引用可以避免内存泄漏。call/apply/bind的模拟实现是考察this指向的延伸。实现call的核心思路是把函数挂到目标对象的属性上然后调用最后删除属性。bind的实现还要注意new操作符的情况这属于进阶点说出来会比较加分。深拷贝和bind这类题我的建议是不要只背答案而是理解其中的设计思路。面试官问一道题很多时候不是要一个标准答案而是想看你的思考过程和代码组织能力。4. 框架源码与工程化从会用到懂原理4.1 Vue 2响应式原理几乎每家必问在2018年Vue 2如日中天面试官喜欢问响应式原理几乎成了标配。腾讯和百度都问到了Vue的双向绑定是怎么实现的头条虽然没有直接问但在项目深挖环节也绕不开。回答这个问题核心要抓住三块Observer数据劫持、Dep依赖收集、Watcher派发更新。我当时是这样回答的Vue 2的响应式原理主要基于Object.defineProperty在数据初始化时遍历对象的每个属性用defineProperty重写getter和setter。getter中会进行依赖收集把当前Watcher记录到Dep中setter中会触发通知让Dep通知所有Watcher去更新视图。组件渲染时创建的Watcher就是依赖收集的触发者数据变化后通过这个链路更新视图。面试官一定会追问几个问题比如数组的响应式是怎么处理的直接通过索引修改数组元素能不能触发更新对象新增属性能不能触发更新。这几个点能答透基本就证明你确实读过源码而不是只看过分析文章。我当时还遇到一个进阶问题Vue 2对Object.defineProperty的性能开销你怎么看有什么优化手段答案可以包括组件级别的更新粒度控制、Vue.set的补充、以及只在需要响应式的数据上使用等。这个问题放到今天Vue 3用Proxy实现响应式的对比也是很好的回答方向。4.2 虚拟DOM与diff算法从概念到实现细节虚拟DOM和diff算法的考察频率也很高百度二面和腾讯一面都涉及到了。很多人的回答停留在虚拟DOM是用JavaScript对象描述DOM结构操作虚拟DOM比直接操作真实DOM性能更好这个层面但面试官要的是更深入的理解。至少要讲清楚这几层为什么需要虚拟DOM跨平台能力、批量更新、提升开发体验、vnode的核心结构tag、data、children、text、elm、key、diff算法的核心逻辑同层比较、key复用、patchVnode的更新策略。如果能说出双端比较或者至少知道首尾指针优化的存在会明显加分。当时我在腾讯被问到追问如果兄弟节点列表顺序变化没有key会怎么样有key又会怎么样这道题考察的是对diff复用逻辑的理解。没有key时直接按顺序比较对应的旧节点和新节点有key时会根据key来复用相同key的节点。后者可以保留组件的状态避免不必要的重建但也可能因为key选取不当比如用index导致状态错乱。现在Vue 3和React 18的diff算法都有演进但底层的核心思想没有变。把2018年的diff原理吃透看现在的实现依然是一通百通。4.3 Webpack打包优化面试里的工程化担当2018年正是Webpack 4刚发布的节点面试官对打包优化的兴趣很高。小米几乎必问头条和百度也各问了一轮。我当时能答的点包括按需加载路由懒加载和import()动态导入、代码分割SplitChunksPluginWebpack 4里取代了CommonsChunkPlugin、压缩代码UglifyJS/TerserPlugin、Tree ShakingES Module静态分析的前提、dllPlugin打包公共依赖、happyPack多进程构建、图片压缩等。但面试官不会只停在我知道有这些手段而是会追一个问题你现在有一个项目首屏加载很慢你怎么定位是Webpack配置的问题还是业务代码的问题这时候就需要说排查思路先看构建产物分析报告webpack-bundle-analyzer看看各个包的体积占比再结合Performance面板看网络加载耗时然后针对性去优化大头资源。我还被问过Tree Shaking的前提条件是什么这个问题考察的是对ES Module和CommonJS差异的理解。Tree Shaking依赖ES Module的静态结构import和export必须在顶层、不能动态加载这样Webpack才能分析出哪些导出没有被使用从而摇掉。如果项目里有CommonJS模块Tree Shaking就会失效。5. 网络、浏览器与前端安全容易被忽视的加分项5.1 HTTP缓存面试官百问不厌的基础题HTTP缓存题几乎出现在所有四家的面试里形式也大同小异比如浏览器缓存有哪些策略强缓存和协商缓存有什么区别怎么设置缓存。这题看似简单但能讲清楚的候选人不多。完整回答的思路应该是先区分强缓存和协商缓存强缓存指的是不发请求直接用本地缓存对应的响应头是Cache-Control现代和Expires老方案协商缓存需要向服务器验证资源是否有效对应的响应头是Last-Modified/If-Modified-Since和ETag/If-None-Match。然后补充变化过程为什么从Expires演进到Cache-Control因为Expires依赖客户端时间和服务器时间一致不可靠为什么从Last-Modified演进到ETag因为Last-Modified的最低精度是秒级并且有些资源在很短时间内被修改但内容没变。我当时在百度被追问如果我不想让浏览器缓存某个HTML页面但想缓存其中的静态资源怎么配置这个问题的答案是给HTML设置Cache-Control: no-cache给静态资源设置Cache-Control: max-age31536000并且文件名带hash值。这样HTML每次请求都会回源验证里面的静态资源因为有hash在文件名里内容一变文件名就变可以放心缓存一年。5.2 跨域问题不只是JSONP和CORS跨域是2018年前端面试里躲不开的大题因为那时候前后端分离正在全面铺开跨域问题几乎天天遇到。面试官会问什么是跨域有哪些跨域方案CORS的简单请求和预检请求有什么区别。我总结了回答跨域问题的框架先说清楚同源策略的含义协议、域名、端口三者一致才算同源然后说常见方案JSONP原理是script标签不受同源限制缺点是只支持GET、CORS通过服务端返回CORS相关响应头来控制、反向代理开发环境下用Webpack devServer的proxy线上用Nginx、postMessage适用于iframe和窗口通信、WebSocket不受同源限制。面试官大概率会追问CORS的细节比如 非简单请求会先发OPTIONS预检请求什么是简单请求的条件。我当时在腾讯面试时面试官问如果服务端没有配置CORS前端有没有办法解决跨域这个问题考察的是对跨域本质的理解——跨域是浏览器层面的限制非浏览器环境不存在跨域问题所以前端能做的只有通过代理或者JSONP这类手段无法从纯前端彻底解决。5.3 浏览器渲染机制与前端安全浏览器渲染机制是另一大类高频题。从输入URL到页面展示这个问题的完整回答包含DNS解析、建立TCP连接、发送HTTP请求、服务器响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、两者结合构建渲染树、布局、绘制。中间还要穿插JavaScript的解析和执行时机以及由此引发的回流和重绘问题。安全类题目在百度尤其多XSS和CSRF是两大主角。XSS的关键是永不信任用户的输入防御手段包括对输出进行编码转义、使用CSP限制资源加载、对cookie设置HttpOnly。CSRF的关键是验证请求是不是用户主动发出的防御手段包括校验Referer、使用CSRF Token、使用SameSite Cookie属性。这些安全知识在日常开发中容易被忽略但面试官看重的是你有没有安全意识。我当时能答上来是因为刚好在公司做了一个后台权限系统的前端改造涉及了这些知识点。建议大家平时多留意不要等到面试前突击。6. 面试中的算法题大厂的门槛与套路6.1 2018年大厂前端算法题的考察范围关于算法很多前端开发者有畏难情绪尤其是非科班出身的人听到算法题就紧张。但2018年的大厂前端算法题并没有想象中那么可怕考察范围其实比较集中。我总结下来高频的算法类型包括数组和字符串操作去重、排序、查找、反转、链表基础操作反转链表、合并有序链表、二叉树基础遍历前中后序、层序、基础动态规划爬楼梯、斐波那契、背包问题、贪心和双指针。前端岗位的算法题难度通常低于后端岗位重点不在于考多难的算法而在于考察基本的逻辑思维和代码实现能力。头条是四家里算法题占比最高的几乎每轮都有占比接近一半。腾讯和百度更多是把算法作为综合考察的一部分小米相对少一些。我的建议是面试前至少要刷完LeetCode的前100道热门题尤其是简单和中等的题目做到看到题目能快速确定思路并写对。6.2 现场coding的加分技巧算法题想拿高分不只是写对代码就行面试官还会看你的解题过程。我总结了几条现场coding的加分技巧第一先沟通思路再动手。不要拿到题就闷头写先和面试官确认题目里的边界条件、输入范围、输出格式然后把你的思路说出来比如我用哈希表来记录元素出现位置这样可以把时间复杂度降到O(n)。这会让面试官看到你会分析问题而不是背模板。第二写代码时注意细节。好的命名、处理边界条件、考虑空数组或极端值都会给人留下好印象。我自己在头条面试时写数组去重主动处理了非数字元素和null的情况面试官明显比较认可。第三写完代码主动测试。用一两个用例在脑内过一遍或者直接在白板上演示运行过程。这一步很加分因为它模拟了真实工作中的验证环节。第四如果卡住了大胆要提示。面试官不是考官更像合作者你主动请求提示比自己干耗着要好。我朋友面试时就因为问了一句这里是不是可以用双指针优化面试官反而给了积极反馈。6.3 我遇到的三道经典算法题及解题思路挑三道比较有代表性的题目分享这三道题在今天就依然是高频题换个姿势还会出现在2026年的前端面试题库里。第一道是两数之和。题目给定一个数组和一个目标值找出数组中两个数之和等于目标值的下标。最优解是用哈希表遍历一遍数组每次检查target减去当前值的差是否在哈希表中时间复杂度O(n)。第二道是反转链表。题目反转一个单链表。核心思路是维护三个指针prev、current、next依次反转每个节点的指向。还有个递归写法但现场coding建议用迭代更直观、不容易写错。第三道是最长不重复子串。题目给定一个字符串找出最长的不含重复字符的子串长度。经典解法是滑动窗口用哈希集合维护窗口内不重复的字符右指针不断右移遇到重复字符时左指针移动。这道题写起来很简单但思路不好想到建议提前练熟。7. 项目深挖与简历准备你的项目经历就是面试题的题库7.1 项目描述的STAR法则与大厂追问逻辑大厂的面试官几乎不问你你做过什么而是拿着你简历上的项目像剥洋葱一样一层层往下剥。我当时的最大感受是简历上写的每一句话都可能成为面试题所以项目经历一定要经过精心打磨确保每一个点都经得起追问。项目描述建议用STAR法则组织背景Situation、任务Task、行动Action、结果Result。重点放在行动和结果上而且结果最好能量化比如将首屏加载时间从3s降低到1.5s性能提升50%这比优化了首屏加载速度要有说服力得多。面试官会针对项目里的每个技术点问为什么比如为什么选择Vue而不是React为什么用Webpack而不是Rollup这个方案有什么优缺点如果数据量变大你的方案还成立吗。这些问题本质上是在考察你是否做了技术选型的思考和权衡而不是只会照着教程敲代码。7.2 我用项目经历回答前端性能优化的完整思路我在多个面试中都被问到性能优化正好能拿项目经历来回答。我当时的项目是一个报表后台系统存在首屏加载慢的问题我做了一系列优化这些优化成了面试中的一段完整素材。我当时是这么梳理的先通过webpack-bundle-analyzer看打包体积发现最大的几个包是ECharts、Moment.js和Vue全家桶然后做了按需引入ECharts按模块注册、Moment.js用day.js替换、路由懒加载每个路由页面单独打包、第三方库提取SplitChunks、图片压缩和CDN加速。这个组合操作下来首屏体积大约下降了60%打开时间从三秒多降到了一秒多。面试官听完之后的追问一般集中在细节上比如day.js替换Moment.js有没有踩过坑路由懒加载会不会因为需要动态加载导致白屏CDN挂了你怎么办。这些问题都指向一个核心——你是不是真的做过还是只是听说过方案。真正做过的人能答出细节和坑点这是装不出来的。7.3 大厂前端简历的避坑清单简历是面试的敲门砖2018年我在改简历上花了不少时间总结了几个避坑点和加分点。避坑点非常明确不要罗列技术名词而不写场景比如熟练掌握Vue、React、Webpack、Node.js这种描述面试官根本不知道你掌握到什么程度只能通过问题来验证反而容易暴露短板不要写无关的个人信息和工作经历不要出现错别字和格式混乱这是最基本的职业素养不要把公司项目写成个人开源项目面试官追问一下就会穿帮。加分点则可以这样操作每个项目都写清楚技术难点和你的解决思路有开源项目或技术博客加分尤其是持续维护的描述里体现出结果导向尽量量化成果在技能栏里标注了解和熟练的区别让面试官的提问有针对性。8. 常见问题与避坑实录面完四家后的血泪总结8.1 技术之外的冷门考察点面试不只是考技术我面完四家后发现面试官还会在不经意间考察你的软素质和性格适配度。如果你只准备技术题这些问题可能会让你措手不及。比如小米面的你怎么学习前端百度的遇到困难怎么解决腾讯的你怎么和产品经理沟通不合理需求。这些问题看似闲聊但实际上在考察你的学习方法、解决问题的心态和团队协作能力。我当时的一些经验是聊学习方法时最好能体现输入-实践-输出的闭环比如看书看源码是输入、做小项目验证是实践、写博客或做分享是输出聊困难解决时具体说一个真实的案例包含你面对困难时的分析过程、选的方案、以及结果和反思聊沟通冲突时突出从目标出发和给对方退路的思路而不是对抗情绪。8.2 时间分配与面试节奏管理四家公司的面试穿插在同一个时间段节奏其实很考验人。我当时犯过一个错误在头条二面和腾讯二面中间只隔了一天没有时间充分复盘导致腾讯二面表现不佳。后来我调整了策略把面试进度拉开每面完一家就花半天时间复盘把面试中卡壳的问题重新梳理一遍。时间分配的优先级是算法题需要长期积累每天固定刷两三道框架原理需要系统梳理按Vue/React、浏览器、工程化、网络与安全的模块依次过项目经历需要反复打磨每次面试后根据面试官的追问补充项目盲区。临场还有几个小技巧提前调试好在线coding环境不要面试时才发现输入法弹不出来准备一张纸和笔方便演算面试前半小时不再看新内容简单过一遍自己的项目总结就够了临时抱佛脚最容易打乱状态。8.3 复盘方法把每次面试变成一次学习面完一家之后我建议立刻做一次全面复盘不要等到所有面试结束再总结。我的复盘方法分为三步拉出面试中的所有问题清单标注哪些答得好、哪些答得一般、哪些完全卡住了针对卡住的问题逐个查资料搞清楚原理最后把这些题汇总到自己的面试题库里为下一家面试做准备。这个方法也推荐给大家用表格记录每道题的考察点、你的回答要点、面试官的追问方向、以及你复盘后的标准答案。这样持续积累面试水平是真的能一次比一次高。我面完四家后最大的感受是面经可以给你方向但给不了你底气。真正的底气来自平时的工作积累、项目中的思考、以及系统的复盘总结。9. 写在最后的一点个人经验四家公司面下来我最终拿到了两个offer也收到两份拒信。拒我的公司并不是因为我技术不行更多是综合匹配度的问题。我想说的是面试是一个双向选择的过程不合适的拒绝长远看反而是好事。现在回想2018年很多题目已经过时了比如Webpack 3的配置细节、Vue 2的响应式原理现在都演进到了Vite和Vue 3。但面试考察的核心能力——逻辑思维、技术深度、项目思考、沟通表达——几乎没有变化。最后分享一个实用的小习惯从我开始准备面试起我每周会花两小时整理本周遇到的技术问题和解决方案写进自己的云笔记。这个习惯坚持至今每次跳槽前翻看这些笔记都比临时刷题有效得多。如果你也在准备面试建议从现在就开始积累面经是别人的题库才是你自己的。