去年回杭后，除了在新的公司沉迷业务开发、业余吹水之外，趁着人手不足顺便做了些电话和现场面试的工作（ 当然主要是面向初级前端岗候选人 ）
从两年前初入行的校招生，到如今扮猪吃老虎的面试官，感觉可以写篇文章介绍下自己的面试心得和套路、
充实下一年未更新的“技术博客”
列了个大纲:
- 前端面试忽悠师的战略目标及基本功
- 如何正确地
尬聊 - 常用题库及使用姿势
- 一些常见情况的应对方式
前端面试忽悠师的战略目标及基本功
战略目标
用“简要”的话来说，是在较短的时间内尽可能地了解候选人的技术能力、成长空间、过往经历及未来规划等信息，为团队招到靠谱的伙伴；同时作为公司的门面，展示团队的技术实力和工作态度。
基本功
面试本身上是一次双向选择的过程。电话、视频和现场面试对候选人来说一般是比较难得的通过在职工程师了解团队的机会，良好的工作习惯和态度会显著提高双方的体验，可以说是一门基本功。
比如:
- 提前约好时间、告知可能需要占用的时长并且如约而至
- 提前阅读简历，做简单的笔记（比如上面写的哪些项目想展开了解、哪些技术能力需要用什么问题考察）
- 营造认真、开放的探讨氛围，提升候选人对团队的认可度
- 用简明高效的表述降低的沟通成本，节省面试时间
- 过程中做笔记或录音，采集更多的信息从而辅助后续对面试结果的决策 等等
如何正确地 尬聊
很多刚开始做面试官的同学很容易把天聊死，或者进入空气突然安静的环节。在面试前提前准备一个 “剧本”，或者用一个固定的、惯用的 “套路” 会好很多。
个人的面试习惯（套路）是，无论是什么类型的候选人（校招 / 社招），起手是让对方来段简单的自我介绍，而后按照入行的原因 / 契机、上一份工作或实习的情况、为什么想换团队以及对未来工作的期望这个顺序聊下来。 “前戏” 一般不超过6分钟，遇到比较会聊的候选人应该及时拉回来或者开启下一个话题。
有了上面的无压力的沟通做铺垫，基本可以稍微了解对方的情况、交流的风格甚至个人的水平和视野。
而后可以直接进入正式的环节，如果对方有前端的工作经验，我会更倾向于按照简历的内容做面试，既然是写在简历上的，应该是候选人真实经历过的业务场景、技术需求，相当于给予对方主场作战的机会。比如询问在之前团队做了哪些项目，然后抓住项目中的一些问题和需求点展开去问解决思路、技术细节、实际成果、反馈等信息。把每一个项目经历当成一棵树遍历下去，很快就能探到这些内容是否真实和候选人的技术层次。不过常常会有项目技术深度不足的情况（毕竟我遇到的初级岗比较多……），那么就在下文归纳的题库中临时找几个相关的问题提问。
另一种情况，如果工作经验不足或者几乎没有（比如校招生、实习生），建议加一个小问题，比如是怎么学习前端的，了解下对方的学习能力和方式。而后便让 TA 走随机题库的模式，开始客场作战吧~ 下一章中会介绍个人常用题库。
面试过程中比较应该避免问较大的、 “务虚” 的场景，比如设定一个项目场景，让对方设计前端架构、工作流程、项目规范什么的…… 以及要避免诸如“如果让你来做xxxx，你会怎么做”这种提问（这点是看到其他人分享的面试经验中很认同的一点）。上述“务虚”的场景很容易带来的结果是，只考察了对方的吹水能力。
还有种情况是提的问题卡住面试者，一来是先要确保不是问题的表述问题（歧义之类的，如果是题库问题有歧义，这个应该及时修正避免复现），而后可以提醒对方讲讲自己的想法，如果已经有一定思考的话建议作出一些提示，看看是否能在帮助下开拓思路。实在是无头绪，可以直接用 “没关系，我们先聊下一个问题” 这样的台阶切题。正常情况不适合给对方作出解答，可能面试官自身理解有偏差误导候选人（笑），可能候选人会钻牛角尖甚至对问题有比较大的意见，主要还是时间成本。（有遇到过比较迷茫但潜力挺大的新人，还是会稍微讲完整的思路和我自己的理解 ^ ^）
按照这个流程走，基本不会很尬。沟通的过程中最主要的还是要掌握主动权，不要被带着走 (:з」∠) ，当然感觉把控不住只能用比较 low 的强行打断……
结束提问后，可以让候选人提几个自己关心的问题、表达TA觉得没有被关注到的点。可以给自己一个反馈，也算是提升面试能力。
目前我们团队的面试最佳实践是，coding 是简单粗暴地考察候选人能力和技术素质的方式。在视频和现场中，我们会倾向于留出较多时间给对方做题，上面 尬聊 技术和项目的环节往往会推到这后面。
常用题库及使用姿势
注：本章出现的题库只收录了部分常用题
使用题库的原则是尽量不要太看重候选人对 API 或者语法糖的熟悉程度，主要还是综合能力与素质。
题库的话我是按几个方向去分类的：
- 必修型：
CSS/HTML/Javascript/HTTP & 浏览器/工具 & 工程化 - 选修型 (optional)：
框架 (vue react angular)/Node - 跨界型 (optional)：
Hybrid & JsBridge/React Native & Weex/Electron & NW/微信小程序
我的一个实践是按类归纳问题，从上到下按复杂程度或者难度罗列知识点，从左到右按深度罗列该知识点的问题及扩展。
（不过不可避免的是，问题涉及多个类，html经常和css相关什么的……）
先讲使用姿势吧：
- 不全问，随机挑选，适当深入（比如能力强的候选人直接开靠后的、靠右的题）
- 题库是笼统的知识点，最好做拆分，包成具体、清晰的问题给到面试者
- 部分题只适合笔试、编程
比如我的部分 CSS 题库：
- css 是大小写敏感的么 （无关痛痒、纯属调戏候选人）
- css 常用的长度单位有哪些 （
px pt em rem vw vh vmin vmax ex ch% 等等 ）→ rem 具体定义？ → vw vh 具体定义，为什么没广泛使用，兼容程度？ position定位取值、默认值 （这个能刷不少人） → absolute 定位规则 → sticky 定位规则 → 三个同级 div 给第二个 div 只设置position: absolute会发生什么 → 文档流 → 不脱离文档流的 fixed 定位方式有想法吗- 选择器优先级及计算方式 → 属性选择器 （ 如何高亮跳往特定 domain 的 a 标签 ）
- 垂直居中 （烂大街问题，略）
- 设置元素隐藏的
visibility: hidden / display:none / opacity: 0有什么区别、具体使用场景 box-sizing是个啥 → 设置背景颜色会影响 margin padding border 的哪些区域？- 伪元素，
::after / ::before什么用 - 移动端 1px border 怎么画 → 那 1px 带圆角的边框呢 → 多重边框怎么画
flex布局有了解么？ → 主轴副轴 →Grid布局呢@import加载样式有什么缺点 → 怎么避开这个缺点@media媒体查询有用过么 → 如何用这个做响应式 → max-xxx & min-xxx 是开区间么？（这个是调戏）- 哪些样式会触发回流、重绘？→ font-size 会不会触发回流 → 容易回流的样式修改如何优化
BFC的概念及生成 哪些样式会新建composite layer→ BFC 与 composite layer 的关系 → composite layer 过多的优化icon-font有了解么 → 怎么使用自定义的中文字体 → 怎么减少开销Data URI Scheme可以表示哪些类型的数据 → 性能有了解么
个人体验是前十题挑着问几个就差不多了。
HTML 题库：
- html5 新增了哪些标签 → 怎么做兼容？ polyfill ? → 过气了的 “语义化” 是个啥
- 为什么样式会放在
<head>里 →<style>标签放在一个 dom 节点里会发生什么 - html 里面 src 和 href 有什么区别 → img 的 alt 和 title 有什么区别
- meta 标签中 viewport 能控制什么 → 设置成
width=device-width, initial-scale=2.0会怎样 - dom 中间嵌了一段阻塞的脚本，比如说
alert(0)会怎么显示 → 加了defer / async呢？ - 怎么判断一个 dom 元素在页面上的真实显示效果？比如说颜色、那么字体呢？
- 如何扩大一个元素的事件响应区域 → 优缺点
- iframe 怎么设置 → 有哪些安全性的设置 → 怎么和父文档交互
- 嵌套 a 标签会发生什么 → 如何解决解析问题？ （ 内部的套
<object>标签 ）
html 和 css 都是比较基础的、所以实际用的时候问的题都不多。
HTTP & 浏览器 题库：
- 浏览器加载页面发生了什么
- http 状态码有哪些 (不推荐问生僻的) → 什么时候会出现 304 → 协商缓存，介绍下
Cache-Control / Last-Modified / Etag ...的具体规则 - 页面资源加载的并发限制怎么来的 → 怎么突破
cookie一般用来做什么 → 数据格式、如何设置、有效时间、安全性？ → 写一段解析和设置代码（可选） → 没有 cookie 及其他浏览器存储做登录态的情况下，如何定位同一个匿名用户（浏览器指纹）localStorage sessionStorage是什么，区别在哪里 → 什么情况下会失效？- CDN有哪些作用 → 为什么会不同域名
- http 1.0 和 http 1.1 的区别 →
http 2.0和http 1.x的区别 → 多路复用、https、服务端推送如何实现？ - 如何调试性能，看哪些指标 → 首屏加载优化怎么做，能做到什么数量级 →
SSR相关细节 →QPS相比于客户端渲染会下降么 → 主要瓶颈在哪里，怎么解决？ DOMContentLoaded和loaded有什么区别 → 监听这两个事件有什么实际应用- 回流重绘的优化
- PWA 有了解么
Javascript 题库：
- js 基本类型和引用类型，区别 → 如何判断两个变量全等 → 三个等号判断全等的例外情况 （
NaN) →'123' / new String('123')的区别 →Symbol的实际使用场景 - js 如何创建块级作用域
- js 只有词法作用域 怎么理解这句话 → 闭包是什么 → 怎么做模块化管理
正则表达式→ 贪婪匹配与非贪婪 → 怎么写邮箱的正则匹配- 如何判断数组 → 常用数组原生方法有哪些 → 哪些会修改数组 →
map reduce forEach第二个参数是干啥的 (不推荐API细节) → 原生sort使用的是哪种排序算法 - 原生事件绑定 → 第三个参数如果是布尔值表示什么 （
事件模型）→ 第三个参数如果是对象呢，passive事件是否有了解 - ES6 是否有使用，常用哪些语法 → 监听函数和普通函数的区别 （
arguments什么的 ） →Promise相关 Proxy能做什么async await解决了什么问题，和generator yield那套的异同点- 跨域请求怎么写 →
jsonp最主要的原理 / cors 怎么做 /iframe跨域 / 标签 src 跨域…… 细节 Event LoopJS 事件循环描述一下 → Node 中的事件循环 →timers / microTaskQueue / nextTickQueue / poll等概念有了解么
Ps. js相关问题在面试中吹水容易 “务虚”，建议少问，更多依赖笔试题、编程题情况。
工具 & 工程化
git→revert / reset / rebase的区别 →cherrypick什么用 →git flow是怎么协作的- 正向代理和反向代理的区别 →
nginx如何配置，可以根据哪些规则转发（ 域名，端口，协议等 ）→ 如何做负载均衡 lint是否有使用babel是否有使用 → 踩过哪些坑webpack做了哪些工程化的事情、有哪些好用的功能 → 打包慢怎么优化- 理想的前端发布方式是怎么样，机器打包，内容分发，版本管理，快速回滚，缓存问题
框架类
angular的脏检查为什么“脏”，对比其他两框架- vue 怎么做双向绑定 → 组件生命周期 →
created和mounted对比 → 父子组件嵌套的情况下生命周期触发顺序 →$nextTickapi具体是满足了什么需求 → 为什么使用vuex react组件生命周期 → 组件更新前后分别发生了什么 → 为什么会有纯函数组件、高阶组件的概念 → 组件设计的时候有没有考虑组件的边界在哪里？（ 哪些应该state内部维护，哪些应该props传入，哪些应该有回调函数 ） →redux源码有了解么，更新状态树的时候内部还执行了那些操作 →react经过打包出来的代码结构是怎么样的，和vue打出来的有哪些异同react / vue / angular如何做性能调优- 使用了
ssr的如何做性能调优 - 前端框架中使用的前端路由是怎么实现的，
hash / history两种模式的区别，兼容性
Node
- 怎么脱离回调地狱
Koa相关 →MVC相关 → 怎么设计一个日志框架- 怎么部署 node 应用 → 如何监控 node 应用正常运行
- Node 事件循环
- 其他都是偏后端的了，略……
跨界型大杂烩
jsbridge怎么实现的 → 限制在哪里 → 和RN / Weex / 小程序这些的区别RN怎么实现的 → 如何用原生封装的模块给 js 调用 → 踩过哪些坑 → 性能优化怎么做 → 如何做多端复用小程序踩过哪些坑，现有的问题你觉得是什么 → 五层页面跳转的限制怎么做 → 页面多计时器如何维护（即秒级setData的情况下如何做优化）→ 如何做组件化，自定义组件有哪些问题Weex没写过也没接触过，不会问相关题目 (:з」∠)Electron和NW的区别 → 应用架构是怎么样的 → 相比于 web 前端还能使用哪些 native 资源 → 怎么做窗口间通信 → 怎么科学打包
其实题目基本源于自己的工作经验、学习内容，还是要多提升自己~~
然后建议是无论电话、视频、现场，都控制时间在 30——40min，有编程题的适当延长。
（有空再补充一些编程题）
一些常见情况的应对方式
Ps.在目前公司是这么做的，不同公司、团队流程不一样
-
面试者问印象或者结果
婉拒，如果清楚流程的话最好反馈一下能给到结果的时间点。
-
面试者水平比较差
20min 结束面试，并记录好细节。
-
电话面试觉得很ok
直接约现场或者远程编程。
总结
如果你觉得不错，或者发现文章中的错误，或者有更好的建议，欢迎评论或进前端全栈群交流讨论，866109386。 （PS：内有大牛分享 css webpack node vue angular react 面试 等等的相关内容。）