前端工程师面试攻略：从 DOM 到系统设计

前端工程师面试和通用软件工程面试不一样。你仍然会遇到算法题，但你还要面对框架深度拷问、CSS 调试难题、无障碍审查，以及一种独特的系统设计——关注的是客户端架构而非分布式后端。

这份攻略覆盖前端候选人需要准备的每个维度，并为每种轮次类型提供具体技巧。无论你的目标是创业公司还是大厂，核心考察领域是一样的。

前端面试全景

一个典型的前端面试流程包含 4-6 轮：

第 1 轮：JavaScript 基础。 闭包、原型继承、事件循环、Promise 链式调用和 ES Module 语义。这些问题测试你是否理解语言本身，而不仅仅是建立在它之上的框架。

第 2 轮：框架深度。 通常是 React，但在特定公司也会遇到 Vue 和 Angular。预期涉及组件生命周期、状态管理模式、渲染优化和 Hooks（或其等价概念）。

第 3 轮：CSS 和布局。 从设计稿构建一个响应式组件。涉及 Flexbox 与 Grid 的对比、选择器优先级、级联层和 CSS 变量。通常在在线代码沙盒中现场完成。

第 4 轮：编程 / 算法。 DOM 操作任务、数据转换问题或适配 JavaScript 的经典算法题。树遍历很常见，因为 DOM 本身就是一棵树。

第 5 轮：前端系统设计。 设计搜索自动补全、实时聊天界面、带懒加载的图片画廊或表单构建器。这考察你在系统层面思考状态、性能、缓存和用户体验的能力。

第 6 轮：行为面。 与其他工程角色相同。协作、技术分歧、项目主人翁精神。

JavaScript 基础：实际会考什么

大多数候选人过度准备算法而忽视 JavaScript 核心概念。以下是出现频率最高的主题以及面试官真正在考察什么。

闭包与作用域

面试官不会问"什么是闭包？"他们会给你一段代码，问输出是什么。真正的考点是你能否在嵌套函数作用域中追踪变量绑定。

需要内化的关键概念：

• 闭包捕获的是变量，不是值。如果变量在闭包创建后发生变化，闭包看到的是更新后的值。
• 经典的 for 循环 + var 问题：var 是函数作用域，循环中所有闭包共享同一个变量。用 let（块级作用域）或 IIFE 修复。
• 闭包实现了模块模式、记忆化和偏函数应用。准备好实现其中任何一个。

事件循环与异步执行

你需要预测混合了 setTimeout、Promise、queueMicrotask 和同步操作的代码的执行顺序。关键模型：

1. 同步代码先执行（调用栈）
2. 微任务其次（Promise 回调、queueMicrotask）
3. 宏任务最后（setTimeout、setInterval、I/O 回调）
4. 每个宏任务之后，所有待处理的微任务会在下一个宏任务之前执行

练习方法： 写 10 个混合同步代码、Promise 和 setTimeout 的代码片段。预测输出顺序，然后验证。做到连续 10/10 正确为止。

原型继承

即使有 class 语法，JavaScript 的继承本质上是基于原型的。需要掌握：

• 解释原型链查找过程
• 区分自有属性和继承属性
• 用 Object.create 实现经典继承模式
• 解释为什么箭头函数没有自己的 this 和 prototype

Promise 与错误处理

除了基本的 async/await，面试官会测试边界情况：

• 在 async 函数内部 throw 与返回一个 rejected promise 有什么区别？
• Promise.allSettled 在错误场景下与 Promise.all 有何不同？
• 实现一个带指数退避的重试包装器，尝试 N 次
• 实现一个并发任务队列，将并行度限制为 K 个

这些实现题同时考察你对 Promise 的理解和控制流管理能力。

React 深度：超越基础

如果你面试的是 React 岗位，预期的问题远不止"解释 useState"。

渲染行为

• React 什么时候重新渲染？ 组件在以下情况重新渲染：自身 state 变化、父组件重新渲染或消费的 context 发生变化。单纯的 props 变化不触发重新渲染——是父组件的重新渲染触发的。
• React.memo： 包裹组件以在 props 未变化时跳过重新渲染（浅比较）。知道它何时有帮助、何时徒增开销。
• useMemo vs. useCallback： useMemo 缓存计算值，useCallback 缓存函数引用。两者都接受依赖数组。过度使用损害可读性而不改善性能。

状态管理模式

准备好讨论以下方案的权衡：

