企业官网建设流程全解析

三年经验去面中大厂，说实话有点尴尬。说你是新人吧，该踩的坑都踩过了；说你资深吧，离架构设计、带项目又还差一口气。面试官很清楚这一点，所以他们的考察方式会和面应届生完全不同——不会让你背 API，也不会一上来就聊微服务拆分，而是用“基础深度 + 工程落地 + 项目追问”的组合拳，一层层试探你的上限在哪里。

不管你是准备跳槽还是单纯想看看行情，这篇内容都值得慢慢看。我把最近三个月面下来遇到的题目、踩过的坑、复盘出来的策略全部整理出来，分成上下两篇。上篇聚焦在准备思路、基础能力、框架原理和工程化这几块，下篇再聊项目深挖、场景设计、HR 轮次和 offer 选择。下面直接进正题。

1. 定位与准备阶段：先搞清楚三年经验到底在面什么

1.1 三年经验的真实考察逻辑

三年经验在大厂简历池里的定位通常是“中级到高级的过渡区”。这意味着两件事：第一，你的本职工作是能独立交付的，不需要人盯；第二，面试官会默认你已经具备了“参与设计”的潜力，而不是只会写页面。

所以你会发现，面试中很少再出现“解释一下 flex 布局”这类纯记忆题，取而代之的是“如果列表数据量上千，你怎么优化渲染”“你现在的项目里有没有自己封装过的组件，为什么这么设计”。他们的核心目标只有一个：确认你能不能在没人告诉你怎么做的情况下，自己找到合理方案。

我在准备阶段就把自己的知识体系分了四个维度：基础语言能力、框架原理、工程化与性能、项目深挖。前三个是每轮面试的通用考察，第四个才是决定能不能走到终面的关键。整个准备周期我花了大概三周，前两周集中在基础块，最后一周把项目从头到尾重新过了一遍。

1.2 简历与项目准备：一条线讲透，别撒网

三年经验的简历最容易犯的毛病是项目写得多，但每个都讲不透。面试官时间有限，他们不会因为你写了六个项目就觉得你厉害，反而会因为每个都只有一两句话而怀疑你的深度。我的建议是：重点写一个最核心的项目，其他项目简化成辅助支撑。

核心项目怎么挑？优先选那种你参与了完整流程的，从需求、方案设计、开发到上线、后期迭代都有你身影的。如果没有这样的项目，就选你最近做得最多、最了解技术细节的那个。简历上对这个项目的描述不要只写技术栈，要写清楚三个东西：业务背景、你做了什么、结果怎么样。比如“负责数据大屏的性能优化，首屏加载时间从 4 秒降到 1.2 秒”就比“使用 ECharts 实现数据可视化”强得多。

准备项目的时候还有个容易被忽略的点：一定要把项目里最复杂的那一块单独拎出来，写好完整的技术方案。比如你做过权限系统，那就把角色、菜单、按钮三级权限的完整设计写清楚；比如你做过上传功能，那断点续传、文件分片、并发控制这些细节要如数家珍。面试官追问的时候，一个能顶住十连问的项目，远胜过十个只能讲两轮的浅项目。

2. 基础能力关：JavaScript 与 TypeScript 的深度答法

2.1 事件循环、闭包、this 这三个“老朋友”要答出新意

这三道题是前端面试的入门菜，但三年经验的面试官不会满足于你把概念背出来。以事件循环为例，光说“宏任务、微任务”已经不够了，你要能完整地描述一次事件循环的完整流程，并且能分析出浏览器和 Node.js 环境下的差异。

我的答题思路是这样的：先说概念，事件循环就是 JavaScript 处理异步任务的机制，因为 JS 是单线程的，所以需要靠事件循环来调度任务；然后说宏任务和微任务的关系，一个宏任务执行完后，会清空所有微任务，再开始下一个宏任务；最后结合代码示例，告诉面试官这段代码的输出顺序，并解释为什么。如果面试官继续追问浏览器和 Node.js 的差异，我会补充说浏览器有渲染阶段，而 Node.js 的 process.nextTick 会优先于 Promise 微任务执行。

