（武汉前端）12-16K的社招，会问些啥？真实面试官视角

背景

​​2020年 - 2021年​​ 期间，我曾在所在的公司担任两年的技术一面面试官（之一），主要招聘的对象为 2-5年的社招员工，薪资也是从14-20K不等。

在我​​在职期间​​​，这涉及到我司招聘标准，出于​​职业道德​​​我的​​个人面试标准​​是我肯定不能拿出来说的。

现在我​离职了​，且我的风格/题库基本和其他同事不相同（自己总结的一套），我现在也不再需要频繁面试，因此我这套标准可以和大家分享一下，也许会有启发。

真要说其中的标准，可以​​水完整整一篇文章​​，包括：前端基础，计算机基础，网络基础，前端视野，学习能力，沟通能力，发展潜力...等等等等。

但换个角度，其实也就一句话：

你愿意他将来成为你的同事，和你一起共事吗？

这样描述就很清晰了，在招聘之前，我通常会考虑，我们目前缺少的是一个什么样的伙伴，并将我想象中需要的元素列一个清单。

• 能不能快速上手？（基础扎实程度，学习能力）
• 能愉快合作吗？（理解能力，沟通能力，是否真诚）
• 能增强团队的长处或补全团队的短处吗？（兴趣&特长，技术专精）
• 解决复杂问题的能力。（思路，逻辑）
• 未来发展，能否承担更重要的内容？（视野，热情，学习能力）

就我个人而言，我可能主要会考虑以上四个方面。

至于 ​​简历是否造假​​ , ​​性格是否偏激​​ 之类的完全和我没有关系，这是 ​​HR​​ 和 ​​Leader​​ 需要考虑的内容。

而上面 ​​理解能力​​ 和 ​​沟通能力​​ 其实也比较虚，是一个更主观的内容，因此也不在此拿出来多谈了。

所以主要还是这三方面：

1. 基础知识 + 学习能力
2. 技术特长和专精
3. 思考问题的方式

通常我在面试一开始的时候，会协助 ​​候选人​​ 画一个 ​​N星图​​。这个 ​​N边形​​ 的几个点，正是他对自己擅长事物的描述，我提问的内容不会超出这个范围。

这个 ​​N星图​​ 的点包括但不限于：

• 计算机基础/算法、数据结构（我不主动去问，但你如果真的说自己擅长，我还是会问的，这是加分项）
• 浏览器相关知识
• 前端基础（JS，HTML，CSS）
• 工程化（webpack，gulp 等）
• node.js
• Echarts、Three.js、D3.js 等可视化技术
• 组件封装/组件库经历
• 其他（游戏开发经历...强力PS选手...等等）

如果你的 ​​N​​ 太少，那当然能聊的也少，加分项就少。如果你把什么都列到 ​​N​​ 里面去，但是一问三不知，那也会有所扣分。

一，【基础知识】我都会问啥？

1.浏览器相关

• 缓存

1. 从http状态码问起，304是什么？什么时候会304？是否304是谁决定的？
2. 协商缓存、强缓存、不缓存 的基本概念，差异，及具体头字段。(基础知识点的询问)
3. 对于常规单页应用，哪些文件适合强缓存，哪些不适合，为什么？(知识运用思路，比如带hash的文件适合强缓存，index.html不适合，为什么？你思考下)

• 浏览器并发

1. 为什么js是单线程的，但发起xhr请求时，浏览器不会卡住？
2. 如果你的页面加载时，需要同时请求50个同源的http1.0接口，每个接口的相应时长为100毫秒，那么你用chrome浏览器，多久能完成请求？（多久不重要，重要的是知道浏览器存在并发限制）
3. 如何优化问题2？（http2.0，接口合并，跨域）

• 回流与重绘

1. 什么情况下会触发浏览器的回流与重绘？它们二者的区别是什么？
2. 如何避免因频繁触发而导致的性能问题？

• 几种常用前端存储手段的差异

1. LocalStorage 和 SessionStorage
2. Cookie
3. (如果自称有​​全栈经历​​​，我还会问这个)服务端端的 ​​session​​​ 和 ​​Cookie​​ 有啥关系？
4. ​​Cookie​​​ 是一定会存在的吗？为什么有的网站压根没有 ​​Cookie​​​？它的产生条件是什么？你像某网站发起的第一次请求就有 ​​Cookie​​ 吗？

