Frontend Engineer 面试准备指南：React、JavaScript、前端八股和 Frontend System Design 怎么准备

Frontend Engineer 面试这两年明显变得更分裂：有的公司像传统 SDE 一样考 LeetCode，有的公司会问 React / JavaScript / browser internals，有的公司会让你做 UI coding，有的公司开始加入 frontend system design，有的公司甚至先用 AI video screen 问项目、协作和工程判断。

很多北美华人候选人准备前端面试时会走两个极端：要么只刷 LeetCode，要么只刷 GreatFrontEnd 风格的组件题。实际面试里，前端岗位经常是多种信号混合考察：你要会写代码，也要懂浏览器、状态管理、性能、accessibility、工程协作和产品实现。

这篇文章会把 Frontend Engineer 面试拆成 6 条线，适合准备 TikTok、Roblox、Figma、Canva、Navan、Apple、Microsoft、Google、Meta 以及各种 SaaS startup 前端岗位的候选人。

前端面试常见结构

常见组合包括：

Recruiter / AI video screen
JavaScript coding
React component coding
HTML / CSS / browser fundamentals
前端八股和工程经验
Frontend system design
project deep dive
behavioral / collaboration

不同公司侧重点差别很大。比如有些岗位第一轮会直接问 HTML semantic tags、event bubbling、closure、this、prototype chain；有些岗位会要求设计一个 feed app、status dashboard 或 scalable SaaS web app；还有些岗位会重点看你怎么和 PM、Designer、Backend 合作交付功能。

所以前端面试不能只准备一套题库。你要把准备拆成基础、coding、框架、系统设计和沟通五层。

JavaScript 基础：别只会背定义

JavaScript 面试常见考点：

scope 和 closure
this binding
prototype chain
event loop
promise / async / await
hoisting
shallow copy / deep copy
equality comparison
array / object transformation
debouncing / throttling
event delegation

很多题不是让你定义 closure，而是给一段代码让你判断输出。你需要能按执行顺序解释：

变量在哪里声明。
函数在哪里创建。
this 是 call-site 决定还是 lexical binding。
microtask 和 macrotask 谁先执行。
object reference 有没有被共享。

如果你只背“closure 是函数记住 lexical environment”，面试中仍然容易卡住。更好的练法是每天手推 10 段小代码，然后用英文讲清楚每一步。

HTML / CSS：前端八股不是低级题

不少候选人会轻视 HTML / CSS，觉得只要会 React 就够了。实际面试中，前端八股经常会问：

semantic HTML
accessibility / ARIA
box model
flex / grid
responsive layout
z-index / stacking context
event bubbling / capturing
form behavior
image loading and lazy loading
CSS specificity

这些题的考点不是“记忆”，而是你是否真的做过可维护的产品 UI。

比如 semantic HTML 不是把 div 换成 section。你要能讲：

屏幕阅读器如何理解页面结构
button 和 link 的区别
form label 为什么重要
keyboard navigation 怎么设计
heading hierarchy 如何影响可访问性和 SEO

对于在美国找工作的华人候选人，accessibility 是很容易被低估的部分。很多美国公司会把它当成成熟前端工程师的基本素养。

React：重点是状态和副作用

React 面试高频问题：

controlled vs uncontrolled component
state lifting
hooks rules
useEffect dependency
memoization
context vs props
stale closure
rendering behavior
error boundary
suspense / lazy loading
component API design

React coding 题常见形式：

autocomplete
todo / editable list
tabs
modal
data table
pagination
infinite scroll
debounce search
nested comment
form validation

面试官通常不只看“能不能显示出来”，还会看：

state 是否放在合理位置
component 边界是否清楚
loading / error / empty states 是否处理
输入是否防抖
API response 是否有 race condition
accessibility 是否基本合格
代码是否容易扩展

如果你写 autocomplete，不要只写一个 input 加 map。你应该主动讲：

query state
debounced query
request cancellation
keyboard selection
cache
loading and error state
no result state
selected item behavior

这会把你从“会写 demo”提升到“能做产品功能”。

Frontend Coding：小题也要写得像工程代码

前端 coding 不一定是复杂算法。常见题型包括：

template string replacement
flatten nested data
deep get / deep set
implement debounce
event emitter
promise pool
retry with backoff
normalize API response
parse query string
transform table data
simple virtual DOM / diff 思路

