【前端面经】面试：最快最全面的渗透应聘者真实水平

说在前头

所有的面试官、技术主管都是从应聘者的身份过来的，相信大家都有非常丰富的面试经验，里面有发展中的创业公司，有达到一定规模的上市公司，也分独资的、合企的，有开发团队百人以上的，也有少数精英团体的。但在应聘者角度下以下几种情况常有发生：

1、笔试题太偏太难或不符合当前应聘者的水准导致刷掉。
2、太久没接触一个框架（例Vue）导致面试答不上来。
3、面试官问冷门知识导致只了解了应聘者局部技术从而被刷掉。
4、……

但这些 ——

都是面试官的问题！

不服？让我们摆正姿态，重新了解下作为考官该如何面试

---

一、回归初心

当我们还是应聘者时，什么是最不想被问到的？

1、用不到的东西（例如：JQ的triggerHandler）

Excuse me ? 用JQ库的情况下真的有用到过这玩意吗?

2、冷门知识（例如：console如何查看调用栈以及table格式输出？）

我选择console.log()

3、概念性题（例如：盒子模型的构成）

当时做了2年前端，问了面试官一个问题 " 啥是盒子? "

4、没意义的提问（例如：undefined == null 输出啥？）

wtf ?

5、……

以上只举例了几点，诸如此类还有很多。同样，这些题目

面试官最好也不要问

为什么说是最好不要问，而不是不要问，举例概念性题目：

什么是闭包？

这也是前端面试官较为常见的问题，但事实上有些人答得好，蒙混过关了，其实他并未写过，也不了解其中作用域的关系。而有些人其实会写并了解其中的要害，却不了解其名词导致答不好（多指向1 ~ 3年开发人员）。所以概念性的问题并不能真正了解使用者的水平，考官必须书写代码徐徐问之或举例说明（3 年以上除外）。

---

二、到底什么是面试？

/* --- 百度百科 ---

在特定场景下，以考官对考生的面对面交谈与观察为主要手段，
由表及里测评考生的知识、能力、经验等有关素质的考试活动。

*/ ----- END -----

链接：百度百科 - 面试

这是百度百科出来的结果，比较常规也比较笼统，但如何做到由表及里，如何做到等有关素质呢？请看以下干货。

---

三、什么样的开发经验请问什么样的问题（不定时更新）

勿作高深，勿示轻浮

这里分四个阶段

1）应届小萌新

2）1 ~ 3 年的前端小生

3）3 ~ 5 年的前端老油条

4）5年以上的前端资深开发

5）通用的面试问题

---

1）应届小萌新

/* 
    应届生还是多问些基础的，难度应由低至高层层推进
    并且着重观察他的言行举止，语言表达能力
    （水平低没事，必须要有好RP、好学、吃苦耐劳的精神）。
*/

1 - css：css的命名规范（非less、sass的情况下）

考察样式语义化,是否有驼峰式、bem的思想，顺便了解结构上样式的写法。

2 - css：布局上左DIV宽固定，右DIV宽度自适应的css样式写法 || 布局上中间DIV宽度固定，左右边宽度自适应的css样式写法 等

考察布局的具体实现。

3 - css：举例说明能实现动画的css3属性

4 - css：css中定位的种类，以及具体用处

答得少没关系，但必须要了解定位的作用，以及绝对定位与相对定位的搭配用法情景。

5 - css：css中实现垂直居中，水平居中的方法（不分行内以及块级元素）

考察常用的情景。

6 - html：询问标签规范（例DIV）

考察标签嵌套规范，ul > li > a 等，拒绝 dl > div 之类的，以及语义化等。

7 - html：对H5的认知

考察广度。

8 - js：获取节点并修改样式（例如修改color = ‘red’）

基础题必须对。

9 - js：如何获取数据并输出节点

这里要用Star追问法。
    1) createElement创建节点获取数据后配合for遍历输出
    2) JQ的append输出
        > 如何使用字符串拼接
            > 换行该怎么处理
                > 单双引号存在该如何?如果说ES6，继续追问。
                    > ES6了解多少 ...（到这里其实已经满分了）
        > 考察下JQ的函数使用的熟练度（常用的节点操作）

10 - js：如何将字符串‘ABCDEFG’处理为CDE

考察常用JS函数（indexOf、substring、slice等）以及length的使用方法
如果提到replace则加分。

11 - js：轮播图的具体实现

考察left、transform、定时器以及功能实现上的逻辑问题。

12 - js：滚动刷新的具体实现

