前端诗人 | 前端诗人

如题，“我为公司招来的前端转正了”。准确来说，是转正好一段时间了，不知你 2023-01-01 之后新的一年有什么打算，或者定了什么目标，如果还没开始，还有一次机会，那就是春节，春节过后你可以说新的一年，新的作为。至于我，这是春节前的最后一篇。想谈谈从一个疯狂敲代码的 coder ，接到团队要招人的任务之后，一些观念的转变。聊一聊我对如何成为一名合格的前端面试官 甚至是如何成为前端面试官的一些非常浅薄的体会。春节之后，“金三银四” ，如果你要跳槽或者要做面试官，不管面试与被面试，以下内容会有点帮助

为什么是为公司招

那一次招聘工作，我的职责就是，技术面试，一面二面 的部分，

1、负责系统 WEB 前端设计、开发、维护与优化；
2、负责微信公众号、支付宝小程序的开发、维护与优化；
3、负责搭建高性能、高可用和安全的前端开发框架，持续提升前端开发的效率和质量；  
4、与后端工程师对接共同协作完成项目，打造用户体验好的产品。
5、熟悉 Html5、CSS3、JS、Ajax 以及移动端 H5 以及小程序开发相关技术等；
6、Vue 框架，有 uniapp 开发以及上线经验
7、思维与分析能力

当然了，这不是我写的，而是我们团队的大领导发我的，有可能是HR角色写的，简单分析一下这几条

1、系统 web 前端设计，这是很老的词汇了，前端现在有很多 “下一代” “现代化” “3.0” 之类的概念，显然写这段话的人不懂前端的发展进程和目前的现状
2、我有的业务是在写公众号 和 小程序 等等，但是这条有点强调上层的实现，没有注重候选人的编程功底
3、开发质量和效率的提升确实需要小组内所有前端思考，但是在业务之上的背景下，要搭建前端开发框架，是一件很难的事情
4、“与后端工程师对接” 这点讲的应该是团队间的协作，但一个产品的落地是不仅仅这些角色，有可能写这段话的人是站在后端的角度
5、6、我觉得这点才是，和候选人息息相关的事项
7、则是站在代码开发之外，判断一个的思考能力

直到这次工作任务结束，慢慢我发现，招人这项活真的是给公司招，自己喜欢的并不是适合的。2022年7月份到现在过去很长时间，现在想想有几个候选人真的是自己比较喜欢的。前几年我是比较注重知识的 广度。所以新的东西总会简单的看看，认为不了解就不是大佬。（当然了，这种想法是很想当然的），正是因为自己前期学习的时候，方向太乱，所以遇到会点 vue 的，和会点 react 的，我都能聊，不至于冷场、或者尬场。但是这种会点这，会点那的，在那段时间我真的态度发生了很大的变化，从一个应试者的心态，变成考察者。自己作为面试官，也会思考，我们这个组需要什么样的人，而自己由喜欢什么的候选人。后来，我就专注 vue 这块内容。有一些会点这会点那的，反而不是很加分，但如果我作为一个技术学习者，还是比较欣赏这种人的。

还有一点和大家分享，如何一个岗位，或者说一个团队在知道欠缺什么人之后，那招到人是很快的，没有那么多弯弯绕绕，也可能不需要那么久，整个过程就是合适能干活就行，并么有你寻觅另一半那么久，需要各种纬度的考量。

直到整个工作结束，我还有一种 就这？ 不再看看了，不再多选几个候选人，就这了？

前期的准备

上文提到的称为前端面试官，争取每场面试结束不会被候选人 ma ，所以还是需要正儿八经的准备一下。我拿到任务后，把领导需要的人，拆解了一下

1、专业方面：

3 年本科中级以及以上踏实配合
html5 css3 js
移动端小程序
逻辑分析、问题解决、业务敏感
熟悉工作流

2、效率方面

性能
安全
协作

3、前端生态

微信公众号
支付宝小程序
admin
uni-app
h5 兼容

我的考察角度

作为一面二面 的主要考察者，我不像一些 圈外人 给你聊有的没的，我会严格秉持 html css js 这三个有一个不过关没事，但是如果有 2 个或者以上，那肯定是被 pass 掉的。刚好 2022 这一年（招聘是在 2022-07 月份进行的）我抽时间看了

https://html.spec.whatwg.org/ 关于 html 的考察肯定是跑不掉了，也看了基本 css 的小书和册子，

接着就是明确候选人的能力：

0、前端相关的专业技能 1、我觉的是中级左右，可以左也可以右 2、我其实是希望招一个比我厉害些的，但事实是团队并不需要 3、除了 html css js 上层的框架 vue 等等，以及生态中的内容，了解的越深刻越好，不是越广越好，不能是简单的知道 4、要对业务有一定理解

一些考察点

在草草整理了上述信息后，我根据自己的学习途径和一些业务经验，梳理出了以下不同纬度的考察点，这也是当时这么做的，希望对你有帮助

html 8 分钟

https://html.spec.whatwg.org/ ，当然了以下的内容是一些关键的思路，并不是严格意义上的面试题

我首先新建了一个 index.html 文件，一个 ! 出来，这样很容易和候选人打成一片，因为这是大家都知道的事，（倘若这个不了解，那可能简历投错了）

html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <script></script>
  </body>
</html>

从上往下看，

了解 html 的文档模型吗 /
几种模式浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

https://html.spec.whatwg.org/#the-doctype