闭包这题同样要有层次。不要只回答“函数能访问外部变量”，而要讲清楚闭包的形成条件、内存回收机制、实际应用场景。我会举个实际业务例子：表格组件里每个单元格有自己的状态，如果用全局变量就会互相污染，于是用闭包把状态隔离在函数内部。这个例子既证明了概念理解，又体现了工程经验。

this 指向题是最容易翻车的，因为规则多且容易绕。我建议准备一个口诀式的总结：默认绑定（独立调用指向全局）、隐式绑定（对象.方法调用指向对象）、显式绑定（call/apply/bind）、new 绑定（指向新对象）、箭头函数（不绑定 this，由定义时的外层作用域决定）。光背这个还不够，要能结合 Vue 或 React 的源码场景，说出为什么某些写法会丢失 this 指向，怎么用箭头函数或 bind 修复。

2.2 类型系统：从“会写接口”到“会设计类型”

TypeScript 在三年经验面试中的比重明显比初级高。面初级时可能问还一些基本语法，比如 interface 和 type 的区别；面三年经验时，面试官会直接丢出一个场景，让你现场定义类型。

我遇到的一个有代表性的题是：给一个后端返回的多级菜单数据定义类型。初级答法是先定义 MenuItem 接口，里面包含 children。但面试官追问：children 里能不能包含其他字段？如果菜单有不同层级，字段结构不一样怎么办？这就涉及到了类型体操，要用递归类型、泛型约束、条件类型等特性来解决。所以这一关，重点准备的是：泛型的约束与默认值、联合类型和交叉类型的区分、递归类型、还可以了解一下 infer 和模板字符串类型，后者在处理事件名映射这种场景很实用。

TypeScript 面试还有一个高频题：interface 和 type 到底怎么选？我的答法是：优先用 interface 描述对象结构，因为它可以被 extends 和 implements，可读性更好；type 更适合描述联合类型、交叉类型、函数类型、元组等不能通过 interface 表达的场景。这样答完，面试官会认为你不仅知道区别，还知道在工程里怎么取舍。

3. 框架源码与原理关：React、Vue 不能只会用

3.1 React 核心机制：从 render 到 commit 的完整链路

React 相关的问题在中大厂面试里的出现频率非常高。如果你是 React 技术栈，务必要把下面这条链路讲顺：当状态更新时，React 会经过 render 阶段生成新的 React Element 树，然后进行 diff 对比，找出变化的部分，最后进入 commit 阶段，把变更同步到真实 DOM。

面试官在这个问题上常用的追问方式是：diff 算法具体是怎么做的？这里有三个核心优化可以展开说：第一，只看同层节点，不跨层级比较，把 O(n³) 的复杂度降到了 O(n)；第二，通过 key 属性识别列表中的节点身份，避免整棵子树被重建；第三，不同类型元素直接重建整棵子树，比如从 div 换成 span。能清楚讲出这三条，基本就过了 diff 算法这关。

Fiber 架构在三年经验面试中属于拔高题，但值得准备。简单说，Fiber 把渲染工作拆成了可中断的单元，让浏览器有空闲时间处理高优先级事件。这个机制的最大价值是可以实现并发特性，比如 useTransition 让低优先级更新可以被跳过。我建议准备一个实际体感：当页面输入框输入很快时，列表更新如果阻塞了输入，那这个交互就会卡顿；用 useTransition 标记列表更新为低优先级，输入就会流畅很多。这个例子比单纯讲概念更有说服力。

Hooks 的原理也常被问到，特别是 useState 和 useEffect 的执行时机。一个高频问题：为什么 Hooks 不能写在条件语句里？因为 React 是根据调用顺序来记录每个 Hook 的对应关系的，条件语句会改变调用顺序，导致状态错乱。这个问题看起来简单，但能答出背后的实现逻辑的人，面试官通常会加分。