考察滚动条事件，js获取数据渲染输出的逻辑问题。

13 - js：多个页面中，他们都含有相同的顶部以及尾部，你该如何处理?

根据Star追问
1) 多个页面复制粘贴相同的dom代码片段
    > 如果在此处发现一样式bug，岂不是全部要批量操作?
2) 封装JS函数并输出
    > 考察封装的质量
3) 以iframe加载代码片段
    > 父子间如何交互
        > 跨域的问题以及劣处 
4) 监听hash路由的变化，JS对其进行获取数据重载节点
    > 路由如何监听（基本上满分）

14 - js：描述下前端的趋势以及框架的了解

考察广度。

---

2）1 ~ 3 年的前端小生

/* 
    1 ~ 3 年是最吃香的年限，是机遇最多的年限，也是龙蛇混杂的年限。
    在这里有培训出来造假3年工作经验的，也有3年经验却真实水平不足2年的，
    还有1年经验顶人家2年的人才。
    对于考官来说，此处应以“压迫式” + “随意式” 配合Star追问。
*/

1 - css：css的命名规范

考察样式语义化,是否有驼峰式、bem的思想。

2 - css：左右边宽度自适应的css样式写法、定位的运用情景以及垂直居中的具体实现

这里是开始怀疑应聘者真实水平的情况下才开始问的，如果不行则中止。

3 - css：举例说明能实现动画的css3属性

也可问

4 - css：响应式以及自适应的具体实现

考察em、rem、vh、vw以及媒体查询。

5 - html：对H5的认知

对公司相应的岗位进行Star追问，这里举例：canvas
1) canvas的原点坐标在哪开始
    1) 了解贝塞尔曲线吗?
        > 如何实现花瓣顺时针中心旋转动画的具体实现
        （从如何做花瓣开始，考察逻辑）
    2) 实现可拖拽的两个dom节点之间连线并在两线之间显示数据
    （考察算法）

链接：花瓣顺时针中心旋转动画

6 - js：封装一个JQ函数（例如：$(‘#demo’).css(‘width’)）

考察函数库的封装质量

链接：【JS编写规范一】库 || 组件：ES5书写示栗

7 - js：跨域的实现以及解决方案

考察是否有跨域的经验以及处理方案，解决方案不下5种，这里就不一一简述

链接：JS维护nginx反向代理

8 - js：什么情况下会形成闭包

这比“描述闭包的概念”会好很多。

9 - js：JS实际运用题目一

var a = {
    b: 123
}
var b = a
b.b = 321
// 描述下执行经过以及导致的问题

> 考察地址指向性问题，答对则抛出如何实现对象深浅copy
    > JSON.stringify深copy时会有什么问题

10 - js：JS实际运用题目二

var a = function () {
    return function () {
        alert(3)
    }
}
// 如何执行到alert(3)

考察函数理解。

11 - js：JS实际运用题目三

var a = {
    c: 123,
    b: function () {
        console.log(this.c)
    }
}
var b = a.b
b()
// 输出什么结果

考察作用域链。

12 - js：多个页面中，他们都含有相同的顶部以及尾部，你该如何处理?

这个也可问，不过这儿除了考察路由方面也考察是否运用模板引擎以及模块化加载，组件引入等。

13 - js：熟练运用哪个框架（这里举例：Vue）

根据公司熟练的前沿框架进行相应的提问，例如：
1) 组件间交互
2) 如何封装自己的组件并外部传参
3) 用什么UI库（例如：iview，btn组件上添加什么属性可实现宽100%）
4) Vuex的功能描述以及运用场景
5) Vuex的数据是储存在哪儿的（考察作用域链以及spa的理解）

14 - js：熟练运用哪个UI库（非定制框架的库，举例：layui）

根据公司熟练的UI库进行提问，了解熟知的深浅，例如：
1) select下拉选择框的功能样式实现
2) table模块的宽度自适应BUG

15 - js：es6的了解程度

1) let与var的区别
2) 继承中的super实现了什么
3) promise解决了什么问题
    > 如回答非嵌套问题，则以其他能实现的方案进行逼问（例如：callback）
        > promise返回的对象是什么对象，能返回一个值并赋于其他对象吗?
        > promise.all中的请求其中一个挂掉，其余会如何?

16 - js：node如何封装模块以及对其调用

考察commonJS规范与es6是否混淆。

17 - js：webpack中import导入如何自定义前缀路径

考察resolve.alias的实际运用。

18 - js：package中如何设置自定义指令

基础题。