• 跨域

1. 跨域的几种方式
2. 跨域限制是来自服务端还是浏览器？
3. 你们项目的生产环境和本地dev环境分别是用的啥跨域模式？为什么？

2.Html 和 Css 基础

• 垂直居中的实现方式
• ​​flex​​​ 和 ​​grid​​ 的基本用法（不用背API，了解基本能力，能想到去用即可）
• 伪类和伪元素是什么？区别？
• ​​inline-block​​​ 和 ​​inline​​ 元素的区别
• 盒模型及应用
• ​​css​​ 权重
• ​​BEM​​ 规范

3.Javascript 基础

• 什么是闭包？
  看似是问答题，但其实这是个开放式问题。因为关于闭包的解释可太多了，你答​​调用到函数作用域链以外的变量​​算对，答​​所有把方法当变量传递的编程方式​​也算对，哪怕是答​​有状态的方法​​也算对。
  其实是看面试者平时是否有​​尝试系统性学习​​的习惯。
• this

1. call，apply，bind
2. 箭头函数
3. 立执行函数

1. 这三者的关系（如async方法范围的其实就是Promise对象 等）
2. 时序（Promise 构造器是立刻执行还是？async方法里的代码是立刻执行还是？）

4.顺着框架问（以 ​​vue​​ 为例）

这个点可能很多人不以为然，但我却屡试不爽，就是​​问框架熟悉程度​​。

当然不是扯着我熟悉的问了，而是问​​候选人熟悉的​​。

比如候选人说自己“三年 ​​vue​​ 开发经验，主要用 ​​element-UI​​”，那我就会深入地去问一下 ​​API​​ 和 ​​源码​​ 了。

比如：

1. 你要怎么封装你的组件，才能让你团队小伙伴在使用你组件的时候，通过 ​​v-model​​ 的方式来实现数据双向绑定呢？

号称 “`3年vue` 且 `经常封装组件` ”的面试者，居然有一大半答不上来这个问题，你敢信？

2. 问完 ​​v-model​​​，答不上来，ok，那问一下 ​​.sync​​​ 总该会了吧？
   我理解 ​​​v-model​​​ 和 ​​.sync​​​ 是 ​​vue2.x​​​ 单项数据流的最佳实践和范式了，哪怕是 ​​vue 半年​​ 也应该通透啊。

（可惜，多的是自称三年 `vue` 开发经验却不知道这俩的。）

3. 计算属性的get方法啥时候会执行并改变自己的值？
4. ​​v-model​​ 是语法糖吗？它只是语法糖吗？

（是语法糖，不止是语法糖。还做了很多事情，如：原生标签的兼容，对 `undefined` 值的自动响应式 ）

5. 什么是函数式组件？它有什么特点？（更深入的问问，属于加分项了）
6. element UI 是怎么做到弹窗上面再弹弹窗不会被挡住的？（如果他说自己用了好几年ElementUI,加分项）

5. npm相关知识

• package.json

• 几个常用字段，main,version,module,dependencies,devDependencies...

• 对语义化版本号的理解，命中和匹配规则
• 对yarn/pnpm是否有了解和使用
• package-lock.json，yarn.lock 等文件有啥好处和弊端，它们的作用是什么

二、特长和专精

如果说【基础知识】部分更像是在找茬，那这部分则是在找亮点。

1. 工程化（如果候选人说自己比较擅长）

• 聊一聊 ​​webpack​​

• 基本概念
• ​​loader​​​ 和 ​​plugin​​ 的区别
• 自己做过什么特别的优化和实践？
• 讲一讲一个 ​​.jsx​​​ 或者 ​​.vue​​​ 文件最后会被编译成什么？ ​​vue​​​ 中的 ​​template​​​ 标签内的内容最后会被编译成方法还是 ​​html​​ 模板？

• 聊一聊其他构建工具 ​​gulp​​​,​​rollup​​ 等等(如果候选人用过)

• ​​gulp​​ 的基本概念
• ​​rollup​​​ 有什么特点，有什么局限？相比于 ​​webpack​​ 它有什么优点？

