（武汉前端）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. 立执行函数
• 微任务，宏任务
• Promise, async, await
  1. 这三者的关系（如async方法范围的其实就是Promise对象 等）
  2. 时序（Promise 构造器是立刻执行还是？async方法里的代码是立刻执行还是？）
• ES6/7新特性
• == 和 ===的区别；null == undefined成立吗？

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

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