19 - js：webpack构建的项目中包含多个入口，如何设置服务器起始页

HtmlWebpackPlugin插件实现、package修改server指令实现、配置devServer实现等。

20 - js：webpack中有什么方法可让目录下的所有文件原封不动的打包至dist下

考察基础插件CopyWebpackPlugin。

21 - js：以jq的方式获取该页面中含此属性值的所有节点（例如：a标签下有data-id = ‘F’去获取）

考察jq基础。

22 - js：jq节点的操纵

考察find、closest常用函数。

23 - js：js监听滚动条的情况下，滚动一次触发多次该如何优化

考察应聘者思路以及节流的思想。

24 - js：=== 与 == 差异

考察基础。

25 - js：如何执行一个匿名函数自调用

考察基础。

26 - js：描述下JS代码书写是否有统一的规范

考察beautiful.js、格式化、eslint等。

27 - Browser：谷歌控制台的快捷键（断点F8、F10以及ctrl+p、ctrl+g、ctrl+shift+f等）

这个尤为重要，侧面考察出控制台的熟练程度，对问题的快速定位，断点以及需求变更的整改效率。

28 - Browser：如何查看网站的性能以及提出优化方案

如涉及到服务器性能要好，后台代码规范并进行压力测试则说明他的知识面很全。

29 - other：描述一下上一家公司的产业链

如缺少UI、测试等环节，可进行压迫式逼问，各个组员间所扮演的角色，他所扮演的角色以及项目成果收益。

30 - other：你所遇到的最麻烦的技术砍是如何解决的

必考题，考察技术砍以及瓶颈，大致三类即可摸清应聘者技术水平：
1) 数据交互问题，页面布局问题（低）
2) 具体功能的实现，例如：上传图片前进行canvas剪裁并居中处理（中）
3) 复杂的算法优化、架构考量以及百度难以查到的问题（例如：厂家硬件对接的b/s控件问题）等（高）

31 - js：_proto_ 与 prototype 的差异

---

3）3 ~ 5 年的前端老油条

/* 
    3 ~ 5 的前端市场并没有前者广，但说是人生的巅峰也不为过
    不光薪资比前几者高出很多，并很有可能从PC端到Mobile做了个遍
    项目盈利以及架构方面也有自己的见解
    所以这里应以 “情景式” + “问题试” 发问。
*/

1 - other：你所遇到的最麻烦的技术砍是如何解决的

必问题，先探底。

2 - other：某一项目中你所扮演的角色

审查应聘者能力，以及在需求无法达到时的做法。

3 - other：github上是否有开源的项目以及star、fork量

考察贡献量，一般不得少于20，以及Star追问
    1) 开源的是项目
        > 是什么类型的项目，是否可迭代，页面的维护成本等
    2) 插件
        > 是什么类型的插件，是否模块化依赖，如何封装的等

4 - other：逛过哪些社区，是否发表过文章，关注度是多少?

考察社区活跃度，例如：掘金（收藏不得低于500，阅读量不得低于5k）并Star追问
    1) 什么类型的文章
        > 为什么发表该文章，以及解决了什么问题等

5 - js：对框架实现上的理解（例如：Vue）

1) 以原生的角度去探讨Vue单向数据绑定是如何实现的，双向呢。
2) v-for v-if 的模板语法是如何实现的。

6 - js：是否搭建过原生框架

考察框架的理解，这里有大幅篇章可Star追问
1) 技术栈是什么，为什么采用该架构（例如：webpack+layui+jq+artTemplate等）
    1) 目录结构的详解
    2) 路由的原生实现以及与组件间的关系（比如参照了Vue思想）
        1) 是否采取路由中心化管理（考察路由的复杂性）
        2) 框架上手的难易程度以及如何进行开发（比如路由懒加载JS进行添加配置项模块化添加组件/模块）
            > 框架是否提供创建过程化控制（组件/模块是否含有创建周期，页面是否含有生命周期）
    3) 是否为多页面，是否有迭代的关系
        > 业务与框架间的关系（考察业务的扩展性是否会所导致框架不满足）
            1) 迭代项目与脚手架的关系（考察是否以node.fs写插件）
            2) require的解析机制（一般迭代框架都为动态添加的组件，这里涉及到require预解析以及正则的坑）
    4) 架构后期升级的空间（考察框架扩展性以及维护成本）
    5) 框架的技术维护层级（一般为三级，一级能快速开发，二级修改项目需求的继承扩展，三级修改底层，插件等）
        > 三级底层组件/插件间的耦合关系（考察迁移、复用性）
        > 二级的扩展思路
        > 一级开发流程
    ......