• 聊一聊自己做过的其他工程化实践？

• ​​eslint​​ 插件？
• ​​自动化部署​​ ？
• 啥都可以聊，就怕说自己​​擅长工程化​​，但啥也说不出来。

2. 可视化（如果面试者说自己擅长这方面）

这我也不擅长啊。这要怎么问？

没事，既然是发现亮点的，那就应该让面试者自行发挥。

• 聊一聊他做过的比较有挑战性的可视化内容。

• 分辨率适配方案
• 大屏的布局
• geojson 结构，它是描述什么的？
• scene，layer 等基本概念
• 当你想基于 ​​Echarts​​ 开发某个图表时，你的开发过程是怎么样的？（看他会不会读官方配置文档????）

• 聊一聊对可视化图表选择上的自己的见解

• 什么时候选择趋势图？趋势图的横竖坐标应该是等距的吗？为什么？
• 如何解决饼图、玉缺图等图中数量级差距过大的情况？

3. 组件封装，组件库封装（如果面试者说自己擅长这方面）

• 怎么做到组件库里组件的按需引入？
• 怎么做到根据用户情况的不同，提供 ​​umd​​​ 和 ​​es​​ 的代码？
• 怎么去做到组件和业务的解耦？怎么评判什么样的需求是合理的，什么样的需求属于业务应该自行实现的？
• 为什么要做到 ​​单向数据流​​ ？
• 再问 ​​BEM​​​ 规范，以及为什么组件不推荐使用 ​​scoped​​ 来实现组件样式。
• 组件的单元测试
• 如果你的组件库依赖了 ​​lodash​​​，你构建的包里 ​​究竟有没有​​ lodash 的源码？为什么？

4. 开发提效工具/低代码/动态表单

我也是菜鸡，能玩这些的我选择倾听

• json-schema是啥？有啥局限？可以改吗？
• 你是怎么抽象自己的动态表单的？
• 编不出来了（真的不擅长，等着面试者大佬教我一些有用的东西）

5. 任何其他方面

我期待和各种方面的大神共事，因此啥方面都可以。

总的来说，这部分我通常不会问特别具体的问题，主要还是以​​倾听​​为主，哪怕提问也是希望能引导​​面试者​​能够展现出更多属于他的闪光点。

三、沟通能力，理解能力，处理问题的思路

程序员的工作？理解产品经理的意图，并实现它们。

所以在所有上面的面试过程中，我其实无时无刻都在判断着以下步骤：

• 他是否理解了我在问什么？
• 他是否能察觉到我问的时候真正想知道的是什么？
• 如果我没有表达清楚的时候他有没有沟通的意图继续追问？
• 他是否能倾听并理解我提出的一些建议？
• 他沟通的意愿是否强烈？
• 他在描述时，思路是否清晰？

这些会最后给我一个关于“面试者”是否具备​​良好沟通能力、沟通意愿​​，是否具备​​良好理解能力​​，​​思路是否清晰​​的一个模糊情况。

但这部分占比比较小，更多时候属于​​加分项​​。

如果面试者的​​基础​​和​​特长​​很突出，这部分我根本不会考虑，直接就通过一面。

如果面试者的​​基础​​和​​特长​​稍微差点意思，在我这里够不上通过一面，那我会考虑其​​沟通、理解、思路​​上的加成，看要不要进入二面。

四、总结

这里，我发自内心的想和找工作的兄弟们说一句：

​真的不需要总把自己和面试官放到对立面！​

大家都是普通而平凡的人，也没有人面试是为了​​淘汰你​​。

你在寻找​​工作​​，他在寻找​​伙伴​​。

你对​​薪资​​有自己的标准，他对​​伙伴​​有自己的标准，没有谁对谁错。

因此，我每次接待来面试的兄弟，都会给他接一杯水，问一下他从哪里坐车过来，要多久。无论面试结果如何，都会一直送他去坐电梯...

xdm, 必要的准备是应该的，但​​弄虚作假​​​属实没必要。平日里多学习，面试时多展示​​自己的闪光点​​，真诚的人更容易获得真诚。

????希望大家都能找到称心的工作。