这类题通常不难，但容易因为边界和沟通扣分。

一个稳定答题流程：

先确认 input / output。
问清楚 duplicate、missing key、invalid value 怎么处理。
写最简单正确版本。
加测试样例。
再处理 edge cases。
最后讨论复杂度和扩展。

比如 template replacement 题，不要只处理 {name}。你还要问：

placeholder 会不会重复
key 不存在时保留原文还是替换为空
value 是否一定是 string
是否需要 escape
nested key 要不要支持
malformed token 怎么处理

这些问题不一定都要实现，但你要让面试官看到你在做 requirement clarification。

Frontend System Design：不要套后端模板

Frontend system design 常见题：

design a feed app
design a notification center
design a dashboard
design an analytics UI
design a collaborative editor
design an autocomplete search box
design a file upload UI
design a design tool sidebar
design a real-time status page

它和传统 backend system design 不一样。前端侧重点通常是：

component architecture
data fetching strategy
client-side state
server state cache
rendering performance
real-time update
optimistic update
error recovery
accessibility
analytics and observability
API contract

如果题目是“设计一个 feed app to pull feeds and show status”，你可以这样拆：

页面结构：feed list、filter、status badge、detail panel
数据模型：feed item、status、pagination cursor、last updated time
API：list feed、get detail、mark read、subscribe updates
state：server cache、local UI state、selected item、filter state
performance：virtualized list、incremental loading、image lazy loading
real-time：polling、SSE、WebSocket 的取舍
failure：stale data、retry、offline、partial failure
accessibility：keyboard navigation、live region

这比只说“React + Redux + WebSocket”要强很多。

Project Deep Dive：前端也要讲 impact

前端候选人常犯的错误是只讲“我做了页面”。面试官真正想听的是：

这个功能解决了什么用户问题
你怎么和 PM / Designer / Backend 对齐
技术难点是什么
你做了哪些 trade-off
如何衡量体验提升
如何处理性能、兼容性、accessibility
线上问题怎么 debug
之后如果重做会改什么

一个好的前端项目故事可以这样组织：

用户场景：谁在什么情况下使用这个功能。
约束：时间、API、设计、兼容性、性能。
决策：组件结构、状态管理、数据请求、错误处理。
结果：指标、用户反馈、开发效率、稳定性。
反思：下一版怎么优化。

如果你目标是 senior frontend，project deep dive 不能只停留在实现。你要讲到 design system、cross-team coordination、migration plan、tech debt 和 developer experience。

AI Video Screen 怎么准备

一些公司会用 AI screen 或 asynchronous video interview。常见问题包括：

briefly introduce your career
describe your frontend experience
tell me a project you are proud of
how do you handle bugs
how do you collaborate with PM and Designer
how do you build scalable SaaS web apps
why this role

AI screen 的风险是：你没有面试官反馈，也没有追问机会，所以回答必须结构清楚。

建议每个问题控制在 60-90 秒：

10 秒背景
30 秒具体例子
20 秒行动和判断
10 秒结果和反思

不要背稿，但要准备稳定的英文表达。尤其是北美华人候选人，常见问题不是内容不够，而是回答太散，听起来像在翻译中文思路。

一周前端面试冲刺计划

如果只剩一周，可以这样安排：

天数	重点
Day 1	JavaScript execution、closure、this、prototype、event loop
Day 2	React hooks、state、effect、component API
Day 3	3 个 React coding 小组件
Day 4	HTML / CSS / accessibility / browser
Day 5	frontend system design 2 题
Day 6	project deep dive 和 behavioral
Day 7	mock interview，限时表达和查漏

如果你同时要准备 SDE coding，可以参考这篇 SDE 面试准备路线。如果你要准备更系统的面试表达，可以看 Technical Interview Communication Skills。

最后

Frontend 面试不是“比后端简单”。它只是考察面不同：你需要同时证明自己懂产品、懂用户体验、懂浏览器、懂工程质量，也能和跨职能团队一起把功能交付上线。

如果你是北美华人候选人，建议不要把前端准备压缩成刷题。你需要准备一套能在英文面试里讲清楚的前端工程叙事：从 UI 到 state，从 API 到 performance，从 bug 到 trade-off，从个人实现到团队协作。这才是前端面试真正能转化成 offer 的能力。

如果你需要针对具体公司做 mock，可以看我们的 SDE Interview Coaching。