7 - js：描述下cli脚手架、less预编译等的实现原理

考察node文件系统

8 - js：请讲下beautifulJS格式化的实现思路

考察JS水平深度，对节点<>的解析过程。

9 - js：讲述下你对微软的ts与flow的理解

考察广度以及自身理解。

10 - js：描述下对js柯里化的理解以及偏函数的应用场景

考察对底层搭建以及封装插件的思想，面向过程化的极致。

11 - js：对重构的理解，为何要重构

对简化结构、可读性、性能优化等的理解从而进行相应的Star追问。

12 - js：描述下你理想中最好的框架以及具体功能的实现

没有最好的框架，只有最合适的框架。

13 - other：你理想中完善成熟的产品应是如何的，前后端，产品经理将扮演什么角色?

示例：完善的产品应是由产品经理在可视化选择界面进行头部、内容、尾部等组合，生成相应的网站
以示予客户演示观看，对未有满足的模块派发于UI制作至前端开发，进行模块创建、上传，审核等模块迭代
对应的模块也应有对接数据的API与后台接口配对，真假数据一键对接等。
（这里举例echarts可视化定制下载）

14 - js：浏览器渲染的过程以及对回流与重绘的理解

这里答个大概即可，如果一板一眼的符合多半是死记的。

15 - other：谈下你对前端的趋势

最近有掀起对PSD进行解析的智能书写代码的AI，亦可谈谈你的想法。

16 - js：对前端IDE的选择以及趋势

17 - js：对webpack以及gulp混合使用的理解

18 - js：如何实现对代码规范的统一

19 - js：如何对前端代码异常日志的收集以及监控

20 - js：this指向问题（重点考察es6与es5函数作用域）

【个人总结】es6箭头函数以及es5的this指向问题

21 - js：谈谈react / vue / ang对SPA与SSR的理解

---

4）5年以上的前端资深开发

/* 
    普遍3年以上的开发人员都面临着市场逐步降低，更别说5年以上的了
    为什么5年以上的前端应聘者来面试的那么少
    一来是因为转行管理或产品层，寻求更高的发展空间
    二来是因为随着时间的沉淀，人也不愿整天跳槽，开始寻求稳定了
    这里如还有来面试的，则进行前端的讨论，想法的交换即可。
*/

这里给不了太多意见了，大牛仅面试过p6、p8的两位，顺便来分享分享，前者是因为工作压力太大，出来找寻一起研发的技术团队并他不愿当技术主管，后者技术超前，流行es6时，他便开始ts开发，但要求项目分红，近年来上市等这样的情况。
那这边只需要查看对方的技能是否对口，是否有重构以及掌握整个研发部门，撑起技术leader的心即可。

---

5）通用的面试问题

1 - other：简单的自我介绍一下

快速了解对方姓名、开发经验以及技术岗位。

2 - other：介绍一下该项目的上线流程

从原型设计至测试上线，少一环就压迫式逼问。

3 - other：如何看待前端开发的趋势

考察你眼中的前端开发。

4 - other：平时是如何学习前端开发的?

考察学习途径。

5 - other：未来几年你是如何规划的

考察是否有人生规划。

6 - other：你遇到过最难的技术砍是什么，并如何解决的?

可给考虑时间，摸底题。

7 - other：该功能实现不了时，该如何解决?

能想到‘砍需求’的示为正解。

8 - other：产品一而再，再而三的改需求时该如何应对?

要么个人问题，则投诉，要么公司制度问题，则跑路。

9 - other：你有什么要问的?

要么没话聊了，要么通过了。

---

三、公司的优缺点不可不谈

不能只光谈我司怎么怎么好，缺点一样要给应聘者指出，要足够尊重应聘者，给予考虑空间。举例：

1、公司流动性略大
2、加班多且不规律
3、可能出差（省内外）
……

---

四、态度端正

这不光是考官态度要端正，应聘者也必须端正，埋头玩手机的，表达不清晰的，有一句答一句精神状态不佳的以及装大手，撒谎的 ——

通通不要

面试必须遵循态度第一，技能第二的原则，如反之，则会为未来的协作开放埋下深深的大坑。

---

结束语

每条路都是一座大山，
每个人都是一只蚂蚁，
只有在不断的交织与错过中，
逆流而上，
才能识的本心，
才能茁壮成长。
直至变成 ——

一只大蚂蚁

---

关于

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.csdn.net/mcky_love

掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts