前端面试指南

最近莉莉在做简历筛选，每天看上百份简历，但是筛出来觉得合适的寥寥无几，约来面试又发现大部分也不太合适。于是莉莉就问我，怎么才能找到靠谱的面试者？

我想了几天，决定把我的面试方法写一份文档，让她发给候选人，如果候选人觉得能够通过面试，我们再约线下见面。

草草写了两天，完成了一份初稿。也希望大家能够提出一些意见。

名词解释

程度副词

对于不同程度的词，我的理解如下：

精通：

• 了解背后的原理和规范
• 动手重写过实现代码
• 可以以此为基础做二次开发

掌握：

• 曾在项目中大量使用过此技术
• 可以自如的使用这项技术进行开发
• 参与技术社区讨论或者写过相关文章

熟悉：

• 曾在项目中使用过
• 通读过相关文档
• 可以快速对相关问题定位到文档内容中

了解：

• 未在开发中使用过但写过Demo
• 阅读过相关文档
• 可以用五分钟时间向他人介绍这项技术的特点和应用场景

不了解：

• 只是听过名字
• 只是看过文档
• 没有写过关于这项技术的代码

高等级描述包含低等级描述特性；需要同时具备当前等级所有特性。

---

手写代码：

可以借助emmet或者编辑器的提醒，非复制粘贴整段代码的方式书写代码。

记忆性考察：

需要背下来的内容，不可以借助搜索引擎。比如大多数关键字的拼写，对于超长关键词可以借助编辑器完成输入。
一些常用的知识点也会要求记忆性考察，比如盒模型和选择器规则，因为日常使用频度较高，理应记住。

索引性考察：

可以一次性在搜索引擎通过技术关键字找到解决方案。比如：

我们希望做一个特殊效果的轮播图，文字和背景图不同步滚动，背景图每次只是水平偏移一小截，文字则是整页的滚动

面对这个描述能够识别出搜索关键词为“视差滚动”

理解性考察：

要求能够通过代码的方式展现知识点以及和其他知识点的对比。
能够在某应用场景内设计出该技术的使用方案。
能够讲清其背后的数学原理或者逻辑关系。

面试意图

正面

• 是否具有工作岗位所需要的最低能力

  • 是否有过类似项目开发经历
  • 是否掌握工作岗位所需技能
  • 现场编码解决问题
  • 正确使用搜索引擎
  • 能够对之前项目中使用过的技术做出详细解释

• 是否对技术有热情

  • 有在线可访问的代码
  • 有技术博客
  • 在技术社区积极回答问题
  • 关注新技术，并且做过官方demo以外的案例
  • 日常使用技术解决生活中的问题

• 成长空间

  • 计算机专业背景
  • 良好的算法基础
  • 良好的表达能力
  • 做过技术文章翻译
  • 有至少一项5年以上的爱好

反面

• 对冷门知识点做记忆性考察
• 对过时知识点做解释型
• 以回答出问题的个数作为录用指标

面试应该像测视力一样，一开始从最容易的问题入手，逐步深入，直到无法正确回答。
如果面试中面试者没有回答对任何问题或者回答对了所有的问题，都不是一次成功的面试。

---

面试方式

（针对期望薪资8K~12K的候选人）

了解职业经历，确认工作内容。通过场景概括出技术能力范围。

面试前确认，模糊的地方在开始的时候确认。
参与了哪些项目，在项目中扮演什么角色，完成了哪些编码工作。
工作的流程是怎么样的，是否有规范（比如gitflow）工作的经验。

按照简历的技能列表挑选比较鲜明的做提问。

对于基础知识，比如HTTP协议，以记忆性考察为主；对于正则\路由\promise等技术如果不是近期项目使用过，但是声称掌握，可放宽为索引性考察。

我常常会进行一个额外的环节，就是让面试人在简历中圈出真实技能，排除注水内容，然后只对圈出内容进行提问。因为在我看来，环境所迫带来的简历注水也不该等同为面试人的品质问题，另一方面，是否能够正确评价自己是程序员的一项重要能力。

