企业官网建设流程全解析

两年经验的前端，在跳槽市场上是个挺尴尬的位置。你说自己熟业务吧，做的事情还不够系统；但你要说自己是新人吧，独立负责模块早就没压力了。面试官对这类候选人也有个微妙的预期：基础不能有硬伤，框架得真正用明白，项目里的来龙去脉得讲清楚。年初我刚完成一轮跳槽面试，前后聊了七八家公司，拿到三四个offer，中间踩了不少坑。这篇面经就按准备、考点、项目、现场、复盘五个阶段，把两年经验前端面试会遇到的典型问题、回答思路和实战教训梳理一遍。不管你是准备马上投简历，还是打算过几个月再动，都可以先把这些坑提前绕开。

1. 面试前的准备：把简历和知识体系一起盘到位

1.1 简历项目描述：从“做过什么”改成“怎么做的、为什么这么做”

很多简历的问题在于只写业务流水账。“负责某某模块开发”“参与某某需求迭代”，这种描述在HR眼里等于什么都没写。两年经验的简历，要体现的是思考和决策能力，而不是列表式的业务经历。

我自己第二版简历就被朋友批评过，每个项目都写成了功能列表。后来改成四段式：业务背景、我的职责、技术方案、难点与取舍。比如一个数据报表项目，最开始写的是“使用ECharts完成数据展示”，改完之后写的是“面对多图表混合场景，把图表配置抽成schema数据，用JSON配置驱动渲染，新图表接入时间从半天压缩到半小时”。同样一个项目，后者明显能让面试官产生追问欲望。

再讲一个原则：每个项目挑一到两个真正有技术含量的点讲透，而不是把所有功能都罗列出来。我面过一次，面试官整场都在追问一个内部Excel导入工具，需求本身很小，但我把FileReader读取、文件分片、Web Worker解析、上传进度反馈串起来讲了，面试官反而觉得这个项目最能看出工程意识。项目大小无所谓，关键是你能把一个点挖多深。

1.2 知识体系分层：搞清两年经验会被问到哪一层

两年经验的面试题，大体分三层。

第一层是高频基础题，几乎每场必考：事件循环、闭包、原型链、this指向、CSS布局、浏览器缓存、跨域方案。这些属于送分题，但你不能只背结论，要能在白板上边写边讲原理。第二层是源码理解题：Vue的响应式原理、diff算法、nextTick实现，React的fiber调度、hook原理，至少要能画出一条完整的调用链。第三层是开放设计题，比如“首屏加载3秒，怎么排查”“让你设计一个前端错误监控系统，你会怎么设计”。这类题没有标准答案，但能看出你有没有全局意识。

我准备时建了一个知识脑图，左边是知识点，右边是对应的面试题和我的口述提纲，每天早晚各一小时，用两周时间把高频题过了一遍。每道题都写成“先讲结论、再讲原理、最后举场景”的固定结构，练到面试时不用现场组织语言。下面这个表是我面完总结出的高频考点分布，可以按这个表查漏补缺：

1.3 把AI工具当面试陪练，而不是偷懒工具

这两年AI编码工具越来越普及，面试官也开始问“你平时用不用AI辅助开发”。我个人的态度是：可以用，但要能说清楚用在什么场景。比如让AI生成重复性的CRUD模板、帮我解释一段不熟悉的第三方库源码、整理接口文档，这些是有效使用。如果你只是在面试前让AI生成一堆八股文答案背下来，现场一问还是露馅。

其实AI是个很好的陪练。我准备面试时会拿高频题去问AI，让它先给一版回答，再顺着回答继续追问，把它当成半个面试官。但关键一步是：AI给出的答案我一定会自己验证一遍，比如事件循环的输出顺序、手写题的正确性，都会在本地跑一遍确认。别人的回答只能用来补全思路，不代表你可以跳过理解这一环。

2. 高频考题背后的逻辑：八股文不是背出来的

网上流传的“前端面试八股文”合集我也看过，确实能帮你快速过一遍知识点。但两年经验的面试，考官已经不会满足于“标准答案”了，他们更想听到你理解背后的“为什么”。

