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