正则的索引性考察：

给出10个（合法或者非法的）邮箱地址，让面试者通过正则找出，同时打开一份文档供查阅参考。要求五分钟内写出。

大约5~10个问题，主要引导面试者讲述技术的原理，以及技术的使用形式，以及使用过程中遇到的问题（参看附录）。
比如面试者生成熟悉AJAX，我可能会问他AJAX使用了js的什么对象（原理），什么是异步函数（使用形式），跨域问题有没有遇到过（问题），JSONP为什么能解决跨域问题（原理），jsonp返回的内容和json有什么不同（使用），jsonp使用遇到过哪些局限性（问题）...
按照这个层次递进深入，直到面试者回答吃力或者无法回答。

一般不打断面试者的叙述，哪怕说的是错误的，也会在整段讲完之后再进行纠正，然后开始下一个话题。

做实际编码的测试，主要考察编程能力。

一般会选用基本的js题目做测试，比如

在聚会中常玩数七的游戏，七的倍数和带有七的数字都不能说，比如14,27,28。请找出1~100的不能说的数字。

考察的点有：

1. 编辑器的使用

• 输入习惯
• 快捷键使用

2. 变量定义
3. 循环

• 循环语法
• 循环的使用理解

4. 取余运算
5. 条件判断
6. 字符串查找

尽量选择面试者有能力完成的问题，通过观察编程习惯，比如是否使用快捷键（快捷键是判断合格程序员的重要标准），是否过度紧张（意味着面对简单的算法问题也很吃力），是否能够先输入括号再输入内容（10K的候选人真的很多都是从左往右写代码）。

举例的题目是难度非常低的，实际考察的时候可以适当提高难度，但不宜使用偏难怪的题目（因为可能更依赖灵感或者是否做过原题）。重点在于解决问题的过程中体现的思维方式，以及代码的完成度（功能覆盖，健壮性）。

一个人的日常编码能力是又随手写下代码的质量决定的，所以我不能接受无意义的命名，或者低效的循环，这意味着面试者没有良好的编码习惯，在以后的工作中可能也会写出低质量的代码。

总结

内容部分知识举例说明了一些常见的技能列表，实际上会根据面试者的简历情况设置问题。

记忆性内容作为底线要求，如果不能达标，意味着基础不牢，在日后的工作中会在很多基本的问题上搞不清。

编码环节主要做搜索性考察，因为这是工作的常态形式。使用搜索引擎的能力决定了程序员的日常水平。

理解性考察对应的是知识点的理解和应用，是否能够把知识点运用到开发中，并且对日常开发中遇到的问题有自己的思考，反应的是面试者的潜力和发展。

---

附录：简历技能点

以下是一些不推荐写上的技能点

精通DIV+CSS

尽量不要写着一条，因为这是一个很过时的说法。

Dreamweaver

不是主流的开发工具，也不方便配合目前流行的前端工程化解决方案。

---

以下是一些常见的技能点，希望大家也能够帮忙补充。

精通HTML

这意味着能够正确理解语义化，了解新老标签的特点和实用场景。

• 可以通过观察网页，推测出背后的标签结构
• 精通HTML标签的嵌套规则
• 精通浏览器对较新标签的兼容情况及兼容解决方案

精通CSS

会细分一些方向，比如我对于兼容没有很高的要求，不过如果你简历中提到之前做了很多兼容方面的工作，我会问这方面的问题，以确认你是否扎实的掌握了日常所需的知识。
原则上我会挑简历上提到的内容来提问，比如你没有写过掌握了flex，我几乎不会主动去问。毕竟写在简历上的内容就足够问很长时间了。
事实上，至今我还没有遇到一个面试者可以把简历上声称掌握的内容都完美回答出来，也根本没时间去问一些（面试官）引以为豪的知识点。

基础方面

一些CSS中最基础的概念，只要写CSS就一定需要掌握的知识，比如盒模型结构，给出一段浮动代码画出显示效果，能够对行内或者块级元素在垂直和水平方向完成居中。

