前端技术岗面试怎么破?

原文来自:Geeker

e00a9b20-5016-4eaa-869d-7ca6e0e2fbf1

前端技术面试很难,你不仅需要计算机科学的基础知识,还需要理解网页性能、构建系统、CSS布局引擎等。尽管有互联网上有很多资源,但是我发现少有完整的指南帮助你准备前端面试。我相信这篇文章可以作为前端面试专题的大纲帮助你拿下下一次面试。

面试之前

在面试之前,先询问招聘人员面试的流程。一些面试要求你通过白色书写板解决问题,而另一些则是用CoderPad这类的在线文本编辑器。弄清楚面试的这些细节,利于你提前演练真实的面试环境。

再询问一下准备时要侧重哪些方面,除了具体的前端技术,有的公司会问一些传统的计算机专业相关的问题,比如搜索和排序算法。


前端概念

在一场面试中,HTML、CSS、JavaScript和JavaScript设计模式是会被重点考察的内容。检查下面清单中的每一项,确保自己都足够了解。

a161dca3-37a0-4562-a15d-c6cf3d3db9aa

HTML和CSS是前端开发必备技能,在面试中,你可能被询问HTML和CSS中的细节问题,也要准备好根据实物模型编写布局。

下面是一些基本概念:

除了上面的内容,了解SASSLESS等预处理器和他们的好处也是很重要的。还要熟悉一下CSS的命名规范比如BEM和OOCSS

面试官在寻找CSS的最佳实践者,这篇指南来自Medium的前端工程师,介绍了Medium如何迭代得到现在的CSS架构。

我刚才提到一些面试官会让你用HTML和CSS写布局,你可以用CodePen进行练习。Dribble上有很多值得重写的简单精巧的设计。

最后,作为前端开发者,我们太熟悉在编辑器里做代码修改,然后在浏览器中观察变化了。而在面试中你却不能这样做。所以当你在准备面试的时候,尝试在编码完成前不要再在浏览器里看结果了。
a82d64d9-ce5c-47f8-8b5e-d5f11550f9f5

如果说HTML和CSS好比前端开发中的“面包黄油”,那么JavaScript就是“刀子”。公司会用面试中很大一部分时间来考察你的JS知识。很多问题是围绕以下的概念:

当面试官提出一个JS的问题的时候,先想他在考察什么概念,会更容易作答。如果你对自己的JS技术很自信,可以在这里这里或者这里测验你的知识掌握。
36c7b357-e773-477e-8a36-112eadf527ec

JavaScript设计模式给你提供解决一般问题的重复性方案。这是一些你应该知道的重点设计模式:

除了JS设计模式,你还应该熟悉一下JS框架,不是说让你在面试之前再多学几种框架,而是要知道什么时候为什么前端项目组要用框架。如果你是在面试React+Flux或Angular岗位,面试前应当复习一下框架架构的文档。

计算机科学概念

和前端工程师相比,一些公司更希望雇佣一位软件工程师。这是说公司希望你在软件设计原理、代码架构、软件测试方面基础牢固。

如果招聘人员建议你复习数据结构和算法相关的知识,这部分内容是为你准备的,如果没有你可以直接跳过这一节。如果你不是计算机专业的背景,也没关系,大部分概念理解起来都很直观。

253daefa-6315-4b46-9dd4-54622e69d0c1

以下是建议你了解的基本数据结构。不要仅仅阅读,多花些时间用JS实现一遍。如果你不熟悉单元测试,可以用Mocha类似的测试框架来学习。

  • Linked lists(链表)
  • Hashtables(哈希表)
  • Stacks and queues(栈与队列)
  • Trees (binary trees and heaps)(二叉树和堆)
  • Graphs(图)

注意:对于图结构,需要知道如何实现深度优先搜索和广度优先搜索遍历。

你可以看SanFoundry对这些数据结构的实现。所有的实例用Java写成,重新用JS实现一遍就很简单了。

7a47c77c-fcb2-4265-8d71-7855c45cbac9

当你对数据结构足够熟悉以后,可以开始看排序了。用JS实现一遍,记录时间和空间复杂度

  • Binary search(二分查找)
  • Bubble sort(冒泡排序)
  • Insertion sort(插入排序)
  • Merge sort(归并排序)
  • Quick sort(快速排序)
  • Selection sort(选择排序)

复习完数据结构和算法,你可以用Leetcode这些JS技术问题做个小测验。


结语

我知道要学习的材料很多,特别是当你刚还处于前端开发的入门阶段。尽早开始准备面试吧,给自己留出充分的时间。

记得面试并不是衡量你适合做程序员的唯一机会,一些人擅长面试,一些人不擅长。有时候你能和面试官一拍即合,有时候却合不来。如果你面试的不顺利,不要轻易失去信心。

祝你好运!

via: medium


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流