前端面试通关指南

 

简评：任何面试就两步，大量的准备（战前分析），面试的表现（作战发挥）。很多人觉得面试难，可能是第一步，准备还不够充分。

前端面试很难，这是事实，不但需要牢固掌握计算机科学基础知识，而且还需要了解 Web 性能，构建系统和 CSS 布局引擎等内容。所以特此写一个指引性质的文章，来帮助前端开发者更好的应对面试。

★面试前准备

在你的面试之前，询问招聘者面试的方式。

一些面试可能围绕白板，一些面试可能使用像 CoderPad 这样的在线文本编辑器。重要的是，预演面试环境，并加以练习。

另外，可以要求面试者提供一些公司关注的方向，或是自习研究一下职位 JD，因为一些公司除了问你前端的具体问题外，可能还会问你传统计算机科学的问题，如排序算法和搜索等。

☆前端概念

HTML 和 CSS，Javascript 和 Javascript 设计模式是你在面试期间将要测试的关键概念。

HTML + CSS

HTML 和 CSS 就像前端开发的面包和黄油。在面试过程中，你很可能会被问及 HTML 和 CSS 的细微差别。此外，招聘方还可能让你编写基于模型的布局。

防微杜渐，以下是一些 HTML 和 CSS 的基本概念：

• CSS animations
• CSS sprites
• Pseudo classes
• Grid systems
• Semantic markup

除了这些概念，了解 CSS 预处理器，如 SASS 或 LESS 及其优点。也熟悉CSS命名约定像 BEM 和 OOCSS。

一些面试官会要求你在 HTML 和 CSS 中重新创建布局。在 CodePen 上练习。检查Dribbble，因为它有很多简单但不错的设计，将是有趣的重新创建。

最后，作为前端，我们习惯于在编辑器中进行更改，然后验证浏览器中的更改。

通常在采访期间，你无法享受到这种奢侈。当你准备面试时，尝试用代码写大部分的布局，而不看结果，直到结束。

JavaScript

如果 HTML 和 CSS 是前端开发的面包和黄油，那么 Javascript 就是刀了。公司将花费大量时间测试你的 Javascript 知识。许多问题将围绕以下概念。

• Prototypal inheritance
• Scoping
• Closures
• The event loop
• Event bubbling
• Apply, call, and bind
• Callbacks and promises
• Variable and function hoisting
• Currying

如果你对自己的 Javascript 能力有信心， 那来测试一下你的知识吧。

• 25 Essential JavaScript Interview Questions
• 21 Essential JavaScript Interview Questions
• Top 85 JavaScript Interview Questions & Answers

Design Patterns

Javascript 中的设计模式为你提供了常见问题的可重复解决方案。这些是一些重要的知道的设计模式。

• Factory
• Decorator
• Singleton
• Revealing module
• Facade
• Observer
• MVC, MVP, MVVM

除了Javascript 设计模式，熟悉 Javascript 框架也是很有必要的。这不意味着你需要学习一个新架构，你只需要理解面试公司团队之前使用的架构，以及为什么使用这个架构。另外，如果你正在面试一个像 React Flux 或 Angular 的相关职位，请事先查看框架架构的一些文档。

☆计算机科学概念

有些公司在雇佣前端之前，会先雇佣软件工程师。这意味着公司希望你能够有良好的软件设计原则，可扩展的代码结构体系和测试等素质。

如果面试公司要求了解数据结构和算法，那么你可以继续看，若不要求，可以跳过此章节。

Data Structures

这是一些基本的数据结构，不要只是阅读它们，花时间在 Javascript 中实现它们。如果你不熟悉单元测试，请使用像 Mocha 这样的库来测试你的数据结构，以便学习。

• Linked lists
• Hashtables
• Stacks and queues
• Trees (binary trees and heaps)
• Graphs

注意：对于图形你还要知道如何实现深度优先和宽度优先搜索遍历。

有些数据结构的实现，你可以参照 SanFoundry。所有例子都是 Java 的但是在 JS 重构非常简单。

Sorting

一旦你对数据结构有信心，就可以进入排序。

在 Javascript 中实现它们，然后记下他们的时间和空间的复杂性。

• Bubble sort
• Binary search
• Insertion sort
• Merge sort
• Quick sort
• Selection sort

在检查数据结构和算法后，使用 Leetcode 和这些问题测试你的知识。

★临场发挥

上述有很多材料，要学的也很多，毕竟一入前端深似海。找到自己的学习节奏，去征服面试。

另外你要谨记，面试不能完整地衡量程序员的价值！

有些人擅长面试，有些人不擅长。有些人和面试官很搭，有些人因为是老乡而更受青睐，所以放轻松，做最好的准备，并且在面试中把你所准备的都呈现出来，那就够了！

原文：Cracking the front-end interview