BAT面试官：一文带你读懂前端面试套路

名词解释

程度副词

对于不一样程度的词，个人理解以下：

精通：

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

掌握：

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

熟悉：

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

了解：

• 未在开发中使用过但写过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的不能说的数字。

考察的点有：

• 编辑器的使用
• 输入习惯
• 快捷键使用
• 变量定义
• 循环
• 循环语法
• 循环的使用理解
• 取余运算
• 条件判断
• 字符串查找

尽可能选择面试者有能力完成的问题，经过观察编程习惯，好比是否使用快捷键（快捷键是判断合格程序员的重要标准），是否过分紧张（意味着面对简单的算法问题也很吃力），是否可以先输入括号再输入内容（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和element对象

事件 关于事件的机制

• 冒泡和捕获
• 事件委托
• 自定义事件
• 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