3.2 Vue 响应式原理：从 Object.defineProperty 到 Proxy

如果你投的是 Vue 技术栈的岗位，响应式原理就是核心中的核心。Vue 2 用的是 Object.defineProperty，Vue 3 用的是 Proxy。我在面试时被问过一个很经典的对比题：Proxy 到底比 defineProperty 强在哪里？答题要点有四条：第一，defineProperty 是劫持对象属性，新增属性需要额外处理，而 Proxy 代理的是整个对象，新增属性天然支持；第二，Proxy 支持数组下标变化、length 变化，defineProperty 对数组的监听需要重写数组方法；第三，Proxy 性能更好，不用遍历对象的所有属性去定义 getter/setter；第四，Proxy 支持 Map、Set、WeakMap 等更多数据结构。

Vue 的 diff 算法也是必考，但注意 Vue 2 和 Vue 3 的 diff 是有区别的。Vue 2 是双端 diff，会从新旧两个列表的头和尾同时开始比较；Vue 3 采用了快速 diff 算法，先处理相同的前缀和后缀节点，剩余部分用最长递增子序列来做最小移动。如果能把这个演进过程讲清楚，面试官好感度会上升很多。

3.3 框架选型对比题：不要只摆优缺点

大厂面试很喜欢考选型题，比如“如果让你负责一个新项目，你会选 Vue 还是 React”。很多人答这种题喜欢列优缺点，比如 React 生态好、Vue 上手快。但三年经验的答法应该是：先反问场景，再给出选择逻辑。

比如我会先说：这取决于团队已有技术栈、项目类型、目标用户和团队学习成本。如果项目是重型管理后台，团队目前都在用 Vue，那我会优先选 Vue 3，因为它的模板语法让人更容易维护；如果项目是面向 C 端的复杂交互产品，且后续要接入大量社区库，那 React 可能更合适。这样答的好处是，你展示的不是“我更喜欢哪个框架”，而是“我是怎么基于业务做技术决策的”，这正好是三年经验到高级工程师之间最需要展示的能力。

4. 工程化与性能优化关：拼的就是落地能力

4.1 构建工具链：从配置到原理的进阶路径

简历上写了 webpack 或 Vite 的话，一定要做好被追问的准备。初级问题会是“你配过哪些 loader 和 plugin”，再往下就会问“loader 和 plugin 的区别是什么、执行顺序是怎样的”。我的答法是：loader 是一个转换器，把非 JS 文件转成 webpack 可以处理的模块，在模块解析阶段执行；plugin 是一个扩展器，从打包优化到资源管理到环境变量注入都可以干，在 webpack 构建的各个生命周期节点执行。直观理解的话，loader 是“翻译官”，plugin 是“监理”。

还有一个高频考点是打包体积优化。我准备的方案包括：按需引入第三方库（比如 lodash 换 lodash-es、用 babel-plugin-import 按需引入组件库）、代码分割（动态 import 配合路由懒加载）、CDN 加载公共包、压缩图片。准备这些时，不要只泛泛地说“我用过这些”，要把每个手段对应的产物大小变化说出来，比如“引入按需加载后 vendor.js 从 1.5MB 降到了 600KB”，这样才显得真实。

Vite 在 2026 年已经是很主流的选择，面试题也喜欢问它和 webpack 的区别。核心要点是：开发环境 Vite 用原生 ES Module 提供模块，省掉了打包这一步，所以冷启动和热更新速度极快；生产环境 Vite 用 Rollup 打包，这是为了兼容性。更重要的是能说出体验差异：webpack 改一个核心模块可能要等三秒，Vite 是毫秒级；虽然 webpack 也有持久化缓存优化，但整体体验 Vite 明显更顺。

4.2 性能优化：从指标到手段的完整闭环

性能优化题的答题框架建议按“指标—瓶颈—方案—验证”四步走。先说要优化哪几个指标：首屏时间（FCP）、最大内容绘制（LCP）、交互响应（INP）、累积布局偏移（CLS）。然后说怎么定位性能瓶颈，用 Chrome DevTools 的 Performance 面板看主线程耗时，用 Network 面板看请求瀑布图。定位到瓶颈后再给方案。

