Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

成为一名合格的前端面试官没那么简单 #6

Open
yayxs opened this issue Oct 11, 2023 · 0 comments
Open

成为一名合格的前端面试官没那么简单 #6

yayxs opened this issue Oct 11, 2023 · 0 comments
Labels
面试

Comments

@yayxs
Copy link
Owner

yayxs commented Oct 11, 2023

如题，“我为公司招来的前端转正了”。准确来说，是转正好一段时间了，不知你 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 文件，一个 ! 出来，这样很容易和候选人打成一片，因为这是大家都知道的事，（倘若这个不了解，那可能简历投错了）

<!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、然后进行简历的筛选，一般我会分为几类：

  • 简历写的花里胡哨，啥都会的这种
  • 简历相对真诚的
@yayxs yayxs added the 面试 label Oct 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
面试
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yayxs