那年8月底我在牛客网刷完最后一套模拟题正式把简历投向了三十多家公司。整个秋招持续了将近两个月从第一批笔试时的紧张到后面一面、二面、终面连环被问到怀疑人生再到最后手里攥着几个offer做选择这个过程值得记录的东西比想象中多得多。这篇不是标准的前端面试八股文汇总而是把2018年秋季校招真正问过的题、踩过的坑、以及当时没想明白后来才醒悟的点按面试流程完整复盘一遍。如果你正打算参加前端校招或者刚入行想了解大厂前端的考察逻辑这篇内容应该能帮你少走不少弯路。1. 秋招启动前当年我对前端校招的三个误判1.1 误判一以为重点在框架实际重点是语言基础和算法我一开始的备战策略非常朴素把Vue和React的文档翻了一遍又写了一个仿饿了吗的商城项目觉得自己稳了。结果第一次在线笔试就给我上了一课——50道选择题里真正的框架题不超过8道剩下全是JavaScript语言特性、网络协议、数据结构、浏览器原理和CSS布局。编程题更是直接甩了两道LeetCode中等难度的算法题一道字符串处理、一道二叉树遍历我当场就卡住了。2018年的前端校招和很多人想象的完全不一样。框架使用能力是门槛但真正决定能不能进面试的是语言基础和算法功底。市面上所有大厂的笔试考察范围加权排序下来大概是这样的考察板块题目占比我的实际准备程度翻车程度JavaScript语言特性作用域、闭包、this、异步30%半桶水严重算法与数据结构数组、字符串、链表、二叉树25%几乎裸考严重CSS与布局盒模型、Flex、Grid、布局手写10%基本靠猜中等网络与浏览器HTTP、缓存、渲染原理20%背了但不懂中等框架与工具链Vue、React、Webpack15%很熟没翻车换句话说你在简历上写“熟练使用Vue”只能保证选择题里遇到“computed和watch区别”时不丢分真正拉开差距的是那些看起来和框架毫无关系的底层知识。这个认知我在笔试阶段吃了大亏才建立起来所以如果你现在刚开始备战校招第一优先级永远是JS语言功底和算法。1.2 误判二以为面试是问答实际是一场白板编码加场景设计我在准备面试的时候背了一堆概念定义。比如“什么是事件委托”“什么是闭包”张口就能来。但面试真正开始后我发现大多数问题的问法根本不是让你背定义而是给你一个场景让你写代码或者说出设计思路。举个例子一面面试官问“闭包”不是让我说定义而是直接在白板上写了一段代码问我输出什么然后让我改成“每次点击按钮都输出正确的索引”。从“知道什么是闭包”到“能正确用闭包解决事件绑定的问题”中间隔着一道巨大的鸿沟。这个鸿沟只能靠大量的手写练习来填背概念完全没用。后来的面经复盘说明2018年秋招前端一面几乎所有公司都会安排至少两道白板手写题而且难度普遍在“不看书能默写出来”的水平线上。防抖节流、深拷贝、数组去重、Promise.all、实现bind、new、instanceof这些几乎成了默认题库。如果你到了面试现场才发现自己默写不出深拷贝那场面会非常尴尬——我当时就亲身经历过一次头皮发麻地盯着白板憋了十分钟。1.3 误判三以为做过项目就扛得住深挖实际上处处是盲区简历上那个商城项目我以为特别能打什么Vue全家桶、axios封装、路由懒加载写得满满当当。结果二面时面试官只问了三连你的登录态是怎么管理的token过期了怎么办如果用户快速点击两次登录按钮会发几个请求我当场就愣住了。那种感觉就像你自认为很了解自己盖的房子但别人问你地基打了多深、承重墙具体在哪几面你才发现自己只在二楼铺了地板砖。这个误判背后的真相是校招面试的项目考察根本不看你功能有多全、界面有多炫只看两件事——第一这个项目的技术难点到底是什么你作为开发者是否真的理解第二你做的每一个技术选型背后有没有自己的思考。用一句话概括就是简历上没有一个字是白写的你写了什么就要准备好被问穿什么。项目可以小但一定得是你自己从零到一解决过真实问题的项目。2. 笔试关在线笔试到底在筛什么2.1 客观题的结构和覆盖范围2018年秋招的在线笔试大部分公司用的是牛客网、赛码网或者公司自研的笔试系统。题型基本固定单选多选加编程题时长一般90到120分钟。客观题看起来是选择题但很多都是“不给环境、必须手算”的题考察的是对知识点的精确记忆和理解。选择题里面我最怕的是两类。一类是输出题给一段代码问你运行结果。比如那种又是var又是let、又套了定时器和闭包的组合题考察的是作用域、变量提升、事件循环这些基础是否真的牢。另一类是“以下关于XXX说法正确的是”的多选题选项里永远混着一两个看起来很有道理的错误结论全靠你平时有没有踩过对应坑来判断。客观题里CSS的比重虽然不高但一旦考到Flex布局的flex-grow、flex-shrink、flex-basis的换算关系很多人会直接放弃。我建议备战的时候重点把这几块啃透事件循环、作用域链与闭包、原型链与继承、HTTP状态码与缓存策略、盒模型与BFC、浏览器渲染过程以及ES6的箭头函数、解构、Promise的细节。2.2 编程题的高频题型和应对策略编程题是笔试的大头一般两到三题难度从LeetCode简单到中等不等。我统计了一下自己经历的七场笔试发现题型高度集中在几类字符串处理最长回文子串、字符串翻转、字符统计、数组操作两数之和、数组去重、最大子序和、链表反转链表、合并两个有序链表以及二叉树层序遍历、最大深度、最近公共祖先。那时候面试笔试基本就是剑指Offer加LeetCode热题Hot 100的天下。备战策略上我最推荐的顺序是先把剑指Offer的题全部过两遍再刷LeetCode的简单和中等题重点刷数组、字符串、链表、二叉树、动态规划这几个主题。第一遍不需要追求AC率能理解思路、写出题解就够第二遍再按专题刷把每种题型的最优解法形成肌肉记忆。另外特别提醒新手在线笔试的输入输出格式非常坑人。有的题目需要自己处理多行输入有的需要写完整函数有的只让你填核心代码段。我第一次笔试就是挂在输入解析上明明算法思路对但字符串没处理好白白丢了一道全分。2.3 笔试丢分的真实教训我最想分享的笔试教训有三条。第一条不要在第一道题上卡太久。在线笔试的时间是总额固定的两小时三道题如果你在第一题上耗了五十分钟后面的大题基本就没时间做了。我的策略是先花五分钟把所有题都看一遍按难度排序先做有把握的再回头啃硬骨头。第二条注意边界条件。很多题目看着简单但诸如空数组、长度为1的数组、重复元素、超长字符串这类边界情况往往决定了你是否能拿到全部测试用例的分。哪怕你的主体逻辑完全正确边界没处理就是过不了所有用例。第三条给自己留十五分钟的检查时间。笔试系统对编译错误、超时、内存溢出都有记录提交前哪怕不能重新跑一遍也要盯着代码检查一遍变量名有没有拼错、循环边界有没有写对。3. 一面实录JS手写、网络与浏览器原理3.1 手写代码题这几题是当年最高频的一面之前我在牛客网搜了很多面经发现面试官特别偏爱那几道经典手写题。我把历年面经里出现频率最高的题做了个整理放在一起对比非常直观手写题目核心考察点我当时的丢分点正确答法要点深拷贝递归、引用类型判断、循环引用忘了处理数组和循环引用先判断基础类型再用WeakMap记录拷贝过的对象防止循环引用防抖与节流this指向、闭包、apply思路对但边界没处理注意最后一次调用的延迟执行以及取消机制数组去重Set、对象属性、排序只写了Set一行版本没有去重后保持顺序的讨论至少给出Set、filter加indexOf、哈希表三种方案实现bindcall/apply、柯里化、new忘了支持new调用用call/apply绑定this返回的函数要兼容new操作符数组扁平化递归、reduce、concat不知道能用Infinity至少给出递归版和reduce版再考虑深层次嵌套Promise.allPromise原理、并发、错误处理只写了循环push忘了reject返回新的Promise统计完成数量任何一个reject就整体reject发布订阅模式事件映射、on/emit/off忘了off用对象存事件回调数组实现on、emit、off三个方法每道题都值得花时间抠透因为面试官在你写完代码后一定会追加问一句“这个实现有没有什么问题能不能优化”我当时写深拷贝只处理了普通对象和数组被追问“如果对象里有Date、RegExp怎么办”时直接卡壳。正确的做法是提前准备一套完整的深拷贝方案哪怕不上代码也要能把思路讲清楚。综合下来我的经验是手写题一定要练到默写级熟练并且主动在代码里体现对边界情况的处理。我观察到面试官看到你额外处理了循环引用时眼睛里是真的会放光的。3.2 输入URL到页面展示一面必背但很多人背错了“从输入URL到页面展示中间发生了什么”这道题2018年秋招几乎每个公司一面都会问区别只在于深度。我最早背的是一个简化版答案DNS解析、TCP连接、发送HTTP请求、服务器返回HTML、浏览器解析渲染。但面试官显然不满足于这个版本他可以直接在任意一个环节往下追问三层。我当时被追到一个细节DNS解析到底是从哪个缓存开始查的正确的顺序是浏览器缓存、系统缓存、路由器缓存、ISP缓存、根域名服务器、顶级域名服务器、权威域名服务器。还有被追问到的点包括TCP三次握手为什么是三次不是两次HTTP请求行和头部有哪些字段Cookie和Token分别放在哪里强缓存和协商缓存的区别是什么CDN回源又是怎么回事这些子问题任何一个答不上来都会让这道题的完整度大打折扣。我的建议是把整个流程拆成三个阶段来记忆网络请求阶段DNS、TCP、TLS、HTTP请求与响应、浏览器解析阶段HTML解析成DOM树、CSS解析成CSSOM树、构建渲染树、页面渲染阶段布局、绘制、合成。每个阶段都有至少两个高频子问题。比如渲染阶段一定会问“重排和重绘的区别”“什么属性会导致重排”“如何避免强制同步布局”。把这套链路彻底搞懂比你零散背二十个知识点有用得多。3.3 跨域问题连续三家公司都问了的点跨域是我2018年秋招面试中遇到的一个幽灵级题目。粗略统计至少有四家公司一面问到了跨域其中两家追问到了实现细节。核心问法是什么是同源策略前后端分离开发中遇到跨域怎么解决简历上写了登录模块那跨域携带Cookie怎么处理这个问题的关键不在于背出几种跨域方案的名字而在于能说出每种方案的原理和适用场景。JSONP的原理是利用script标签不受同源策略限制通过回调函数拿到数据但它只支持GET请求而且需要后端配合。CORS是正统的解决方案关键是理解预检请求和Access-Control-Allow-*几个响应头字段的作用。开发环境下最推荐的是devServer代理它实际上是利用了“服务器之间的请求没有同源策略限制”这个特性。还有postMessage可以用于iframe之间的跨源通信document.domain只能解决同主域下的跨子域问题。我被追问得最细的一个问题是“CORS的简单请求和预检请求是怎么区分的”正确答法是看两个条件请求方法是否属于GET、HEAD、POST之一以及请求头是否只包含CORS安全头字段Accept、Accept-Language、Content-Language、Content-Type的某些值。只要任一条件不满足浏览器就会先发一个OPTIONS预检请求。2018年有一个比较流行的选择是前端用Nginx反代来处理跨域我建议面试时把开发代理、生产Nginx反代、CORS这三种方式放在一起讲并且说清楚各自的适用场景和优缺点这种对比型回答通常能给面试官留下不错的印象。4. 二面实录项目深挖与框架原理4.1 项目讲述的STAR式结构不要再报流水账二面的开场几乎永远是“介绍一下你简历里这个项目”。很多人的第一反应是把自己的功能列表背一遍“我这个项目用了Vue全家桶有登录、注册、列表、购物车做了响应式。”这种回答最大的问题是面试官听完脑子里只有功能清单完全判断不出你到底做了什么有技术含量的工作。我后来总结了一套项目讲述结构效果好了很多。先把项目一句话定位清楚比如“这是一个面向C端用户的电商类小程序我负责前端整体架构和核心交易流程”。然后是背景和规模比如“项目周期三个月三个人协作我负责X模块”。接下来是最关键的部分把自己承担的2到3个技术难点讲清楚。我讲的是倒计时组件在页面切后台时的计时偏差问题以及大表单在弱网环境下的提交体验优化。每个难点都要遵循“遇到什么问题、为什么会出现、我尝试了哪些方案、最终怎么解决、效果如何”的叙述逻辑。最后再简单说一下项目的最终成果比如上线后首屏加载时间从3秒降到1.2秒。这样讲下来面试官基本不会再打断你问“那你具体做了啥”而是会顺着你讲的难点继续深挖。4.2 Vue/React框架原理二面拉开差距的分水岭2018年秋招的框架题考察风格已经明显从“会不会用”转向了“懂不懂原理”。Vue这边最高频的问题是Vue响应式原理。当被问到这个问题时我会先去画一个链路组件的数据通过Observer变成getter和setterWatcher在渲染时被收集进Dep数据变化时setter触发Dep.notifyWatcher收到通知后重新渲染。面试官通常会紧接着追问Object.defineProperty有哪些局限性答案是它无法监听属性的新增和删除所以Vue才提供了Vue.set和Vue.delete这两个方法以及数组的push、pop这类方法也无法被拦截Vue通过重写这些数组方法来实现响应式。React这边被问到最多的是setState到底是同步还是异步。正确的理解是在React合成事件和生命周期函数里setState是异步批处理的在原生事件和setTimeout里setState是同步的。我在面试时把这个点讲清楚之后对面面试官明显更愿意继续聊。框架题还有一个高频方向是虚拟DOM和diff算法。Vue问的是“key的作用是什么”React问的是“Fiber是什么”。关于key核心是diff算法复用节点时用key来标识节点身份避免整个列表被重新渲染。关于Fiber2018年属于比较新的概念能说清楚它是一种把渲染任务拆分成可中断的单元、并在空闲时间调度执行的架构就够了。我的心得体会是框架原理题不要死记硬背最好跟自己的使用经历结合起来讲。比如我在项目里遇到列表渲染卡顿排查后发现是key乱用导致的这个经历比干巴巴聊diff算法生动十倍。4.3 场景设计题大文件上传、首屏优化这类问题怎么答二面的后半段面试官经常抛出一个开放性的场景设计题这类题拼的不是实现代码而是你能否拆解问题、提出合理方案。2018年最典型的几个场景设计题我整理了一下如果你的项目需要支持用户上传1GB的视频文件前后端怎么设计首屏加载太慢你会怎么排查和优化一个后台管理系统不同角色看到的菜单不一样怎么做权限控制大文件上传是我被问到最多的一道题因为它的技术点非常密集。我的回答基础版是分片上传加断点续传。前端用File对象的slice方法把大文件切成若干小块每个分片独立上传后端记录上传进度所有分片传完后触发合并接口。如果某个分片失败只需重传失败的那个分片这就是断点续传的核心思路。追问的部分通常包括怎么控制并发数答案是维护一个并发队列同时最多允许N个请求在飞。怎么计算进度答案是已成功分片数除以总分片数。要不要用Web Worker分片计算和哈希计算用于秒传判断如果导致主线程卡顿可以把这些计算放到Worker线程里。2018年我在回答时虽然没完全展开Worker方案但提到了“大文件上传的计算不该阻塞UI线程”面试官都表示认可。首屏优化这道题的常规答法是从网络链路和渲染链路两头排查。网络侧开启HTTP压缩、配置缓存、用CDN、做资源合并与图片懒加载。渲染侧减少DOM节点数量、避免同步加载阻塞脚本、把首屏需要的CSS内联、用骨架屏或loading态优化感知性能。权限控制场景题则要从路由守卫、动态渲染菜单、按钮级权限三层来回答。这些场景题没有标准答案但有一个共同的套路先确定边界和前提再分层设计方案最后补充容错和异常处理。5. 终面与HR面不写代码却照样刷人的环节5.1 业务终面的考察点技术选型与学习深度终面一般在二面之后面试官通常是部门leader或者技术总监。到了这一轮手写代码的机会变少了但并不意味着变简单了。这类面试官问的问题往往更发散“你怎么评价Vue和React”“如果让你们团队从零搭建一个中后台前端项目你会怎么选型”“你怎么看前端这几年不断变化的框架生态”这些问题的共同点是考察技术视野和思考深度。比如选型问题正确的答法不是“我更喜欢Vue”就结束了而是要给出选型的判断维度团队熟悉度、社区生态、类型系统支持、构建工具链、长期维护风险然后结合一个具体场景得出倾向性结论。我在终面时就被问过一个让我当时懵了下的问题“如果你的项目一年后需要拆成多个子应用分别由不同团队维护你会怎么设计现在的架构”这其实是在考微前端和工程化拆分思路。我当时并没有真正实践过微前端但凭着对single-spa概念的了解回答了按业务域拆分子应用、用基座管理应用注册与加载、各子应用独立开发和部署等思路。面试官没有追问具体实现但点了点头说明“有概念且能合理推演”在终面也是有效的。5.2 软素质问题怎么答才不像背稿终面和HR面都会问一些非技术问题比如“你最大的缺点是什么”“你遇到过最大的困难是什么”“你未来的职业规划是什么”。这些问题看着简单但对校招生来说特别容易翻车。我的建议是所有软素质问题尽量用真实经历来回答不要抽象地表达“我吃苦耐劳”“我学习能力强”。比如被问到“最大的困难”我讲了在校项目里和另外一个同学在后端还没准备好接口时前端如何用mock数据先行开发以及联调时如何定义契约规范的过程。这种回答既展示协作能力、责任心又展示了问题拆解能力比空洞的自我评价有说服力得多。问到职业规划我的答法是“未来三年内先在前端深挖一两个领域比如可视化或工程化成为团队内这块业务的负责人同时补齐后端基础目标是成为能打通前后端的全栈工程师。”这个回答既稳妥又有野心不容易被挑刺。5.3 HR面会问什么为什么有人挂在HR面HR面看起来像聊天但确实存在刷人的情况。2018年秋招身边就有同学技术面全过最后挂在HR面的案例而且不止一个。HR面通常关注四件事你的稳定性会不会入职没多久就跑、你的沟通协作能力、你的薪酬预期是否在预算内、以及你的求职动机是否真实。高频问题和应对思路包括为什么选择我们公司回答时要把公司的业务方向和你自身的技术兴趣结合不要说“因为你们给的钱多”。你家是某地的为什么考虑来这座城市工作这个问题考察的是稳定性和长期打算你要给出有说服力的理由比如亲人所在、职业发展机会、城市生活节奏等。你还投了哪些公司目前进展怎么样这个问题回答的要义是“有offer但不exclusive”既要表现自己受欢迎又要让对方觉得你有诚意。我当时被问到“如果A公司和B公司同时给你offer你怎么选”我的答法是“我选君会更看重团队的技术氛围和业务天花板两家都有各自的优势我会结合手上所有信息综合判断但贵司在深入了解下来是我优先级比较高的选择”。虽然有点圆滑但至少没有掉进“过分捧一家、贬低另一家”的坑。6. 复盘校招面经中最值钱的部分其实是“信息差”6.1 投递简历的时间策略与渠道整个秋招走完我发现拿到的面试机会数量不完全取决于实力很大程度取决于投递策略。2018年互联网校招的节奏大概是7月提前批、8月正式批启动、9月集中笔试面试、10月补录和三方谈判。提前批非常重要因为很多公司的提前批免笔试或笔试门槛较低而且面试流程更短。我当时因为觉得“还没准备好”而错过了好几家的提前批回想起来是最大的战略失误。投递渠道的优先级我的排序是内推大于官网网申大于招聘平台海投。内推最大的价值不是一定能免筛选而是你的简历至少会被人力资源看到而不是躺在简历池里吃灰。我当时通过学长内推了四家公司有三家都给了面试机会而官网网申的命中率明显更低。如果你身边没有学长学姐在职也可以试试在技术社区主动联系一些公司的在职工程师表达准备充分、技术方向匹配的想法多数人都是愿意帮忙的。另外不要只盯着头部大厂很多垂直领域的独角兽公司技术氛围同样很好竞争压力相对小拿offer的概率会高不少。6.2 面试记录的做法与好处我在秋招期间建立了一个面试记录表每一轮面试结束之后马上回忆并记录三部分内容被问到的题目列表、我的回答要点、面试后复盘发现的不足。这个表用起来效果特别好尤其是面了五六家公司以后你会发现面试官们的关注点高度重叠。把相似的问题归并把不会的题目标红就能形成一个非常精确的“个人高频盲区清单”然后针对性补强。举一个具体例子。我前三场面完都记下了“手写防抖没有写对”于是我在后续准备中花了两个晚上专门把防抖节流的各种变体练透包括立即执行版、取消、返回值等。等到第四场面试再遇到类似问题时我已经能从原理讲到边界不仅不再丢分还成了加分项。面试记录还有一个隐藏作用它能在你同时面好几家公司时帮你分清每个岗位的差异。不然面到最后你连哪家问了什么都记混了。6.3 给后来者的几条实操建议第一提前三个月开始刷算法不要等到拿到笔试通知再突击。算法的肌肉记忆需要时间尤其是二叉树和动态规划临时抱佛脚基本来不及。第二准备至少两个自己完全吃透的项目每个项目都能讲出三个以上的技术难点和方案选型的理由。不要造假因为面试官连续追问三个问题就能识破。第三提前准备一套自我介绍时长控制在一分钟左右内容要突出项目经历和技术方向不要背简历。第四每周至少做一次模拟面试找同学互相提问或者自己录音回听。关于实习如果你还在大二或者研一请务必争取一段前端实习经历。2018年秋招中有实习经历的同学在项目深挖环节明显更占优势因为他们接触过真实的生产环境、线上问题和技术评审这些在校招面试中都是极好的素材。如果是现在才开始准备也不用慌把算法和基础砸实把简历上的每个字都变成能讲述三分钟的深度内容就足以跑赢相当一部分人了。最后再分享一个当时没能做到、现在回头看最想补上的一件事面试过程中要保持“复盘后立即行动”的节奏不要复盘完就扔到一边。前面提到那张面试记录表最理想的使用方式是每周末花两个小时把当周所有面试题重新想一遍而不是记完就放在那里吃灰。秋招是一场持久战拼的是知识储备、信息获取和心态调节的复合能力。每一次失利都是在帮你缩小排查范围找到自己的漏洞你离offer的距离真的就是不断修复这些漏洞的迭代距离。