二十一号在地铁上收到了滴滴的offer通知整个人靠着车门长舒了一口气。六月的北京已经热得让人烦躁但这封邮件确实把心里的焦虑清零了。回顾从月初开始投简历、背八股、约面试、连续被挂再到拿到满意的实习offer整个过程二十多天节奏快、信息密度高把自己逼得很紧。这篇面经不想写成标准答案清单因为网上的题解已经够多了。我更想把这段时间里踩过的坑、试过的准备方法、以及面试中真正被问到且容易翻车的题目梳理一遍给正在准备前端实习的同学一个相对完整的参考。1. 实习面经前的基础盘点简历优化和知识体系梳理1.1 简历上哪些内容真正起了作用投简历之前我认真搞了一轮简历重构。第一版简历里的项目写得很平是那种典型的技术栈罗列式用了Vue3、用了Pinia、用了Vite然后就没有然后了。后来参考了组里学长给我的建议每一段项目经历必须写清楚要解决的问题、我的具体动作、最终带来的可衡量结果这三件事。整份简历也压缩成了一页A4保证每句话都有信息增量而不是堆砌名词。改完之后我在面试中被高频追问的项目一共有两个一个是基于React的CMS后台管理系统另一个是仿出行平台的移动端H5。第一个项目里有权限管理动态路由按钮级指令权限和复杂表格性能优化虚拟滚动、大数据量下的渲染优化第二个项目里有地图选点、打车轨迹动画和支付倒计时。可以说面试官百分之八十的技术问题都是围绕简历里的项目展开的所以简历写什么就决定了你会被问到什么。1.2 把面试范围按优先级排了序六月的准备时间其实很短不到三周。我给自己定的优先级是JavaScript核心 浏览器与网络 框架React/Vue二选一深挖 工程化 算法 计算机基础。这里有一个很实在的建议不要试图在短时间内把每个方向都学到精通那不现实。前端面试的深广度是没办法在几周里补齐的能做的就是把高频考点练到形成肌肉记忆。我按照上面这个优先级每天固定花四个小时刷八股文两个小时写手写题一个小时做LeetCode热题。面试后期回头看真正拦住大多数人的不是某个知识点有多难而是知道但说不清楚。每个面试题都值得你自己练着讲一遍直到流畅自然为止。这个功夫不能省。2. 面试全流程复盘从投递简历到拿下offer的时间线2.1 投递渠道和响应速度的真实差异六月中旬我开始投递投了大概二十家。主要渠道是官网校招系统、BOSS直聘、拉勾和牛客内推板块。实测下来牛客上的内推帖响应速度最快很多是业务组直接招人甚至当天就能收到简历筛选通过的通知。BOSS直聘适合和HR直接沟通如果能要到业务面试官的联系方式更好很多大厂的实习岗位其实很缺人面试流程推进得比你想象中快。滴滴这轮是通过内推投的投递后大概两天收到面试邀约。整体流程是内推 → 简历初筛 → 一面技术面→ 二面技术负责人面→ 三面HR面→ offer总周期是十一天。中间的一面和二面间隔了三天二面到HR面只用了一天。这个速度在同批次面试里算中等偏快的有些厂一面过了要等一周才有二面。如果遇到连续好几个工作日没消息别干等一定要通过内推人或者HR主动询问进度这不算冒犯反而是合理的沟通。2.2 各轮面试的时间分配和侧重点一面约60分钟基本是项目 基础知识 手写题三件套。开场先自我介绍然后二十分钟项目深挖三十分钟基础知识点抽查最后十分钟一道手写题加反问环节。二面约50分钟更侧重综合能力和业务思维会问如果让你设计一个XX功能你会怎么考虑这类开放性问题也会深挖项目里某个模块的实现细节比如权限控制是怎么设计的、前端鉴权失效了怎么办。HR面约30分钟聊的主要是实习时间、工作地点、对加班的接受程度、薪资期望以及稳定性相关的问题。这里有一个我踩过的坑一面的时候我为了展示自己懂得多把很多概念往高深了讲结果被面试官打断了好几次。后来才明白面试官问一个问题想要的不是教科书式的完整定义而是你理解这个问题的方式和边界。说清楚是什么、为什么用、不用行不行、用了有什么坑比把定义一字不差背出来要管用得多。2.3 时间线里的节奏控制技巧整个六月后半段我的面试安排非常密集有时上午和下午各有一场。这个阶段最大的问题不是知识储备而是精力和状态管理。我的做法是每场面试前十五分钟把简历上对应的项目要点重新过一遍然后把自己整理的面试前速查表翻一遍。这个速查表里只有高频考点的一句话答案和容易忘的边界情况比如事件循环的宏任务微任务顺序、闭包造成内存泄漏的场景、HTTP缓存几个字段的优先级等都是我用备忘录记录的方便随时翻看。另外一个技巧是把每场面试遇到的问题及时记录下来当天晚上整理成文档。这不仅是查漏补缺更重要的是下一场面试前能快速回顾避免同一个坑掉两次。我面试后期发现很多公司问的问题其实是高度重叠的前一家没答好的题下一家大概率还会问。3. 高频真题拆解面试官真正想考的底层逻辑3.1 JavaScript 基础类问题JS是所有前端面试的绝对核心这一块的问题密度极高。我整理了几个被问了不止一次的题目类型事件循环和微任务宏任务的定义域。题目通常是setTimeout、Promise.resolve().then、async/await 混在一起输出顺序是什么。这类题看似简单但稍微变一下形就很容易出错。关键是搞清楚 async/await 底层是 Promise 的语法糖await 之后的代码会被包进微任务而 process.nextTick 的优先级比 Promise 回调更高。面试官一般会在你回答完后追问为什么Vue的nextTick要优先使用微任务所以建议把事件循环和框架设计结合起来准备。闭包和垃圾回收的关系。有一个很隐蔽的坑闭包并不一定会造成内存泄漏只有闭包引用的变量被外部长期持有且不再需要时才会泄漏。比如在一段循环里给多个按钮绑定事件如果在回调里引用了循环变量且该变量在闭包环境中被长期保留就会出现所有按钮都弹出最后一个值以及潜在的内存占用问题。解决办法是用 let 或 IIFE 包裹。面试官问这个题其实是在考察你能不能从V8引擎的角度讲清楚变量何时可以被回收。原型链和类继承的边界。面试官喜欢问class 的 extends 和 function 的 prototype 继承有什么区别以及instanceof 的原理是什么。前者的核心区别class 必须 new 调用、方法不可枚举、内部严格模式。后者可以一句话概括instanceof 是沿着左操作数的原型链找右操作数的 prototype 是否在链上。但考察点往往更细比如Object.create(null)创建的对象没有原型链arr instanceof Object为 true 但Object.create(null) instanceof Object为 false。3.2 浏览器与网络基础类问题从输入 URL 到页面显示的全过程。这个问题基本是必问的而且面试官会追问到很细的层面。我第一次答的时候只说到DNS解析、TCP连接、HTTP请求、渲染结果被追问TCP为什么要三次握手浏览器解析HTML是增量解析吗CSS会阻塞DOM树构建吗就卡住了。后来我把整个链路拆成了七个环节并给每个环节准备了两个可被追问的子问题答起来才比较稳。HTTP缓存相关的题目。强缓存和协商缓存的字段区分是高频题Cache-Control: max-age和Expires的优先级比较、ETag和Last-Modified的优先级、以及no-cache和no-store的区别都要能说清楚。这里还有个容易被忽略的细节用户在地址栏回车、刷新、强刷三种操作的缓存策略是不同的强刷会绕过强缓存直接走协商缓存不是完全不走缓存。跨域解决方案。CORS、JSONP、代理、postMessage、WebSocket 这几条路径中实际项目里最常用的是 CORS 和开发环境代理。面试追问的高频点是Preflight 预检请求什么时候触发——不是所有跨域请求都触发预检只有非简单请求比如自定义头部、application/json 的 POST、PUT/DELETE 方法才会。简单请求的判断标准要背熟。3.3 框架类问题Vue/React二选一深挖我简历项目主要用的Vue所以面试中Vue相关的问题占比较大但这不意味着React可以完全放掉。很多公司会直接问你了解React吗如果完全答不上来会显得知识面窄。我的建议是主框架深入研究副框架至少理解核心思想。Vue这边被问得最多的是响应式原理。从 Vue2 的 Object.defineProperty 到 Vue3 的 Proxy差异点必须讲清楚为什么 Vue3 要换成 Proxy可以拦截新增/删除属性、可以监听数组索引和 length 变化、更好的性能以及依赖收集和触发更新的过程。面试官还会追问computed和watch的实现差异这个最好能给出源码层面的理解比如computed有缓存机制只在依赖变化时重新计算watch则每次变化都触发回调默认是异步的。生命周期也是高频考点但面试官不会直接问说说每个生命周期而是放在场景里考。比如如果要在组件加载后请求数据应该放在哪个钩子函数里为什么不能放在created的同步代码后面答案是created里可以请求但 DOM 还没有生成如果请求回调里需要操作DOM就必须等mounted如果需要在DOM更新后做某些操作可以用nextTick。Vue3 组合式API里对应的是onMounted和watchEffect等。v-if 和 v-show 的区别是送分题但追问为什么 v-if 的切换开销比 v-show 大就稍微有门槛了v-if 是真正的条件渲染组件会经历销毁和重建涉及生命周期钩子和事件监听器绑定/解绑v-show 只是切换 display 属性组件始终挂载在 DOM 上。如果组件创建成本很高或者被频繁切换用 v-show 更合适。3.4 手写题和场景题最容易被拉开差距的部分手写题是前端实习面试的重灾区也是我最开始最担心、最后收获最大的一部分。整理下来出现频率最高的是下面几类手写 debounce 和 throttle。这两个几乎必考一个我当时被要求手写防抖。重点不是把代码写出来而是讲清楚防抖是延迟最后一次执行节流是控制固定频率执行。还要能说出两者的应用场景搜索框联想输入用防抖滚动加载和按钮点击限制用节流。如果面试官进一步问第一次点击希望立即执行怎么办需要会加 leading 参数。手写 new 的实现。核心是四步生成新对象 → 绑定原型 → 调用构造函数 → 返回判断。这里有个容易踩坑的点构造函数如果返回了对象new 出来的结果就是这个对象而不是新建的实例。手写深拷贝。这个题需要处理好数组、对象、Date、RegExp、循环引用这几个分支。很多同学会写出JSON.parse(JSON.stringify(obj))然后被打动但面试官立刻会问这个方案有什么缺陷无法处理 undefined、function、Symbol、循环引用、以及 BigInt。完整实现需要用到 WeakMap 存储已拷贝对象来打破循环引用。场景题大文件上传。这个题是我在二面被问到的当时面试官的问题是如果让你实现一个支持断点续传的大文件上传你会怎么设计 这题考察的是思路而不只是代码。我从三个层面答先把文件通过 File.slice() 切成固定大小的分片然后给每个分片生成唯一的 hash内容hash不是文件名再然后并行上传分片同时记录已上传的序列号最后在服务端合并分片。如果要支持断点续传就需要在上传前先向服务端请求哪些分片已上传只传缺失的部分。面试官又问如果用户网络中断已经上传的分片怎么处理我提到了Web Worker 里负责文件切片和hash计算不占用主线程可以避免页面卡死。这个点面试官明显比较满意后来我在热搜词里经常看到前端使用worker上传大文件相关的问题说明这确实是行业里比较关注的方向。场景题实现一个前端水波纹进度条。这个题被问到的时候我愣了几秒因为平时开发很少接触这种偏视觉的交互效果。后来拆解下来核心是两层canvas底层绘制固定的轨道和进度百分比上层用一张圆形的径向渐变图配合 CSS3 的动画或者 requestAnimationFrame 实现波纹波纹效果可以用 sin 函数不断改变透明度和相位或者用多个圆形波纹叠加。这个问题考察的点其实很杂动画实现方式、canvas 绘制基本功、以及能不能把视觉效果拆解成数学问题。面试官要的不一定是完美实现而是你看到效果后能想到用什么技术路径去做。3.5 工程化和项目深挖类问题Webpack 的核心流程。从配置输入入口开始Webpack 内部会构建依赖图、解析模块、生成 chunk、输出 bundle。面试官常问Loader 和 Plugin 的区别——Loader 是模块转换器处理文件从 A 格式到 B 格式Plugin 是生命周期钩子可以干 Loader 干不了的事比如资源压缩、环境变量注入、打包进度等。热更新HMR的原理也需要了解WebSocket 通知浏览器文件变化然后增量更新对应模块而不是全量刷新。Vite 为什么快。这个问题的核心在于开发环境用原生 ESM按需编译只有浏览器请求到的模块才会被转换而 Webpack 开发环境需要从入口递归构建整个依赖图。另外 Vite 利用 esbuild 做预构建依赖把数百个内部模块提前打包成 ESM大大减少了请求次数。生产环境 Vite 用的还是 Rollup目前是 Rollup 4所以并不存在Vite 生产构建比 Webpack 快这种笼统说法要区分开发和生产。项目深挖之权限管理。我的简历里写了动态路由面试官问得非常细你们的路由表是前端配的还是后端返回的菜单权限和按钮权限怎么做的如果接口返回的权限码和前端写死的对不上怎么办刷新页面后怎么恢复权限状态我把当时的实现方式用口语讲了一遍登录后根据角色ID请求权限接口前端用权限码数组动态 addRoute菜单根据路由表 meta 的 title 和 icon 渲染按钮权限统一封装成自定义指令 v-permission每次切换路由前在全局前置守卫里做校验刷新后从 Pinia 里重新拉取。面试官追问了一句路由动态注册之后404 路由会不会失效 这个坑我当时确实踩过path: /:pathMatch(.*)*这种通配路由如果一开始就注册会匹配所有未匹配的路径动态 addRoute 的页面也会走 404。正确做法是让 404 路由最后注册或者在动态路由添加完成后重定向到当前路由。这个小细节让面试官在反馈里给了我一个加分项其实这就是你有真实项目经验的证明。4. 滴滴面试的独特体验业务面与HR面更看重什么4.1 业务面试官追问的实际问题滴滴的一面和二面整体氛围比较务实面试官不太会揪着冷门八股逼问你但会顺着你的回答不断往下挖直到挖到你的知识边界。我印象很深的一个问题是如果前端的页面能打开但接口返回 500你会怎么排查 这是个全链路问题我按照看浏览器控制台报错 → 查看网络面板请求状态 → 看响应体错误原因 → 确认是否跨域 → 确认服务端日志 → 恢复环境再测的顺序答面试官追问如果接口在本地能通在测试环境不通呢主要考察环境差异排查的意识。二面有一道让我比较意外的开放题如果让你设计一个用户反馈功能你会怎么设计前端架构 这题其实没有标准答案但考察的是需求拆解能力。我从几个方面回答入口页面按钮 全局快捷键 → 数据上报选择反馈类型、上传截图、描述文字 → 提交策略防抖处理防止重复提交 → 前端状态管理反馈数据缓存到 localStorage避免页面刷新丢失 → 埋点反馈按钮点击量、提交成功率。面试官听完后补充问如果用户提交的截图非常大你会怎么处理我马上想到压缩图片或者走分片上传。这种开放题其实是比较好的展示机会可以把你系统设计的能力、以及你对用户体验的考虑都展现出来。4.2 HR面问题清单与答法滴滴的HR面比我想象中更务实。没有问那种你最大的缺点是什么的套话问的主要是能实习几个月、每周能来几天、目前的 offer 情况、期望薪资、工作地点是否接受。这里有个很实在的建议期望薪资不要说得太模糊也不要说得太高。我当时报了一个接近市场平均值上沿的数字并说明其实更看重学习空间和转正机会。HR当场并没有还价后来给的offer金额和我说的大致相符说明有依据地报薪资是会得到尊重的。HR面还有个问题需要注意你对我们公司有什么想问的吗 不要只问实习生有没有转正机会这种可以结合业务方向问团队目前的前端技术栈是什么入职后会参与哪个项目模块的开发这样显得你已经做好了入职的心理准备。5. 复盘总结拿到实习offer的核心竞争力与避坑指南5.1 面试中最容易被忽略的三个加分项第一主动清晰地说出你的思考过程。手写题的时候不要闷头写大声说出你的思路面试官更容易感受到你的逻辑能力。就算最后代码没写全思路对了也比沉默地写完全程效果更好。第二回答完后主动补充边界情况。比如讲完 debounce 后主动说如果希望首次点击立即执行需要再加一个 leading 参数这种主动补充会明显提升面试官对你的评价。第三项目的失败经验比成功经验更打动人。项目里遇到过大坑、怎么排查解决的面试官会认为这代表你真正经历过问题而不是背了别人的项目。5.2 踩坑清单与给后来者的建议不要花太多时间在A 框架好还是 B 框架好的争论上。面试问到的框架问题一定会围绕你简历里写的那个框架展开与其纠结 Vue 还是 React 哪个更流行不如把自己简历里写的那一套吃透。算法题不要追求刷难题。前端实习的算法题基本是 LeetCode Hot 100 难度偏下二叉树遍历、数组去重、字符串处理、两数之和这类重点是把频率最高的题练熟。有些公司还会出用 CSS 画一个三角形这种前端特有的手写题也要提前练。八股文一定要用自己的话讲一遍。看100遍理解答案不如把自己当面试官模拟提问一遍。我在准备后期拉了舍友互相模拟面试效果非常明显很多你以为理解了的知识点一旦要组织语言表达出来就会暴露漏洞。面试节奏不要排太满。我有一周时间一天两场面试下午第二场明显感觉脑子转不动回答问题的颗粒度变粗了。建议一天最多约一场面试如果必须两场中间一定要留出足够的喘息时间。收到 offer 后不要马上拒掉其他流程。在没有正式收到滴滴的 offer 邮件之前我并没有停止其他公司的流程。等邮件拿到、确认薪资和入职时间后再礼貌地终止其他面试。这个操作顺序很重要避免最后两头落空。最后分享一个我在面试过程中反复验证的技巧每场面试结束后的30分钟是记忆黄金期趁热把被问到的问题和你的回答记录下来。你会发现很多问题会在不同公司反复出现而你每次复盘后的答案会越来越接近完美状态。这份记录不仅帮我在二十多天里拿到了滴滴的实习offer也让我在之后转正答辩时有了很扎实的项目沉淀。前端这个领域知识量是真的多但面试并没有想象中那么可怕把基础打牢、把项目讲透、把状态稳住你已经跑赢大多数人了。