前端开发工程师面试题及应答思路
作者 Aaron Cao · 更新于
前端面试考察 JavaScript 基础、浏览器渲染页面的原理、CSS 布局、对某一框架的深入理解、性能优化与无障碍设计。大多数面试流程还包括在共享编辑器中的实时界面搭建环节，以及组件或前端系统设计环节。
最常被问到的 JavaScript 和浏览器问题有哪些？
候选人常常准备了框架相关的琐碎知识点，结果却被问到事件循环是如何为 Promise 和定时器排序的。本节介绍几乎每场前端面试都会考察的基础知识，这些内容在涉及任何框架之前就会出现。预计会先问语言本身，再问浏览器如何处理你的代码。
- 闭包与作用域：闭包捕获的是什么，以及为什么用
var声明的循环变量会重复打印同一个值。 - 事件循环：同步代码、微任务（Promise 回调）与宏任务（定时器）的执行顺序。
- this 与绑定：箭头函数与普通函数有何不同，以及
bind会改变什么。 - 渲染管线：什么会触发布局而不是绘制，以及为什么在写入循环中读取布局会导致布局抖动。
- 事件：冒泡、捕获，以及长列表上的事件委托。
- 网络：CORS、缓存响应头，以及从输入网址到首次绘制之间发生了什么。
特定语言的深入内容，参见题库中心中的 JavaScript、TypeScript 和 React 题库。
CSS、无障碍设计和性能相关问题是什么样的？
这三个领域是区分前端专精工程师与全栈通才的关键，因此面试官会直接深入考察。
- CSS 布局：什么时候该用 Flexbox、什么时候该用 Grid，优先级如何解决冲突，以及层叠上下文如何影响
z-index。 - 响应式设计：媒体查询与容器查询的区别，以及如何采用移动优先的方式构建。
- 无障碍设计：先用语义化 HTML 再考虑 ARIA、键盘焦点顺序、为表单输入添加标签，以及颜色对比度。
- 性能：核心网页指标（LCP、INP、CLS）、代码分割、图片格式，以及懒加载。
- 安全：跨站脚本攻击、为什么要转义用户内容，以及内容安全策略的作用。
好的回答会点明权衡取舍。「这里我会用 Grid，因为布局是二维的」比罗列一堆属性更有说服力。
实时编码和前端系统设计环节是怎样进行的？
大多数面试流程都包含一个实操搭建环节。典型的题目是：搭建一个自动补全输入框，要求能拉取建议列表、对按键输入做防抖、支持方向键导航，并忽略过期的响应。面试官会观察你如何组织状态、处理加载和错误情况，以及如何让组件保持无障碍可用。
前端系统设计是这个环节的进阶版本。你可能会被要求设计一个信息流或协作编辑器：状态放在哪里、数据如何获取和缓存、如何分页，以及组件树如何拆分。在一家产品公司面试高级职位的前端工程师，可能整整一个小时都在讨论信息流，而最好的回答会谈到加载骨架屏、乐观更新，以及在不稳定的移动网络下会发生什么。
关于实时搭建这种形式本身，参见面试类型中心。
应该如何练习这些问题？
要大声练习。前端环节看重讲解：说出你为什么选择受控输入，或者为什么在某个时机做防抖，这些都是评分的一部分。先不用任何框架从零搭建三四个小组件，再用你简历上列出的框架重新实现一遍。
模拟面试页面提供由 AI 面试官进行追问的口头模拟练习。在实时视频通话中，SubcueAI 可以从对话中提炼出结构化的答题要点，但它也有明确的局限：有监考的测评、录屏，以及公司托管的笔记本电脑都不在其能力范围内，而实时搭建环节中共享的屏幕上有什么就会显示什么。