• 局部状态 (useState)： 用于纯 UI 状态，如表单输入、展开/折叠、手风琴切换
• 状态提升： 兄弟组件需要共享状态时，提升到最近的公共父组件
• Context： 用于不常变化的全局数据（主题、语言、认证状态）。不适合频繁更新的状态，因为所有消费者都会重新渲染
• 外部状态库 (Redux, Zustand, Jotai)： 用于复杂、频繁更新的共享状态。说明何时值得引入额外复杂度

Hooks 模式

自定义 Hooks 是面试的热门考点。常见要求：

• 实现 useDebounce，对值进行防抖处理
• 实现 usePrevious，返回上一次渲染的值
• 实现 useIntersectionObserver 用于懒加载
• 实现 useFetch，包含 loading、error 和 data 状态

模式永远相同：将内置 Hooks (useState, useEffect, useRef) 组合成可复用的抽象。实现要精简，API 要清晰。

Server Components 与现代模式

2026 年的面试可能涉及 React Server Components：

• 何时使用 Server Components 与 Client Components
• Streaming 和 Suspense 如何协同工作
• Server Components 中的数据获取模式与 Client Components 中使用 useEffect 的对比
• Server Components 与 Next.js 等框架中 App Router 的关系

CSS：被大多数候选人低估的轮次

CSS 轮是自信的 JavaScript 开发者翻车的地方。面试通常要求在 30-45 分钟内根据视觉规格构建一个组件。

布局基础

Flexbox： 掌握默认轴向、flex-grow/shrink/basis 如何协作、以及如何用三个属性实现水平和垂直居中。大多数 CSS 轮的解法以 Flexbox 为主。

Grid： 了解与 Flexbox 的区别（2D vs. 1D），如何定义 grid 模板，以及何时 Grid 是更好的选择（仪表盘布局、图片网格、任何需要行列双向控制的布局）。

定位： relative、absolute、fixed、sticky。关键陷阱是 absolute 定位相对于最近的定位祖先元素，而非视口（除非那个祖先是 body）。

响应式设计

• 移动优先的媒体查询（min-width 断点）
• 使用 clamp() 实现流式排版
• Container queries 实现组件级响应式
• 除边框和图标外避免固定像素宽度

常见 CSS 面试挑战

• 构建一个可折叠为汉堡菜单的响应式导航栏
• 创建从手机端 1 列到桌面端 3 列自适应的卡片网格
• 实现带背景遮罩、居中内容和滚动锁定的模态框
• 制作带浮动标签和验证状态的表单样式

每个挑战都应先关注语义化 HTML，再写 CSS。面试官会注意你写的是一堆 div 还是正确使用了 nav、main、section 和 button 等语义化元素。

前端系统设计

这是区分高级候选人和中级候选人的轮次。题目听起来简单，但需要对架构的深入思考。

常见题目

搜索自动补全。 考虑：输入防抖、结果缓存、处理乱序响应、键盘导航、无障碍 (ARIA combobox 角色)、大结果集的性能。

带无限滚动的图片画廊。 考虑：虚拟化（只渲染可见图片）、Intersection Observer 实现懒加载、占位尺寸防止布局偏移、图片格式优化 (WebP, AVIF)、长时间滚动的内存管理。

实时协作编辑器。 考虑：OT 或 CRDT 处理冲突、WebSocket 连接管理、乐观 UI 更新、撤销/重做栈、光标位置同步、离线支持。

表单构建器（拖拽）。 考虑：表单字段的组件模型、校验 schema、状态序列化、拖拽库选择、拖拽交互的无障碍性、预览/发布工作流。

前端系统设计回答框架

1. 澄清需求 (3-5 分钟)。 支持哪些浏览器/设备？预期数据量？是否需要实时？离线支持？
2. 组件架构 (5-10 分钟)。 画组件树。确定 state 在哪里存放。定义数据流向。
3. 数据层 (5-10 分钟)。 API 契约、缓存策略、乐观更新、错误状态。
4. 性能考量 (5 分钟)。 代码分割、懒加载、虚拟化、记忆化。
5. 无障碍 (3-5 分钟)。 键盘导航、屏幕阅读器支持、ARIA 属性。
6. 权衡与替代方案 (5 分钟)。 你选择了什么，放弃了什么？

Interview AiBox 的功能全景在实践中展示了很多这些前端模式——实时流式响应、多语言 UI 和响应式组件架构。

前端特有的编程轮

前端编程题通常属于和标准算法面试不同的类别：

DOM 操作。 实现一个查找 DOM 树中最深节点的函数。展平嵌套 DOM 结构。构建一个简单的虚拟 DOM diff 算法。

