二面说实话比一面刺激多了。一面问你“闭包是什么”你背个定义就能过二面直接给你一段代码让你说输出顺序说完还要解释Promise微任务为什么排在这接着再追问一句“这个场景在项目里用过吗”。春招那阵子我实习面了十几家前端岗位前前后后攒了一堆真实遇到过的题目和复盘后的答案今天把第二弹整理出来。内容还是以基础八股为主但比第一弹更偏向面试官追问的逻辑也加了不少工程化、场景设计和HR面的实战细节。适合正在准备前端实习、春招秋招的同学尤其是那些一面能过、二面容易卡壳的人。1. 二面开始前先搞清楚面试官到底想考什么1.1 一面和二面的考核重点有什么不同很多人把面试复习理解成“背题”一面可能确实有效但到了二面就会失灵。我自己的感受是一面更看重你的知识面答对点就给分二面更看重知识的体系化面试官会从你回答里的某一个词继续往下挖直到挖到你答不上来然后再看你面对不会的问题是什么反应。所以二面复习不能只背结论得知道结论是怎么推出来的和哪些模块有联系。举个例子一面问“事件循环是什么”你只需要说出宏任务和微任务执行顺序。二面会改成“这段代码输出什么”输出完还要讲清楚为什么.then里的回调比setTimeout先执行你提到微任务队列他又会追问“浏览器和Node里的事件循环有什么区别”你如果提到Node多半还要追问“process.nextTick和Promise谁先执行”。这就是二面的风格从一个点牵出一整条链路。所以我建议准备二面的时候别再用刷题式的记忆法而是试着把每个知识点当做一个入口做一次“顺藤摸瓜”。比如聊到浏览器渲染就顺着“输入URL后发生什么”把DNS、TCP、TLS、HTTP缓存、DOM树、CSSOM、布局、绘制、合成全部串一遍。这样不管面试官从哪个环节切入你都能接住。1.2 二面高频考察范围有哪些根据自己和身边同学的经验二面题目看起来五花八门但逃不出这几个方向。第一块是JavaScript核心机制闭包、原型链、异步、this指向、作用域链几乎必考第二块是浏览器和网络缓存、渲染流程、HTTP协议属于基础素养第三块是框架和工程化Vue和React的底层原理、组件通信、Vite/Webpack第四块是场景设计大文件上传、微前端、性能优化第五块是项目和软技能深挖简历、介绍项目、HR面。春招面试还有一个潜在考点前端当前很热的工具链。面试官会看你是不是只会写页面比如有没有用过AI编程工具、有没有读过开源项目、有没有关注微前端这类趋势。我遇到的二面里被直接问到过“你简历上写的开源项目是怎么读源码的”也遇到过“如果让你用现有AI工具辅助开发前端你会怎么组织工作流”。这类开放题没有标准答案但要提前想一想别临场硬编。2. 二面高频八股JS和浏览器必问题2.1 闭包、原型链和事件循环怎么答才加分先说闭包。面试官问“说说闭包”基础答法是一个函数能够访问另一个函数作用域内的变量这样的组合就是闭包常用于数据私有化、防抖节流、函数柯里化。但这样答只能保底。我当时补充了一个项目里的实际例子多个上传任务同时进行每个任务需要维护自己的进度和取消状态我用闭包把每个任务的状态封起来外部只能通过暴露的方法去读取和更新这样不会污染全局变量。面试官一般会接着追问“闭包会不会造成内存泄漏”。别急着说会要分情况。如果闭包引用了不再使用的大对象而这个闭包还被长生命周期的对象引用着确实会泄漏解决办法是使用完之后把引用置为null或者改用WeakMap/WeakSet这类弱引用结构。你这样答他就知道你是真写过程序的。事件循环的代码题也逃不掉。最常见的一道console.log(1); setTimeout(() { console.log(2); }, 0); Promise.resolve().then(() { console.log(3); }); console.log(4);输出顺序是1 4 3 2。原因很好解释同步代码先全部执行所以先打印1和4同步代码结束后浏览器会先检查微任务队列Promise的.then属于微任务所以打印3最后检查宏任务队列setTimeout的回调属于宏任务打印2。如果题目里再加一个async function比如await后面包的表达式相当于Promise.then的链式调用那么要把await后面的代码当成微任务来处理。原型链考察的往往不是定义而是实际机制。面试官会问“new一个对象时发生了什么”你答创建空对象、把构造函数的原型链绑定到新对象的__proto__上、执行构造函数并绑定this、返回对象。讲到这他大概率会追问“instanceof是怎么判断的”。你顺着答它会沿着构造函数的prototype和实例的__proto__链做匹配。这些都属于前端面试题里最典型的八股但一旦答出“原型链其实是一条属性查找路径”面试官就会觉得你理解得比较透。2.2 浏览器缓存和渲染过程浏览器缓存这道题几乎每次面试都会出现。核心是把强缓存和协商缓存说清楚。强缓存是浏览器根据自己的判断直接使用本地资源不会发请求到服务器涉及的响应头有Cache-Control和Expires协商缓存是浏览器不确定资源是否有效会带着标识去问服务器服务器决定是返回304还是直接返回新资源常见的标识有ETag和Last-Modified。我在面试里被追问的是“实际项目里你会怎么设置”。我的回答是静态资源文件名带hash的用Cache-Control: max-age31536000强缓存一年因为文件名变了就相当于新请求入口HTML文件一般设置no-cache让它每次去服务端确认这样发新版本时能及时拿到新的资源路径。这个思路很朴素但面试官很认可因为它体现的不只是背概念而是知道缓存如何配合前端发布流程。渲染过程属于计算机知识里的经典题。从输入URL到页面展示至少要能说出这个链路DNS域名解析拿到IP建立TCP连接如果是HTTPS再经过TLS握手然后发送HTTP请求服务器返回HTML浏览器先解析HTML生成DOM树同时解析CSS生成CSSOM树两者合成渲染树再经过布局、绘制和合成最后页面显示出来。不用背得特别细但每个环节都要知道大概在做什么。我记得面试官追问过一句“那JS放在哪里会影响渲染速度”。这时候要说出JS在解析HTML时会阻塞DOM构建所以script标签通常放在body末尾或者使用defer、async属性defer会在DOM解析完之后按顺序执行async是下载完就执行两者不等价。另外CSS会阻塞渲染因为渲染树需要CSSOM所以首屏优化一般要内联关键CSS或做拆分。2.3 网络基础不能废前端实习面试不会问太重的网络题但HTTP/1.1和HTTP/2的区别是高频。我当时答的核心是HTTP/1.1每次请求基本是一个TCP连接上的顺序处理会出现队头阻塞HTTP/2引入了二进制分帧、多路复用、头部压缩多个请求可以在同一个连接上并行传输效率高很多。但HTTP/2的队头阻塞在TCP层依然存在所以现在又有了HTTP/3底层换成UDP的QUIC。这属于一个加分的延展建议背一下答的时候会很加分。HTTPS握手不用讲得太深但至少要把“防篡改、防窃听、防冒充”讲出来。简单说就是服务器向CA机构申请证书证书里有公钥浏览器验证证书合法性后双方通过非对称加密协商出一个对称密钥之后都用这个对称密钥加密传输。面试官追问“为什么不用非对称加密传所有数据”可以说非对称加密性能开销大对称加密快实际是两者结合。3. 框架和工程化Vue/React面试题怎么答才不背课本3.1 Vue和React的核心差异框架题在实习面试里出现频率很高尤其是用Vue的团队一定会追问底层原理。你不能只说“Vue用模板React用JSX”这样跟没答一样。我当时是从三个层面拆的。声明式UI的更新机制不同。Vue基于响应式依赖追踪数据变化时能精准知道哪个组件变了然后走异步更新队列所以很多场景下不需要手动优化React则是状态发生变化后从组件根部重新执行render通过Fiber架构把渲染任务切成小块再用diff算法找出变化部分所以React在很多时候需要配合useMemo、React.memo做优化。这个区别决定了你在写代码时的心智模型不同。模板和JSX也有差异。Vue的模板是纯HTML的扩展编译时可以分析依赖自动做静态标记JSX是JavaScript灵活度更高TypeScript支持自然但需要更多运行时处理能力。如果你在架构选型时说“Vue适合快速开发、React适合复杂交互较强的团队”面试官会认为你有自己的思考。最后是生态和团队成本。Vue生态上手更简单中文资料多适合中小团队React生态更丰富和TypeScript结合更紧密适合需要跨端和大型协作的团队。我当时还被追问“微前端里Vue和React能不能混用”我答的是可以微前端本身就是解决不同技术栈协同问题的运行时通过容器加载子应用框架各自隔离这就自然引到后面的微前端题。3.2 组件通信和状态管理组件通信属于面试必考而且会结合一个具体场景来问。Vue里面父子组件用props和$emit跨层级用provide/inject全局共享数据用Vuex或Pinia如果只是简单跨组件事件可以用mitt这类事件总线。React里父传子就是props子传父是回调函数跨层级用Context全局用Redux、Zustand或Jotai。面试官一般会问“什么时候该用状态管理库什么时候不用”。这个问题容易答偏。我当时的回答是如果一个状态只被组件自己或少数子组件使用应该就近用useState或组件内状态只有状态被一大堆不相关组件共享或者需要跨页面持久化才考虑引入全局状态管理。用状态管理库不是因为面试官觉得它高级而是因为它能解决“状态多级透传”和“可预测更新”的问题但代价是学习成本和样板代码。普通项目无脑上Redux或Pinia其实是在给自己挖坑。如果简历上写了项目用了Pinia或Zustand一定要能说清它的原理。比如Pinia为什么比Vuex轻量很多人会答“更简洁”但更准确的是Vuex的store是挂在一个单一实例上的Pinia则利用Vue 3的reactive和computed组合式API为每个store创建独立实例类型推导也更友好。Zustand最核心的就是一个返回{getState, setState, subscribe}的闭包所有hook都是在这之上封装的能说出这一点面试官会对你刮目相看。3.3 打包工具和性能优化Vite是现在很多团队在用的工具春招面试基本绕不开。面试官问“Vite和Webpack的区别在哪里”我建议从开发体验和构建方式切入。Webpack在开发服务器启动时要对整个项目做依赖打包项目一大就会慢Vite利用浏览器原生ESM模块能力开发时不需要把所有模块预先打包只会在浏览器请求时按需编译所以启动速度很快。Vite还基于esbuild预构建依赖npm包通常会被打包成ESM格式浏览器可以直接加载。HMR的原理也需要懂一点点。Vite的HMR是基于原生WebSocket和模块图实现的文件修改后服务端能定位到受影响的模块然后只推送更新内容Webpack的HMR则是通过hotUpdate机制加载补丁模块。面试官问“为什么Vite在大型项目里热更新还是会有卡顿”你可以说是因为浏览器请求大量模块时依赖图上模块数太多服务端要做转换所以仍有性能瓶颈这时候Webpack的持久化缓存反而更稳。这种有条件的对比显得你很客观。性能优化题最万能的答法是从“加载、渲染、运行时”三个维度展开。加载阶段路由懒加载、组件异步加载、图片懒加载、资源压缩、CDN、HTTP缓存渲染阶段减少不必要的重排重绘、避免同步阻塞、动画使用requestAnimationFrame或CSS transform运行时阶段减少长列表渲染、虚拟滚动、Web Worker处理大计算、useMemo/computed减少重复计算。面试官一旦追问“具体怎么测性能”你得说出Performance面板看FCP和LCP、Network面板看资源体积、Lighthouse跑分、内存面板做快照对比这些实操经验比背书更有说服力。4. 场景题大文件上传、微前端和开源项目4.1 大文件上传和Worker前端场景题里最常出现的就是大文件上传。面试官通常这么问“如果让你实现一个支持断点续传的大文件上传组件你会怎么设计”这个问题很综合能考到File API、Blob、并发控制、哈希计算、网络请求、服务端配合等一堆知识点。我的回答套路分六步。第一步分片。用File.prototype.slice把文件按固定大小切成多个Blob分片比如每个2MB然后把每个分片用FormData上传。第二步计算文件指纹。通常用spark-md5对文件内容计算一个唯一的哈希值用来做秒传和断点续传。如果文件有几十MB甚至上GB在主线程算MD5会阻塞页面所以会把计算任务放到Web Worker里执行避免UI卡顿。这一步正好和“前端使用worker上传大文件”这个点契合。第三步并发控制。不能一次性把所有分片发出去否则浏览器和服务端扛不住。自己写一个并发池控制同时上传的分片数量比如最多5个。第四步进度管理。每个分片上传完成后更新对应状态再算出总进度。第五步断点续传。上传前先向服务端发一个请求问该文件已上传了哪些分片前端跳过这些分片只上传剩余的。第六步合并。所有分片上传完成后通知服务端按分片顺序合并文件并做完整性校验。面试官可能追着问“为什么用Web Worker主线程到底卡在哪里”。你要说清楚计算哈希要读取文件内容文件越大计算量越大主线程如果同时渲染页面会出现明显的交互卡顿Worker相当于把计算任务发到另一个线程页面不会卡但注意Worker里不能直接操作DOM只能通过postMessage和主线程通信。另外如果追问“分片大小怎么定”可以答太大会让单次上传失败的概率增加太小会导致请求数量过多加上HTTP请求本身的开销反而更慢常见的是1MB到5MB之间具体要结合网络环境和后端限制来定。这种开放性问题能把权衡过程讲出来就赢了。4.2 微前端微前端出现在实习面试里一般是简历里有相关项目或提到“看过微前端相关文章”。面试官最常问的是“什么是微前端为什么需要它”。我当时的回答是微前端把一个大型前端应用拆成多个可以独立开发、独立部署的小应用再在运行时组合到一起。它解决的核心问题是项目变大后团队协作困难、部署互相影响、技术栈不好统一。追问通常会落在实现方案上。iframe是天然隔离方案但有很多缺点比如刷新状态丢失、路由不同步、通信复杂、弹窗和遮罩层级难处理。所以现在主流是qiankun或wujie这类基于single-spa或自研的微前端框架。qiankun的核心思路是通过registerMicroApps注册子应用通过start启动加载子应用时会解析子应用入口HTML拿到JS和CSS执行它用Proxy实现JS沙箱让子应用访问不到全局变量污染样式隔离则通过scoped css和动态样式表隔离实现。如果你能说到这个程度面试官基本不会再深挖了。还有一类问题是“微前端应用之间怎么通信”。要分情况如果是简单的全局事件派发可以直接用一个发布订阅对象如果是需要共享状态可以通过initGlobalState或自定义事件也可以用一个共同的浏览器Storage来做持久化通信。我当时还特意提了一句“尽量不要跨应用共享一个内存对象因为路由切换时应用可能被卸载内存会丢失”。这种细节很加分。4.3 从开源项目读代码anything-llm、onlyoffice、bpmn现在前端面试越来越喜欢聊开源项目尤其是AI应用类的比如GitHub上很火的anything-llm说白了就是一个本地知识库AI前端应用底层接LLM服务、向量数据库、文件解析。如果你在简历上写“研究过anything-llm的源码”面试官大概率会问“它前端是怎么跟后端流式对话的”。这个问题其实考的是SSE也就是Server-Sent Events。后端通过text/event-stream持续推送数据前端用EventSource或fetch的ReadableStream去读取。这个概念在简历里出现过的话一定要能讲清楚。onlyoffice和bpmn这类专业型前端组件也常见。onlyoffice是一个复杂文档编辑器基本是一套完整产品面试里如果你只是用过在线预览就不要说什么读过源码容易被问穿。但可以说清楚它是通过iframe嵌入和业务系统之间靠postMessage通信这是一个合理的外围理解。bpmn-js则更贴近前端定制考的是“自定义流程节点怎么做”。你至少要知道bpmn-js提供建模API可以监听节点的增删改事件渲染侧通过自定义eclass配合CSS改变节点样式也可以在属性面板里扩展自定义属性最后导出和导入XML。面试官只要听到这些就会觉得你真的动手做过。读开源项目不需要从头读到尾我自己的方法是先看目录结构和package.json找出入口和核心依赖再按一个具体功能追踪比如“我想知道它怎么保存文档就搜save相关方法”最后再尝试自己改一个小功能跑通完整流程。比起说“我读过整个项目”一句“我具体跟了某个模块”更真实。5. 手写题和调试题别在小事上翻车5.1 高频手写题整理手写题在春招实习里几乎是必考常见的是防抖节流、深拷贝、Promise、数组去重、数组扁平化。这些题不算难但要在面试现场几分钟内写对需要大量练习。防抖和节流一定要会手写。防抖是“事件触发后等待一段时间如果这段时间内没有再触发才执行”适合搜索输入框节流是“固定时间内只执行一次”适合滚动监听和按钮点击。我当时写的是function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } function throttle(fn, interval 300) { let last 0; return function (...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }写完后注意两点要保留this指向所以用了apply要处理参数传递所以用了...args。面试官喜欢问“这两个分别用在什么场景”顺便再让你说“如果我在短时间内连续点击按钮节流和防抖的效果有什么不同”。深拷贝也是一个常考题。基础版是递归遍历对象和数组但要特别注意循环引用否则会栈溢出。我当时给出的方案是用WeakMap存已拷贝的对象遇到同一个引用直接返回之前拷贝的结果同时要处理Date、RegExp这类特殊对象。代码量不大但思路要清晰。function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags); if (map.has(obj)) return map.get(obj); const clone Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (const key of Object.keys(obj)) { clone[key] deepClone(obj[key], map); } return clone; }Promise的手写题更容易变体。考得最多的是Promise.all需要处理一个promise失败时整体失败的情况。思路是返回一个新的Promise内部用计数器管理所有promise是否都完成。5.2 排查线上问题的思路面试官有时会直接问你“线上一个页面白屏了你怎么排查”。很多实习生只会说“看控制台报错”这显然不够。更完整的思路是先看是不是代码报错打开DevTools的Console看有没有JS异常再看资源有没有加载失败用Network面板看请求状态码然后看接口返回的数据是否符合预期重点看请求是不是401、500、超时如果页面能加载但布局乱排除CSS问题如果只有特定浏览器出现考虑兼容性如果页面所有用户都白屏很可能刚发布的上线版本有问题要快速回滚。面试官可能继续追问“有没有遇到过内存泄漏的问题”。你可以说用Chrome DevTools的Performance录制看内存曲线是否持续上升用Memory面板做堆快照对比排查哪些对象没被释放常见内存泄漏来源是忘记清除定时器、事件监听器没有解绑、闭包引用到不必要的大对象、全局变量没有清理。这些经验如果没实际做过也要去跑两遍工具加深印象面试时能说出来就会很真实。6. HR面和反问环节别让前面的努力白费6.1 HR面到底在考察什么进到HR面说明技术面上已经基本通过了。HR不会问你太多技术问题但会通过聊天判断你的稳定性、沟通能力、学习能力、团队匹配度。有些同学技术面很强HR面却因为回答太随意丢分很可惜。HR通常会问“你对我们团队了解吗”“你对实习时间有什么安排”“有没有在面其他家公司”这些问题尽量诚实表达。说到“在面其他家”时可以不透露具体公司但态度要大方可以说“目前有在接触几家团队但我更看重贵组的技术方向和项目质量所以想在最终确认前多了解一些”。这样既没有让HR觉得你不稳定又展现了你对选择的认真态度。自我介绍也要提前打磨。技术面试的自我介绍可以简短但HR面最好讲清楚为什么选择前端、为什么投这家公司、大概的实习时间、希望得到什么。不要把一长串技能全倒出来挑几个关键词让HR记住你的几个标签比如“ReactVite低代码项目经验”、“有开源项目阅读习惯”、“能实习六个月以上”就比背一堆技能清单好。6.2 怎么反问才有质量面试最后面试官一般都会问“你有什么想问我的”。这个环节不要浪费也别只问“上班时间怎么样”。想要业务方向的反馈可以问“咱们团队目前前端主要用哪些技术栈有没有正在推进的架构改造”想让面试官觉得你好学可以问“结合我目前的情况如果实习期间想往工程化方向深入您会建议我优先补什么。”这种问题会直接点燃很多技术面试官的表达欲他会觉得你有规划、有想法比随便问“我表现怎么样”要强很多。HR面反问则更侧重落地信息比如“实习生入职后的培养方式是怎样安排的”“团队一般几个前端负责一条业务线”“项目节奏怎么样”。薪资和转正率这种问题可以在谈offer阶段再具体问不要在HR面就问得太细容易显得急躁。面到后面我最大的一个体会是面试题永远逃不出“基础 项目 场景”这个圈但同样一道题能不能答得让面试官觉得你是个可以一起写代码的人差别就在你有没有把知识串成体系有没有在项目里实实在在踩过坑。第一弹我建议大家把八股背熟第二弹我更建议大家像做产品一样去梳理自己的知识体系。你不需要把所有题都答得完美但一定要让面试官感觉到你遇到不会的问题时会怎么去分析和查证。我最后能拿到的几个offer都不是因为某一道题答得特别亮眼而是因为我很诚实地把不会的东西讲清楚然后把会的东西讲得很透。这些题目你们可以拿去对着刷一遍遇到不懂的地方多动手写写毕竟写代码这件事只有自己敲过才算真的会。