link 与 script
DOMContentLoaded，load，beforeunload，unload / 页面的生命周期
<script>、<script async> 和 <script defer> 的区别
html5 新增了哪些内容
音视频 video audio 定位地址定位 WebSocket 表单空间存储 canvas
语义化的标签路径 control
Video 标签的属性
浏览器存储的异同
vue生态之一Vuex,一些通用的数据怎么流动与存储的
Vuex token 延伸问题
使用 data- 属性的好处是什么
attribute 和 property 的区别是什么？
Img 的所有属性 srcset
Src 访问地址异常
Src href 的区别
行内元素块级元素

css 8 分钟

有关css，考察的内容分为基础 css 和 css3 相关的内容。我之前学习了一本小册子，写的很好《玩转 CSS 的艺术之美》玩转 CSS 的艺术之美

css 重置问题：reset 和 normalizing
选择器有哪些优先级怎么计算的
选择器的群组选择器兄弟选择器后代选择器伪类选择
伪类和伪元素有什么区别
css3 弹性盒子动画新增了圆角边框选择器阴影渐变过渡媒体查询
transition 做什么的
Transform 是做什么的
居中布局的设计
Margin auto 怎么实现居中的
盒模型 Border-box 几个值
清除浮动
BFC
高度坍塌、塌陷问题
Css 的单位
css 的颜色
css 的预处理器
Vue 的 scoped 怎么实现样式隔离的
Display 的值
CSS 动画和 JavaScript 动画的优缺点
媒体查询
定位相关
css3 布局方案

javascript 8 分钟

有关 js，怎么考察，如果你没有技术积累的话，确实不知道怎么和候选人唠，这个在一些言语间，能深刻判断候选人的技能等级。如果你身边有电脑，或者方便看一些线上的文档，推荐你别看一些博客总结，那种老长老长的。

在准备考察js 的时候，最好准备几个 tab 页面，最好是线上的方便打开。举个例子，但你看着目录大纲的时候，大体知道该问些什么，当遇到自己也模棱两可的时候，可以直接看一下，以下摘抄一下 es6 部分关键问题

主类别	子类别	A	B	C
JavaScript	ES6	let vs const	代码块
^	^	^	for 循环的计数器
^	^	^	变量提升现象
^	^	^	暂时性死区 temporal dead zone，简称 TDZ
^	^	^	作用域：全局函数块级
^	^	^	声明变量的方法 var function let const import class
^	^	async	谈谈`ES2017`中的`async` 函数	《ECMAScript 6 教程》
^	^	^	async 函数对 Generator 函数的改进之处体现在	《ECMAScript 6 教程》
^	^	^	async 函数的实现原理	《ECMAScript 6 教程》
^	^	class	constructor() 方法
^	^	^	extends 关键字实现继承
^	^	^	为什么子类的构造函数，一定要调用 super()
^	^	^	ES6 的继承机制与 ES5 的继承机制

整个js 包括基础的 js；扩展的js；高级进阶的 js；es6 等等，甚至是运行时node typescript

你是怎么理解JS的
你所了解的JS是怎么样的，宿主环境浏览器环境和 node 环境的不同
变量的类型等等
怎么理解 ES6
const let var class 类 模块字符串箭头函数
暂时性死区
构造函数和普通函数的区别
New 具体做了什么
es6 的理解，新增的了哪些内容
你怎么理解前端的模块化
module.exports =
数据类型
基本的类型复杂的类型
=== == null undefined判断是数组啊等等
几种循环的方式有什么不同怎么终止循环遍历对象遍历数组
事件代理
js 中的 this
解释 Ajax 的工作原理
事件循环 (event loop)
继承
Call apply
你对 promise 的理解
- 状态
- 过程
浏览器
- 浏览器存储的不同
- 输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程
- 重绘回流
主框架 VUE
- 什么时候接触到的 vue 怎么学习的完整的 vue 文档有没有读过
主 UI
- 有没有看过 elementui 的源码
- Vue 的理解双向数据绑定
技术生态：
- 移动 H5 的适配
- 微信小程序 uniapp 的开发遇到的问题
工具相关
- 工作流 git
- 构建 webpack 模块化

其他

前端发展很快，怎么保持学习
- 读过哪些前端相关的书籍，包括不限于 JS ,对你的技术有哪些帮助
- 有没有博客，有结识社区里一些前辈吗，对你的前端认知有哪些提升
- 对 vue 最新的生态，有哪些关注，有没有尝试应用在项目中，或者工作之余有没有自己写过案例 demo
业务棘手问题
- 有没有遇到过，场景是什么，是怎么处理的
- 技术挑战怎么解决的
协作问题
- 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做

一些体会

面试官 要和 候选人 一样，在准备面试工作之前，需要做一些必要的准备，比如上文提到的

1、公司、团队、小组、需要什么样的人
2、对候选人的要求：技术要求、等等
3、准备一些要考察的关键点，上文的html css js 基本能过滤掉一部分不认真对待这次机会的人。接着就是一些上层的考察：打包工具、框架、生态等等

// 算法 https://leetcode.cn/problems/two-sum/
// 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target  的那 两个 整数，并返回它们的数组下标。
// 考察算法的话，问问这一道就行

一是能知道对方有没有对算法有认知，还有就是一些逻辑的想法，还有前端写代码用到的设计模式，这里就不详细的说了。

4、找到合适的候选人，取到简历，有可能是你自己聊来的简历、或者hr 同步给你的，或者你的同事给你的

5、然后进行简历的筛选，一般我会分为几类：

简历写的花里胡哨，啥都会的这种
简历相对真诚的

为什么是为公司招 #

前期的准备 #

我的考察角度 #

一些考察点 #

html 8 分钟 #

css 8 分钟 #

javascript 8 分钟 #

其他 #

一些体会 #