数据转换。 给定一个带 parent ID 的扁平对象数组，构建树结构。将 API 响应转换为适合特定 UI 组件的格式。

异步编排。 实现一个带并发限制的多 API 并行请求函数。构建指数退避的重试机制。创建同时处理前沿和后沿的防抖函数。

从零构建 UI 组件。 不用库实现搜索自动补全。实现手风琴组件。创建简化版日期选择器。这些同时考察 DOM 知识和状态管理。

备战策略

编程准备时间的 60% 花在标准算法（数组、树、图、动态规划），40% 花在前端专项题。很多候选人犯的错误是把前端面试当纯算法测试。招聘前端专家的公司想看到你能构建东西，而不只是解决抽象问题。

Interview AiBox 的实时辅助可以帮你在练习前端专项编程题时获得即时反馈。

前端工程师的行为面

行为面的问题在不同工程角色中是一样的，但你的故事应该展示前端特有的优势：

• 与设计师协作： "设计团队给了一份在响应式实现上技术复杂度很高的设计稿。我提出了一个简化版本，保留了用户体验同时减少了 40% 的实现时间。我用一个原型带设计师过了一遍技术约束。"

• 性能主人翁： "我注意到我们最大的页面首次可交互时间达 4.2 秒。我做了性能分析，识别出三个阻塞渲染的脚本，实现了代码分割，将 TTI 降到了 1.8 秒。这与转化率 12% 的提升相关。"

• 无障碍倡导： "我们的结账流程未通过 WCAG 2.1 AA 合规检查。我创建了无障碍审计，按用户影响优先排序修复项，在 15 个组件中实现了键盘导航和屏幕阅读器支持。修复后审计显示 100% 合规。"

用 STAR 方法 2.0 框架准备 5-6 个故事。每个控制在 90 秒以内并包含具体数据。

4 周前端面试备战计划

第 1 周：基础。 JavaScript 核心——闭包、事件循环、Promise、原型。每天 2 道题。每天读一篇 MDN 深度文章。

第 2 周：框架与 CSS。 React Hooks、状态管理、Server Components。CSS 布局挑战——每天从零构建一个组件。复习自然表达技巧让你的思路表达更清晰。

第 3 周：系统设计与编程。 每隔一天做一道前端系统设计题。编程题聚焦 DOM 操作和数据转换。练习出声解释你的架构决策。

第 4 周：模拟面试与打磨。 执行60 分钟模拟面试覆盖所有轮次类型。聚焦最弱的领域。至少做两次完整的行为面练习。

FAQ

前端面试需要算法能力很强吗？

需要，但深度因公司而异。大厂（Google、Meta、Amazon）对前端的算法题难度和后端一样。创业公司和前端导向的公司更侧重实战编程——DOM 操作、数据转换和 UI 组件实现。两者都要准备，但根据目标公司调整投入比重。

需要同时准备 React 和原生 JavaScript 题吗？

需要。即使是 React 重点的面试也会包含原生 JavaScript 题来测试基础功底。理解 React 底层如何工作（虚拟 DOM diffing、Fiber 架构、调和过程）需要你懂原生 DOM API。分配 40% 给原生 JS，60% 给框架话题。

CSS 在面试中有多重要？

比大多数候选人预期的更重要。在 Stripe、Airbnb、Shopify 等公司，CSS 轮是淘汰性的——出色的算法表现无法弥补无法构建布局的不足。即使在算法为重的公司，在系统设计轮展示 CSS 能力也是差异化因素。每周至少练两次根据视觉规格构建组件。

前端系统设计和后端系统设计有什么区别？

前端系统设计关注组件架构、状态管理、渲染性能、客户端缓存和用户体验。后端系统设计关注分布式系统、数据库 schema、消息队列和水平扩展。前端岗位需要前端系统设计过硬。后端系统设计知识是加分项但不是主要考核点。

如果遇到不熟悉的框架怎么办？

坦诚："我没有在生产环境中使用过 Vue，但基于我从 React 中了解的组件模型原则，我会这样思考这个问题。"面试官关心的是你对不熟悉工具的推理能力，而非记住 API 细节。聚焦通用概念：组件生命周期、响应式、状态管理和渲染策略。

下一步

• 用前端视角执行 60 分钟模拟面试协议
• 阅读编程与系统设计混合轮攻略了解混合轮策略
• 浏览 Interview AiBox 功能全景搭建你的练习环境
• 下载 Interview AiBox，今天就开始前端面试练习