• 盒模型
• 浮动
• 居中
• 背景
• 字号字体
• 行内元素和块级元素

布局方面

对于主要从事页面重构的同学，会侧重问布局相关方面的问题。比如一些设计理论和这些理论的应用；PSD设计稿的规范也应该有所了解，也会稍微问一些PS的基本操作。

• 常用的IE Hack
• 常见的屏幕分辨率
• 响应式设计和自适应设计
• 栅格系统
• rem工作原理
• flex

动效方面

• transform
• transition
• 缓动曲线（贝塞尔曲线）
• animate（帧动画，补间动画）
• setTimeout

经验方面

针对工作年限3+的应聘者，会提问一些CSS技巧问题，以鉴别是确有丰富的前端工作经验，还是一段经验反复用了多年。

• 浮动清除
• 怪异盒模型
• 文字基线
• 精灵图和iconfont
• 阴影和边框

精通原生JS

说实话，15K- 的简历上写了这一条，基本上是要被虐翻的，老老实实的拆开写，擅长哪部分就写那部分。
另外我觉的比如DOM操作用JQuery也不算丢人，或者在理解HTTP协议的基础上，不知道AJAX背后用的原生方法也不影响日常工作。有些部分不用刻意强调原生知识点。
会侧重考察对于一个实际案例，如何设计技术方案。比如带有遮罩的弹窗，有可能遇到按钮响应多个函数的情况，面试者能否意识到这是事件冒泡导致的问题，并且通过多个方法进行解决。

DOM

掌握原生的DOM操作

• 增删查改
• 熟悉node和elemet对象

事件

关于事件的机制

• 冒泡和捕获
• 事件委托
• 自定义事件
• Event对象

面向对象

了解面向对象的思想，能够以面向对象的思想构建应用。比如封装一个日历组件，设计对象所需的属性值和方法。

• new方法
• 继承，派生
• 原型和原型链

函数

• 熟悉Array，String等的方法
• call和apply方法的使用
• 链式调用
• this

熟练使用AJAX

• $.ajax方法
• HTTP协议方法
• 跨域
• restful API
• JSONP原理

熟练使用JQuery

jquery最重要的是简化DOM操作，以及适配浏览器兼容

• 增删查改
• 修改属性和样式
• 编写JQuery插件
• 事件队列

类库专题

bootstrap

作为最为知名的前端样式框架，无论是在应用上，还是学习中，都能给我们带来很多的价值。

• 栅格系统
• less/sass
• 页面组件划分
• 索引行考察组件的使用，要求手写代码

掌握swiper

• 通读过swiper的API
• 索引行考察API的使用，要求手写代码

掌握underscore

• 通读过underscore的API
• 理解链式调用背后的原理
• 最好阅读过underscore的源码
• 可以手写实现underscore的方法

框架专题

通用

• MVC
• 双向数据绑定
• 单项数据流
• 组件化
• 生命期
• 路由

前端模板

• 横向对比，所用模板的优点
• 至少使用过两种以上的前端模板

工程化

掌握gulp

• 索引行考察手写gulp任务

掌握模块化

• CMD标准
• commonjs
• ES6模块
• babel如何使用
• webpack打包方案
  • 异步加载
  • 打包多个文件

掌握webpack

• 阅读webpack文档
• 理解配置文件结构
• 合并，注入生效代码部分
• 热更新

CSS

• 命名策略
• 嵌套
• 变量
• 函数

了解nodeJS

对于前端岗位，nodejs的使用主要集中在自动化和搭建简单的数据服务器两个方面。

• 是否上传过npm包
• 断点调试法
• express
  • 插件
  • 中间件
  • 路由原理
  • HTTP协议
• 数据库查询
• HTML模板（ejs，pug）

了解ES6

• promise
• Generator
• 花括号作用域
• class
• 数组遍历（ES5）
• 严格模式（ES5）
• 模块系统

开发工具

Sublime,Atom,Webstorm,Hbuilder等

• 日常使用什么插件
• 使用什么快捷键
• 应用哪些snippet