144 lines
10 KiB
Plaintext
144 lines
10 KiB
Plaintext
---
|
||
title: 前端面试——权威概述和准备指南
|
||
description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指南。 了解所有内容：什么可以期望，不同的面试问题类型，以及如何准备。
|
||
---
|
||
|
||
前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如 Google 和 Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
|
||
|
||
近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
|
||
|
||
但是，许多现有的软件工程面试资源都针对通用软件工程角色而不是一种更小众的和小众的前端工程师领域;你几乎找不到有关前端系统设计的任何资源。 这些因素加上可能的领域主题的广度使得准备前端面试是一个漫长，乏味且困难的过程。
|
||
|
||
请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以：
|
||
|
||
1. 学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-guidebook/resume)。
|
||
2. 学习适用于所有问题类型的**重要的前端概念和技术**。
|
||
3. 准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。
|
||
4. [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。
|
||
5. 浏览建议的[**学习计划**](/get-started)，并采用**结构化准备方法**。
|
||
|
||
## 准备精彩简历
|
||
|
||
您的简历是给潜在雇主留下印象的第一次机会，因此对于得到梦想公司的短名单至关重要。
|
||
|
||
如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。
|
||
|
||
虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
|
||
|
||
## 按问题类型准备
|
||
|
||
前端面试环节可能有许多不同的形式，并且每家公司的做法都不同。 为了有效地做好准备，您应该了解您面试的公司的不同面试阶段，每个阶段内的各种环节以及每个环节中将要问的问题类型。
|
||
|
||
每种问题格式都有自己的挑战和怪癖。 我们将介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专页。
|
||
|
||
### 编程问题
|
||
|
||
编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到：
|
||
|
||
1. **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-guidebook/algorithms)的相关内容。
|
||
2. **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-guidebook/javascript)。
|
||
3. **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
|
||
|
||
公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。
|
||
|
||
### 系统设计问题
|
||
|
||
系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计 API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
|
||
|
||
系统设计面试通常仅提供给高级别的候选人，并且所需的系统可以是以下类型和示例之一：
|
||
|
||
1. **分布式系统**：Twitter 后端，URL 缩短器
|
||
2. **客户端应用程序**：新闻推送，照片共享应用程序
|
||
3. **复杂的用户界面组件**：自动完成，下拉菜单，模态
|
||
|
||
大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品更相关于前端工程。
|
||
|
||
[了解关于前端系统设计的更多信息](/front-end-interview-guidebook/system-design)
|
||
|
||
### 测验问题
|
||
|
||
测验问题也称为琐事问题，是用于测试您对领域的理解的短问题。 每个问题不应花费超过一到两分钟的时间。
|
||
|
||
通常不会有整个面试环节只问测验问题，但它们可能会在其他面试环节中出现。
|
||
|
||
[阅读有关测验问题的更多信息](/front-end-interview-guidebook/quiz)。
|
||
|
||
## 行为问题/面试
|
||
|
||
在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合该工作和成熟水平。
|
||
|
||
行为面试背后的理念是，过去的行为和经验是了解某个人将来行为的良好指标，因此面试官将提出旨在让您描述您所面临的具体情况以及您如何应对它们的问题，以更好地了解您的个人能力。
|
||
|
||
行为面试是一个大型主题，我们[撰写了一个完整的指南](/behavioral-interview-guidebook)。
|
||
|
||
## 典型的招聘流程
|
||
|
||
大多数公司将有类似以下的招聘流程：
|
||
|
||
1. **初步筛选**
|
||
- 招聘人员通话（可能会问有关测验问题）
|
||
- 自动分级的在线评估或接回家的项目
|
||
2. **电话筛选**
|
||
- 编程（实现算法，JavaScript 函数或构建用户界面）
|
||
3. **完整循环**
|
||
- 编程环节（实现算法，JavaScript 函数或构建用户界面）
|
||
- 系统设计环节
|
||
- 行为环节
|
||
|
||
最可靠的方法是询问招聘公司有关该角色的面试流程。 良好的公司甚至会准备详细的文件来解释每个面试阶段以及有关资源，指导候选人准备面试。 对于看到大量申请人的大公司来说，有人会通过[Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/)和[Reddit](https://www.reddit.com/)等平台分享他们的面试经验。
|
||
|
||
\*\*您必须知道要在面试中期望哪些问题类型，否则您将无处不飞，并且无法有效地准备。
|
||
|
||
### 回合类型矩阵
|
||
|
||
以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
|
||
|
||
| 环节 | 测验 | 算法 | UI | JavaScript | 系统设计 |
|
||
| ------------ | ---- | ---- | --- | ---------- | -------- |
|
||
| 在线评估 | 中等 | 高 | 高 | 高 | 无 |
|
||
| 招聘人员通话 | 中等 | 无 | 无 | 无 | 无 |
|
||
| 接回家的项目 | 无 | 无 | 高 | 中等 | 中等 |
|
||
| 编程 | 低 | 高 | 高 | 高 | 低 |
|
||
| 行为问题 | 低 | 无 | 无 | 无 | 无 |
|
||
| 系统设计 | 低 | 无 | 低 | 无 | 高 |
|
||
| 招聘经理 | 低 | 无 | 无 | 无 | 低 |
|
||
|
||
### 公司问的问题类型
|
||
|
||
以下是美国顶尖公司问的问题类型摘要。
|
||
|
||
| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为面试 |
|
||
| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
|
||
| 爱彼迎 | 否 | 是 | 是 | 是 | 否 | 是 |
|
||
| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||
| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
||
| 字节跳动 | 是 | 是 | 是 | 是 | 否 | 是 |
|
||
| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 |
|
||
| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 |
|
||
| 谷歌 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||
| 领英 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
||
| Lyft | 否 | 否 | 是 | 是 | 是 | 是 |
|
||
| 微软 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||
| 推特 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||
| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 |
|
||
|
||
**问题类型传奇**
|
||
|
||
- **测验**：封闭的测验/问答样式问题。
|
||
- **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
|
||
- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。
|
||
- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。
|
||
- **系统设计**：设计系统并讨论体系结构及其组成部分。
|
||
- **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
|
||
|
||
## 学习和实践
|
||
|
||
继续阅读，了解如何准备以下前端面试格式/问题类型：
|
||
|
||
- [编程问题](/front-end-interview-guidebook/coding)
|
||
- [算法问题](/front-end-interview-guidebook/algorithms)
|
||
- [JavaScript 问题](/front-end-interview-guidebook/javascript)
|
||
- [用户界面问题](/front-end-interview-guidebook/user-interface)
|
||
- [系统设计问题](/front-end-interview-guidebook/system-design)
|
||
- [测验问题](/front-end-interview-guidebook/quiz)
|