01.md

# 介绍

> 原文：<https://www.frontendinterviewhandbook.com/introduction/>



## 这是什么？[](#what-is-this "Direct link to heading")

与典型的软件工程师工作面试不同，前端面试不太强调算法，更多的问题是关于前端领域的复杂知识和专业知识——HTML，CSS，JavaScript，等等。

许多前端面试高度关注领域知识，并将它们应用到现实世界的场景中。你可能会发现，当你面试一个前端职位的时候，光是埋头苦读并不足够，但这是一件好事！前端面试倾向于测试更实用的概念，并与真实世界前端开发相关。但这并不意味着你不需要熟悉基本的数据结构和算法概念——只是不太强调它们，可能你会得到更简单的算法问题。

虽然有一些现有的资源可以帮助前端开发人员准备面试，但它们不像软件工程师面试的材料那样丰富。在现有的资源中，最有帮助的题库可能是[前端开发人员面试问题](https://github.com/h5bp/Front-end-Developer-Interview-Questions)。不幸的是，这些问题在网上没有太多完整和令人满意的答案。这本手册回答了这些琐事式的问题，以及其他前端面试形式的信息和指导。

然而，我最近使用并评论了 [Great Front End](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=introduction&fpr=frontendinterviewhandbook) ，一个自称为“前端面试 LeetCode”的平台。它包含由前 FAANG 高级工程师编写的前端面试问题和答案，并有各种格式的问题和答案:编码和琐事风格的前端问题。我发现它非常有用，我强烈推荐你去看看！

## 前端面试的一般技巧[](#general-tips-for-front-end-interviews "Direct link to heading")

不管给你的是哪种形式，有一件事是真的——你需要在你的前端基础上非常强大，并不断向你的面试官展示你对它们的掌握。

非常熟悉以下概念:

*   CSS:特异性，盒子模型，布局，定位
*   JavaScript: `this`关键字、原型、闭包、异步代码、承诺、定时器(`setTimeout`、`setInterval`)
*   JavaScript 设计模式:观察者模式、模块模式
*   HTML:事件委托(几乎在每个面试中都很有用)、DOM 遍历、DOM 操作、表单验证和提交
*   至少是普通的 JS 或 jQuery。并不是所有的面试都允许你使用 React，因为他们希望看到对基础知识的掌握

在 Glassdoor 上寻找公司的面试问题。前端问题并不丰富，但仍然可以找到一些。很多公司都用类似的问题。

## 前端面试格式[](#front-end-interview-formats "Direct link to heading")

与软件工程面试不同，前端面试的形式不太为人所知，在整个行业中也没有标准化。我们努力在网上搜索热门公司提出的前端面试问题，有些问题经常出现。一般来说，您应该熟悉以下问题和格式:

### 琐事问题[](#trivia-questions "Direct link to heading")

测试你的知识并有清晰的非主观答案的简短问题。招聘人员通常会问这些问题，因为即使是非技术人员也可以验证答案的准确性。以下是一些例子:

*   Java Script 语言
    *   什么是终结？
    *   承诺和回拨有什么区别？
    *   解释 JavaScript 中的`this`关键字。
*   半铸钢ˌ钢性铸铁(Cast Semi-Steel)
    *   CSS 盒子模型是什么？
    *   各种 CSS `position`属性及其差异。

[**阅读更多关于前端琐事提问→**](/trivia/)

### JavaScript 编码[](#javascript-coding "Direct link to heading")

这是 LeetCode 风格的算法题的前端版本。在 JavaScript 中实现一个函数，可以是 Lodash/下划线中的实用函数(如`throttle`)，也可以是 JavaScript 语言/DOM API 的 polyfill(如`Array.prototype.filter`、`Promise.all`、`document.getElementsByClassName()`)。

*   实现`Array.prototype`功能:`map`、`reduce`、`filter`、`sort`。
*   实现 DOM API:`getElementsByClassName`。
*   `debounce` / `throttle`。
*   实现承诺/承诺相关 API:`Promise`，`Promise.all`。

### 用户界面编码[](#user-interface-coding "Direct link to heading")

使用 HTML、CSS 和 JavaScript 构建用户界面(可以是 UI 组件、应用程序或游戏)。

*   成分
    *   自动完成(**非常流行**)
    *   图片库
    *   图像传送带
    *   工具提示组件
    *   星级小工具
*   应用程序
    *   构建井字游戏
    *   用可移动的棋子搭建棋盘

[**了解更多前端编码问题→**](/coding/algorithms/)

### 算法编码[](#algorithm-coding "Direct link to heading")

LeetCode 风格的算法编码问题，评估你的核心数据结构和算法技能。你可以被问到任何关于 LeetCode 的问题，可能会被要求用 JavaScript 解决这些问题。

### 系统设计[](#system-design "Direct link to heading")

描述并讨论你将如何构建一个 UI 组件/应用/游戏及其架构。这是系统设计问题的前端版本。例如，描述您将如何在聊天应用程序中构建表情符号自动完成功能，它将具有哪些 API，该功能有哪些组件，如何确保它具有良好的性能，UX 等。

*   设计一个图像转盘组件。
*   设计一个电子邮件客户端应用程序。

[**了解更多前端系统设计→**](/front-end-system-design/)

Be interview-ready with Great Front End

[大前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)有各种前端面试问题的问答，[学习计划](https://www.greatfrontend.com/get-started?fpr=frontendinterviewhandbook)，还有[庞大的题库](https://www.greatfrontend.com/questions/coding?fpr=frontendinterviewhandbook)！

## 公司面试格式[](#company-interview-formats "Direct link to heading")

通过广泛的研究，以下是公司在前端面试的技术回合中询问的不同类型的格式。如果你在面试某些公司的前端工程职位，做好相应的准备！

*图注:✅:问过，❌:没问过，⚠️:没有数据*

| 公司 | 琐事 | 算法 | JavaScript 编码 | UI 编码 | 系统设计 |
| :-- | :-: | :-: | :-: | :-: | :-: |
| [**Airbnb**](/companies/airbnb-front-end-interview-questions/) | -好的 | 981 号房 | 981 号房 | 981 号房 | -好的 |
| [**亚马逊**](/companies/amazon-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | 981 号房 |
| [**苹果**T3】](/companies/apple-front-end-interview-questions/) | ⚠️ | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
| [**【字节舞/tik Tok】**](/companies/bytedance-tiktok-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | -好的 |
| [**收纳箱**](/companies/dropbox-front-end-interview-questions/) | -好的 | ⚠️ | 981 号房 | 981 号房 | 981 号房 |
| Facebook/Meta | 981 号房 | -好的 | 981 号房 | -好的 | 981 号房 |
| Flipkart | ⚠️ | 981 号房 | ⚠️ | ⚠️ | ⚠️ |
| [**谷歌**](/companies/google-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | 981 号房 |
| [**领英**T3】](/companies/linkedin-front-end-interview-questions/) | 981 号房 | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
| [升升](/companies/lyft-front-end-interview-questions/) | -好的 | -好的 | 981 号房 | 981 号房 | ⚠️ |
| [**微软**T3】](/companies/microsoft-front-end-interview-questions/) | 981 号房 | 981 号房 | 981 号房 | 981 号房 | ⚠️ |
| [**sales force**T3】](/companies/salesforce-front-end-interview-questions/) | 981 号房 | ⚠️ | ⚠️ | ⚠️ | ⚠️ |
| [**推特**](/companies/twitter-front-end-interview-questions/) | 981 号房 | ⚠️ | 981 号房 | 981 号房 | ⚠️ |
| [**优步**](/companies/uber-front-end-interview-questions/) | ⚠️ | ⚠️ | 981 号房 | 981 号房 | ⚠️ |