前端面试忽悠师入门，教你如何从容面试。

去年回杭后，除了在新的公司沉迷业务开发、业余吹水以外，趁着人手不足顺便作了些电话和现场面试的工做（固然主要是面向初级前端岗候选人）css

从两年前初入行的校招生，到现在扮猪吃老虎的面试官，感受能够写篇文章介绍下本身的面试心得和套路、html

~~充实下一年未更新的“技术博客”~~前端

列了个大纲:

前端面试忽悠师的战略目标及基本功
如何正确地 尬聊
经常使用题库及使用姿式
一些常见状况的应对方式

前端面试忽悠师的战略目标及基本功

战略目标

用“简要”的话来讲，是在较短的时间内尽量地了解候选人的技术能力、成长空间、过往经历及将来规划等信息，为团队招到靠谱的伙伴；同时做为公司的门面，展现团队的技术实力和工做态度。vue

基本功

面试自己上是一次双向选择的过程。电话、视频和现场面试对候选人来讲通常是比较可贵的经过在职工程师了解团队的机会，良好的工做习惯和态度会显著提升双方的体验，能够说是一门基本功。html5

好比:node

提早约好时间、告知可能须要占用的时长而且如约而至
提早阅读简历，作简单的笔记（好比上面写的哪些项目想展开了解、哪些技术能力须要用什么问题考察）
营造认真、开放的探讨氛围，提高候选人对团队的承认度
用简明高效的表述下降的沟通成本，节省面试时间
过程当中作笔记或录音，采集更多的信息从而辅助后续对面试结果的决策等等

如何正确地 `尬聊`

不少刚开始作面试官的同窗很容易把天聊死，或者进入空气忽然安静的环节。在面试前提早准备一个 “剧本”，或者用一个固定的、惯用的 “套路” 会好不少。react

我的的面试习惯（套路）是，不管是什么类型的候选人（校招 / 社招），起手是让对方来段简单的自我介绍，然后按照入行的缘由 / 契机、上一份工做或实习的状况、为何想换团队以及对将来工做的指望这个顺序聊下来。 “前戏” 通常不超过6分钟，遇到比较会聊的候选人应该及时拉回来或者开启下一个话题。webpack

有了上面的无压力的沟通作铺垫，基本能够稍微了解对方的状况、交流的风格甚至我的的水平和视野。nginx

然后能够直接进入正式的环节，若是对方有前端的工做经验，我会更倾向于按照简历的内容作面试，既然是写在简历上的，应该是候选人真实经历过的业务场景、技术需求，至关于给予对方主场做战的机会。好比询问在以前团队作了哪些项目，而后抓住项目中的一些问题和需求点展开去问解决思路、技术细节、实际成果、反馈等信息。把每个项目经历当成一棵树遍历下去，很快就能探到这些内容是否真实和候选人的技术层次。不过经常会有项目技术深度不足的状况（毕竟我遇到的初级岗比较多……），那么就在下文概括的题库中临时找几个相关的问题提问。git

另外一种状况，若是工做经验不足或者几乎没有（好比校招生、实习生），建议加一个小问题，好比是怎么学习前端的，了解下对方的学习能力和方式。然后便让 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 Loop JS 事件循环描述一下 → Node 中的事件循环 → timers / microTaskQueue / nextTickQueue / poll 等概念有了解么

Ps. js相关问题在面试中吹水容易 “务虚”，建议少问，更多依赖笔试题、编程题状况。

工具 & 工程化

git → revert / reset / rebase 的区别 → cherrypick 什么用 → git flow 是怎么协做的
正向代理和反向代理的区别 → nginx 如何配置，能够根据哪些规则转发（域名，端口，协议等）→ 如何作负载均衡
lint 是否有使用
babel 是否有使用 → 踩过哪些坑
webpack 作了哪些工程化的事情、有哪些好用的功能 → 打包慢怎么优化
理想的前端发布方式是怎么样，机器打包，内容分发，版本管理，快速回滚，缓存问题

框架类

angular 的脏检查为何“脏”，对比其余两框架
vue 怎么作双向绑定 → 组件生命周期 → created 和 mounted 对比 → 父子组件嵌套的状况下生命周期触发顺序 → $nextTick api具体是知足了什么需求 → 为何使用 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 面试等等的相关内容。）