2.1 事件循环：别背输出顺序，理解任务调度模型

事件循环是年年前端必考题，但这两年问法在变化。我遇到的版本是：给一段混合了async/await、Promise、setTimeout的代码，要求说出输出顺序并且解释原因。如果你只是背过“Promise先于setTimeout”，大概率会被追问“为什么”，然后卡住。

正确理解是：JavaScript先在主线程同步执行所有代码；遇到宏任务（setTimeout等）会推入宏任务队列；遇到微任务（Promise.then、await后面的代码）会推入微任务队列；当前宏任务执行完后，会清空整个微任务队列，然后才取下一个宏任务执行。await不是阻塞线程，而是把它后面的代码当作一个微任务来执行。

可以类比成一个餐厅里只有一个服务员：同步代码是当前在排队的客人，微任务队列是插队加急的单子，宏任务队列是新的外卖订单。服务员会在处理完当前客人后，先把所有加急单跑完，再去接下一个外卖。

我面试遇到过这道题：

console.log('start'); setTimeout(() => { console.log('timeout'); }, 0); Promise.resolve().then(() => { console.log('promise'); }); console.log('end');

输出顺序是 start、end、promise、timeout。同步代码先全部输出；主线程清空后先处理微任务队列，所以promise先打印；之后才轮到宏任务timeout。我建议你自己在Chrome的Performance面板里录一段代码，看看事件循环的可视化过程，这个画面比背十次八股文都管用。

2.2 框架源码题：Vue和React，至少有一个能讲到源码级

我的主力框架是Vue，所以重点准备了Vue 2和Vue 3的差异。面试官最常问的是“Vue 3为什么用Proxy替代Object.defineProperty”。这题不能只答“性能更好”，要说出关键区别：

• Object.defineProperty只能拦截对象的属性操作，新增和删除属性监听不到，数组索引变化需要重写一系列方法才能捕获。
• Proxy代理的是整个对象，天然支持新增、删除、属性枚举，拦截能力更全面。

再往深说，Vue 3的依赖收集用WeakMap存储“响应式对象—属性—依赖函数”的关系，组件卸载时依赖会自动清理，这也是比Vue 2更优的地方。这些内容不能只靠背，我建议你读一读Vue 3响应式部分的源码，或者至少把官方文档里关于响应式基础的部分读透，再配合自己写几个demo验证。

如果你面的是React，fiber架构和hook闭包陷阱是逃不掉的，但我没有深入React面试就不展开。这里提醒一句：不管面哪个框架，“组件通信方式”和“副作用执行时机”都是最高频的问题，这两个方向一定要吃透，并且最好能结合自己项目里的实际场景来讲。

2.3 手写题：边界条件比主流程更拉分

两年经验的手写题不会太难，但很考验代码习惯。我遇到的题包括：防抖节流、Promise.all、深拷贝、数组去重、EventEmitter。每道题看着都简单，但拿高分的差距在细节。

以深拷贝为例，如果只写一个无脑递归，面试官大概率会追问“循环引用怎么办”“Date和RegExp怎么处理”。正确做法是用WeakMap缓存已经遍历过的源对象，遇到循环引用直接返回缓存，对Date、RegExp、Map、Set分别做类型判断，还要考虑Symbol作为key的情况。写代码时保持变量命名清晰，边界条件处理完，最后加一句简明注释说明思路，这个印象分会很加分。

再强调一个现场技巧：手写题一定要边写边说。比如写防抖时，可以边写边讲“我先把定时器存下来，事件触发时先清掉上一次的定时器，再设置新的，这样连续触发就只会执行最后一次”。面试官能听到你的思维过程，就算代码有一小处笔误，他也更愿意引导你修正。如果你闷头写完一句话不说，代码万一有bug，面试官很难判断你是思路错还是笔误。

下面是我整理的高频手写题考察点，可以在家自己过一遍：

3. 项目深挖：两年经验的分水岭

基础题和手写题只能算守门题，真正能把两年经验候选人拉开的，是项目深挖。几乎每轮技术面都会花一半时间在项目上，面试官不是在听你复述业务，而是想看你的思考方式、取舍逻辑和技术判断力。