常见的方案我在面试中会分成几个层面来说：网络层面有 HTTP 缓存、CDN、资源预加载（preload/prefetch）、HTTP/2 并发请求；构建层面有代码分割、tree-shaking、图片压缩和现代图片格式（webp/avif）；渲染层面有虚拟列表、懒加载、减少重排重绘、Web Worker 处理复杂计算。

三年经验面试最容易翻车的地方是只讲方案不讲验证。一定要补充你做完性能优化后的数据指标，比如“优化后 FCP 从 2.4s 降到 1.1s，LCP 从 3.8s 降到 1.6s”。如果没有真实数据，也至少要说清楚你计划用什么工具去验证，比如用 Lighthouse 跑分或者用 web-vitals 库上报到监控平台。

4.3 微前端与前端架构：中大厂绕不开的话题

微前端是最近几年中大厂面试的常客，尤其是做中后台系统的团队。我面的几家公司里，有三家都问到了微前端。最常问的问题是：为什么需要微前端？我准备的答法是从组织架构角度切入：大团队有多个子团队，各自用不同技术栈，如果都在一个代码仓库里维护，部署、发版、责任边界都会很混乱；微前端可以把每个子应用独立开发、独立部署，最后在主应用里通过路由或 iframe 组合起来。

主流微前端方案对比也要了解：qiankun 是基于 single-spa 包装的，子应用通过 HTML entry 加载，JS 沙箱是 proxy 方式实现；wujie 是腾讯的，主打无侵入性和 better-style 隔离；module federation 是 webpack5 内置的，可以让应用之间直接共享模块，但也有兼容性和版本管理的限制。面试中如果被问“你会怎么选型”，可以参考这样答：如果团队子应用多且技术栈杂，选 qiankun 更主流踩坑资料多；如果要求改造成本和侵入性最低，选 wujie；如果团队已经是 webpack5 全家桶，可以考虑 module federation 来实现组件级共享。

微前端的性能问题和样式隔离也常被追问。性能方面，通常会问首屏加载优化怎么做，我的思路是主应用负责首屏公共资源的加载，子应用走懒加载，还可以用 preload 预加载首屏高频子应用。样式隔离方面，qiankun 是通过包裹容器和目标 CSS 前缀实现，wujie 用 web component。万一子应用样式互相污染了，优先方案是约定命名空间，组件库用 CSS-in-JS 的话也可以缓解。

5. 算法与手写题：有限时间内的最优策略

5.1 三年经验的算法准备策略：量力而行，题型优先

说实话，三年经验面试算法的难度一般不会太高，除非你投的是核心前端团队或面对面算法要求高的岗位。大多数中大厂前端面试算法题的难度集中在 LeetCode 的 easy 到 middle 水平，重点题型包括：数组双指针（如两数之和变种、盛最多水的容器）、哈希表（如无重复字符的最长子串）、链表（如反转链表、环形链表）、二叉树遍历（前中后序、层次遍历）、动态规划入门（如爬楼梯、打家劫舍）。

我在准备时用的策略是优先级排序：先把高频题型刷两遍，再按标签集中刷 easy 题，最后中间隔几天做一次全真模拟，限时 30 分钟一题。时间不够的话，不推荐把 LeetCode 所有题刷完，而是要刷“面经中出现频率高的题”。你可以在 LeetCode 的题解区按“字节”“腾讯”“阿里”等公司标签筛选高频题，也可以搜各家公司的前端面经里附的算法题，把这些题单独整理到收藏夹。

5.2 手写题清单：这些几乎必考

除了 LeetCode 算法题，现场手写工具函数和 API 实现也是前端面试的保留曲目。准备三年经验面试，下面这些手写题的高频程度极高，建议逐个过一遍：