3.1 准备一个代表作：自己先当面试官，把项目问一遍

面试前务必选出一个最值得讲的项目，然后自己把可能被追问的点全部写成问题清单，逐个准备回答。我当时选的是一个低代码报表搭建平台，列了差不多二十个问题：为什么用schema驱动渲染而不用组件直接编码？权限控制怎么做？大数据量表格卡顿怎么优化？组件版本如何管理？每个问题我都准备了“表层答案、内层原理、底层取舍”三层解释。

正式面试时，我准备过的问题覆盖了面试官八成以上的追问。剩下两成没覆盖到的，因为我把方案设计的前因后果都理清了，现场临时发挥也能接住。这里有个底线要求：不要在简历里编造经历，不要夸大项目职责。资深面试官最多追问三四个问题就能识破编造，一旦被发现不诚实，整轮面试基本就凉了。

3.2 微前端、大文件上传、组件库：常见的三个项目亮点怎么讲

很多两年经验的简历上都出现了微前端、大文件上传、组件库这几个关键词，因为它们是这两年很主流的技术点。但光有词没用，关键在于你能不能讲出里边的门道。

先说微前端。面试官大概率会问“为什么不用iframe做成微前端”。标准回答要提到iframe的隔离与通信代价：iframe虽然能隔离样式和全局变量，但路由不同步、全局弹窗和遮罩无法覆盖到子页面、通信只能靠postMessage且调试体验差。然后绕回你的选型：你用的是qiankun还是Module Federation，主应用和子应用之间公共依赖怎么共享，样式和全局状态怎么隔离。只回答“别人用了我也用”的话，这题基本就是送命题。

再说大文件上传。这两年经常被问到“前端怎么用Worker上传大文件”。这里要讲清楚的链路是：用FileReader把文件读取为ArrayBuffer，切片后丢给Web Worker做hash计算，Worker算完把分片传给主线程，主线程再控制并发上传，同时记录已上传的分片，实现断点续传。面试官如果追问“为什么用Web Worker”，你要能答出“在主线程计算大文件哈希会阻塞UI，用户会看到页面卡死，放到Worker线程里，主线程才保持流畅”。

最后是组件库。不用一上来就讲按钮、输入框怎么实现，重点放在抽象层面：组件API怎么设计、受控和非受控怎么权衡、主题定制怎么做、按需加载怎么实现。面试官想听你对通用性的理解，而不是实现细节。

3.3 遇到没做过的项目：先承认，再补一套思路

两年经验不可能什么都见过。我遇到过面试官聊RxDB（浏览器端离线数据库）、OnlyOffice在线编辑集成，这些都是我简历上没有的东西。我的应对方法：先诚实说“这个我没有在实际项目中用过”，然后补一句“但基于我对IndexedDB和SSE的理解，我会先这样设计……”然后把思路说一遍。

这套“不会但能讲思路”的本事，其实在准备阶段就能练。平时看技术文章遇到陌生方向，可以逼自己想“如果让我来做，第一步会做什么、数据怎么设计、接口怎么定义”。这种思维练习做多了，面试里遇到陌生问题就不再慌，你能把未知问题拉到熟悉的推理框架里来解。

4. 真实面试现场：机试、手写、反问的细节

面试除了拼实力，也拼临场处理。这一章说些实际用得上的方法。

4.1 机试题：先跑通，再优化，优先级别搞反

不少公司有代码机试，通常是给一个需求让你限时实现。我遇到的是做一个表格页面，要求列表展示、搜索、分页、筛选、详情弹窗。难度不大，考察的是工程化熟悉度、代码组织和边界处理。

我的策略很简单：先把全部功能跑通，再回头优化。很多同学上来就想搭一套漂亮架构，结果浪费时间，功能没写完直接挂掉。跑通以后，如果还有时间，我再做三件事：把请求统一封装，集中处理loading和错误；把表格列配置抽成常量；把筛选条件同步到URL里，刷新后状态不丢。这些小优化不会增加太多代码量