• 手写 Promise.all / Promise.race / Promise.any：注意 Promise.all 的空数组、异常处理、结果顺序，Promise.race 的竞速逻辑
• 手写深拷贝：要处理循环引用（用 WeakMap 记录）、Date、RegExp、Map、Set 等特殊对象
• 手写防抖和节流：说清楚两者区别，能用在实际场景中
• 手写事件总线 EventEmitter：实现 on、off、emit、once，注意 once 执行一次后要自动解绑
• 手写 instanceof、new、Object.create、call/apply/bind：这几个是 JS 基础和高阶知识点的结合

手写题的关键不在于把代码写正确，还在于要能讲清楚每一步为什么这样写。比如手写 new 的时候，要能说出“创建一个新对象、原型连接、执行构造函数、判断返回值类型”这四步对应的代码。面试官会通过追问来验证你是否真的理解。

6. 面试节奏与临场细节：不要在小事上摔跤

6.1 一轮到三面的考察侧重：各有各的打法

一般中大厂前端面试至少三轮技术面。一轮通常是技术功底面，主要考基础、框架和算法，题目覆盖广但深度有限；二轮是综合能力面，会进入项目深挖、场景设计、技术选型，也开始考察沟通表达；三轮是 leader 或团队负责人面，更关注你的思考方式、技术广度、对行业趋势的理解，有可能会出开放性问题。

三轮的答题策略是完全不同的。一轮要稳准狠，遇到知道的题快速答、答完整，留出时间给后面的题；不知道的直接说“这块我没深入研究”，不要瞎编，但可以补充一句“我了解过的类似方案是……”。二轮要慢一点，多展示思考过程，面试官问场景题时，先讲清楚“需求是什么、约束条件是什么”，再给方案。三轮要有高度，可以适当引入你对前端发展趋势的判断，比如 AI 辅助开发、Server Components、WebAssembly 的落地场景，但要有真实依据。

6.2 面试中不会答的题：怎么处理最得体

没有谁能答对所有题，关键是怎么处理不会的题。我在几次面试里总结出一套还算好用的应对方式：第一，遇到完全没听过的名词，先请求澄清，说“我对这个词了解有限，你指的是不是 XX 意思”，有时候只是叫法不同；第二，部分会但说不完整时，先把自己确定的部分说清楚，再承认“更深层的机制我没有实际验证过”；第三，如果是设计题没思路，可以从已知的限制条件反推，比如“如果是我做这个需求，我会先保证稳定的基础功能，再考虑扩展”。

最忌讳的是不懂装懂。面试官做这行很多年，一听就能分辨你是在编还是在讲真实经验。编一个答案，哪怕当时蒙混过去了，后面被追问一个问题，整个可信度就崩了。宁可承认不足，也要保证已经说出来的话都是可靠、真实的。

注意：面试本质上是双向选择，不要因为一两题没答好就心态崩了。把每一轮面试当作一次免费的技术交流和能力体检，答完就翻篇，准备下一场更重要。

7. 写在最后：三年经验面试的真实体感

我面完这一轮下来，最大的感受是：三年经验这个阶段，技术深度固然重要，但面试官更在意的是你有没有把技术用在真实业务里的能力。同样一道性能优化题，能背出一堆方案的人很多，但能把自己项目里的 LCP 从多少优化到多少、中间遇到了什么坑、最后怎么验证的人，才是真正能独当一面的人。

所以如果你准备跳槽，我的建议很直接：不要只看面经背答案，先把你自己正在做的项目彻底读懂，再回头看基础知识。很多面经里看起来很高深的原理，其实你项目里早就踩过了，只是没有系统的语言组织。把项目里踩过的坑、做过的决策、产出的数据完整复盘一遍，你就已经超过了大部分只刷题不看项目的候选人。

下篇我会接着聊项目深挖怎么答、场景设计题怎么拆、HR 轮次有哪些坑、以及拿到多个 offer 之后怎么选择。如果你正在准备跳槽，可以先动手把手里的项目复盘起来，有什么拿不准的，欢迎留言区一起讨论。