杭州前端面试通关新手入门指南(大佬请绕道) | 掘金技术征文。

6,067 阅读16分钟

前言

首先,我简述下自己面试的背景。我是湖北人,年前因为个人原因辞职,后来因为疫情原因被迫在家失业待业2个多月。

3月18号左右,湖北解封后左右来杭州。杭州这边绿码是可以全城通行的。但是我还是在家待了一个星期左右。这一个星期大概投了 20 多家公司,收到了10家左右面试邀请。

网上已经有很多面试题了,这里我不会一一整理过来。本文重点来谈下,如何从准备阶段到拿到 Offer 以及 Offer 选择的一些个人技巧和经验。

常规操作,先点赞后观看哦!你的点赞是我创作的动力之一!

概览

面试基本情况

总得来说,面试+确定offer耗时大概两周左右。最终结果自己觉得还不错。

杭州公司情况

  • 中小公司偏多,抛开阿里、字节、网易、外包等公司,100-500人左右的算不错了。
  • 996公司偏多,9106偏少,965的极少。
  • 主要分布滨江、黄龙国际、未来科技城、梦想小镇相关地区。
  • 薪职待遇整体勉强还行,对比上海稍弱,广州稍强。

关于理想公司

  • 离家近(女朋友在家,不能回太晚)
  • 没有996氛围(强调是氛围)
  • 薪职待遇可接受(不求太高)
  • 技术氛围要好(什么是技术氛围,虽然没有一个明确的定义,但是面试的时候还是可以看出来的。面试官肯定是一个技术大牛,同时工作也是一个很有技术挑战性的)

收到的面试

受疫情影响,一面现场面试的偏少,以电话视频面试为主,二面基本都是现场面试了

  • 3家电话面
  • 2家视频面
  • 2家网上做题
  • 2家现场面试

面试结果

  • 电话面挂一家
  • 视频面全通过
  • 做题面全通过
  • 前面通过约了现场面,现场面大概8家左右
  • 面完3天内收到4家offer,选择了一个非996公司,已经入职
  • 其中一家公司再原来基础上加薪,考虑再三仍然拒绝了
  • 入职后又收到3家offer,当然也拒绝了

简历管理

使用模版或者制作模版

我推荐的3种风格

  1. 使用好的模版,主要是提升视觉上的感受。强调简洁明了,不要让太华丽样式盖过文字。我使用的是500丁的简历模板,自己改造了以下感觉还不错。

  2. 当然不要模版也行,直接用markdown格式,但是显然打印出来没那么好。

  3. 在线模版,自己用CSS写一个。当然最好找个设计师设计下。或者模仿设计师作品写一个。也不需要用太多技术,因为写一个静态页面本身对于前端来说也没什么太的大技术含量。主要是版面的设计元素和创意性。

不断修改

突出亮点

社招中简历最重要的地方有3点

  1. 工作经历、项目经历
  2. 技术亮点(对什么东西有深入研究)
  3. 岗位匹配度

这几个地方是需要不断修改的。

精准概括

工作经历,项目经历。本身就是逐渐积累的,要精准的概括出你在工作中完成的业绩和产生的作用。 比如说: 独自开发一个xx系统,对xx进行优化,最后将xx提升了多少。

拓宽边界

你要怎么凸显出你的优势呢?如何在广大的竞争者中脱颖而出,这个很重要。技术的积累会给简历加一些分。

当然这个要靠平时积累,确实平时认真做了这些东西。确实对技术有一定的热爱。

比如: 开源xxx库,有多少star。参与xxx项目,贡献了代码。或者制作了什么插件,下载量达到多少。等等都是拓宽边界的加分项。

岗位匹配度

比如说:JD上写会H5,有多少年 Vue 开发经验。那么你这时就要小心了。

如果没有这方面经验,第一选择是看看其它岗位,有没有和自己技能匹配的。如果没有其它岗位还是想进,先简历上写着,然后猛学就行了,也是有机会的。

我前面几篇文章总结了很多Vue,H5的经验。要是你们全部弄清楚,使用Vue工作基本没什么问题。

Git版本管理的方式管理简历

善假于物的程序员,才算好程序员。

现在 github 这么方便,不利用起来多干点事太浪费了。private 项目也免费了,使用 github 管理简历简直爽的不要。

git 上还能打 tag,使用 yarn build,给简历分模块,再来一波构建打包,自动生成网页和PDF版。

公司选择与投递

我的目标不大,也不想找公司练手,所以没有分太多批。想进好的公司,就需要分批投递。

分批集中投递,稳中求进

分批投递好处主要在于,心态不会太崩,有了保底和练手,挑战理想中公司也不虚了。

这是我以前列的,不是我现在面的,这种算是均匀处理。但是更好都方式还是下面这种分法:

第一批:保底与练手

主要是一些小一点,待遇稍差一点的公司,看起来很容易进。

第二批:可能性大,最可能去的公司

这个是目标公司,基本满足需求。但是可能公司没那么大,但是还是满意,很有可能进的。

第三批:具有挑战性的公司

面试周期长,竞争大,准备时间长。可以考虑舍弃前面的offer的公司。但是 996 也是值得考虑的一点。

为什么要集中投递呢?

主要是面试完之后一周之内会出offer。只有offer同时出来,才能有选择的空间。一般公司不会给太多你接受Offer的时间。

还有一点就是心态问题。面试周期拖的越长,面试的心态和状态都不好。

面试准备阶段

知识梳理

进行知识梳理,进行查漏补缺,这里不要太求全,以重点为主 ,在大脑中构建一个前端知识网络

1. 构建知识网络图

我使用的是XMind

内容有点多,当然这是我之前一直用的方法,逐渐构成的知识网络。前端知识点太多,单靠记忆也很难,所以平时,查阅知识也会增加在上面,再次查阅,很容易找到。

首先我将我的前端知识分为下面这些大的方面

  • HTML(meta、HTML5)
  • CSS(包含CSS3、Less、Sass)
  • JavaScript(ES5、ES6、TS、重点考察面向对象)
  • Node(包含Koa、SSR)
  • Webpack(原理、源码、常用方法)
  • Vue(双向绑定/diff原理、源码、常用方法)
  • React(diff/hooks原理、源码、常用方法)
  • H5 & Hybrid(1px、布局方式、与客户端调用方式)
  • WebApi(存储、缓存)
  • 浏览器机制(渲染机制、HTTP/HTTPS、安全)
  • 性能优化(浏览器渲染、资源加载、请求、CDN、打包构建)

然后逐一分解成各个小的知识点,进行查漏,比如CSS

最后进行查漏补缺

先把里面的需要记忆的地方折叠起来,心里假设问自己问题,看能不能答出来,比如说

Question1:你能谈谈盒子模型吗?

那你应该答出以下关键点

  • 盒子模型分为哪几种?
  • 怎么计算盒子模型的各个content的高度和宽度?
  • 怎么设置盒子模型?

Question2:如何实现布局中的垂直居中?

那你应该要答出以下关键点

  • 垂直居中有哪几种方式?分别有什么优势和限制?
  • 简单的写出一个常见垂直居中出来
  • 如果你答出使用flexbox,可能就要问你自己,flexbox里面相关的东西,它与其它布局的比较

所以,我们构建的知识网络能达到一下效果,当面试官从一个问题转到另一个问题但时候。这个问题还是在我们的知识网络范畴里面。

大部分面试官,还是很重视基础的,所以说基础知识的梳理肯定是通过面试的第一步,也是其它人挂掉面试的最多的一步。

2. 突出重点

只是回答出一些简单的记忆的问题远远不够的。对知识的深度理解和掌握,才是面试的关键。

知识网络那么大,我们不可能面面俱到,所以我们得把握2/8原理,面试过程中问到的考察的部分就只有那20%而已,没必要全部深入。

以我这么多天面试情况来看,面试中问的最多的题目基本都是这些

  • HTTP/HTTPS (100%考到,重点中的重点,这个完全可以花半天时间研究下)
  • Webpack 原理、长效缓存、Tree Sharking 原理(简历中有写,100%考到)
  • Promise 原理方法、关于同步异步(100% 问到)
  • Flexbox 相关 (问到CSS基本必问,因为工作都会接触到)
  • this (中小公司都喜欢问题)
  • Vue 双向绑定原理(简历里写Vue,基本必问)
  • React setState 更新机制(简历里写 React,大概率会问)
  • Redux 原理(大概率会问)
  • 原型(大概率问)
  • 同步异步函数输出(大概率问,会延伸到 event loop)
console.log(1)
setTimeout(() => {
    console.log(2)
}, 1000)
setTimeout(() => {
    console.log(3)
})
console.log(4)
// 答案是 1 4 3 2
// 同步函数先执行,异步函数根据时间队列执行

上面这10个问题都是有极大可能问的问题,除非有面试官看到这篇文章,另辟蹊径问问题

3. 一定要刷题

为什么要刷题呢?

一个原因是技术好一点的公司都会要求面试者能解决编程题的问题,具备一定的算法能力。

第二原因是很多公司的面试题都是直接拿题库的题目,所以刷到了就是赚到了,同时也可以帮助你巩固知识

刷题的题型分为两种类型,一种是编程题,另外一种是知识题

编程题的话,可以直接在leetcode上面先挑一些低难度的题刷,熟练了再刷高难度的。

vscode 上有个leetcode的插件很好用,我经常用它刷下题。

知识题的话,可以刷下题库,很快一个小时可以刷上百道题。可以用牛课网里面的题库刷下题。我经常没事就刷下,里面除了前端以外还有其它方向的。

项目准备

重点项目梳理

  • 项目背景 解决什么样的需求,参与人数,项目前景怎样
  • 项目周期 xxx 时间到 xxx,完成度怎样,上线的app或者网站地址
  • 项目难点 xxx 遇到 xxx 困难,困难的点在哪里?你是如何解决这个困难的。你从中得到什么
  • 技术栈 xxx + xxx,怎样实现xxx
  • 关键地方实现细节 有个地方怎样实现的,这样实现的理由,还有其他方法吗

常见问题

  • 项目中遇到什么难点?怎么解决的?收获了什么?
  • 项目是怎样一个流程
  • 你在项目中是什么样的角色,做了哪些事情?

面试技巧

我总结下来有5个技巧

精准概括

废话越多,沟通成本越高。简明扼要,回答要精炼,先不急着扩展,面试官深入问的时候再扩展。比如

Question1: Vue通信有哪些?

常见有1.父组件到子组件Props,子组件到父组件事件回调,$emit, @handleEvent 2.非父子使用bus 3.v-modle 4.vuex

Qustion2: Vuex 是什么? 一个集中式的状态管理工具。

Question3: 它的原理是什么? 创建一个Store对象,对状态进行集中管理。通过commit:mutations来修改状态。dispatch:action 来组合业务逻辑,实现异步调用。

Question4: mutations 能执行异步代码吗?为什么? 不能,因为mutations更新state,是一个同步的更新过程,如果异步代码,会阻塞state的更新。

诚实认真

不知道的,就直接说不知道,或者没遇到过这种情况。

一般面试官都会说,没关系。然后问下一个问题。

不要争论

很多题目理解不同,会有不同的见解。如果某个问题,你觉得面试官理解是错的,不要马上否定,应该先记下面试官问题和解释,等面试出结果后在查阅资料确定对错。

因为在面试中短期的争论是得不出结论的,也没办法确定谁对谁错。争论的结果很大可能导致面试的失败。

自信果断

面试官经常会问像,这个过程同步还是异步?答同步,问确定吗?确定

有时候面试官会考验你是不是再猜题,重复问这个问题

如果你改口,那就有猜题的嫌疑,会留下不好的印象。这时候就算答的是错的,也要铮铮有词的答"确定"。

理解后答

一定要听清楚面试官的问题,理解面试官想要你说的东西,想清楚再答。不然答了半天,门不对题,那就尴尬了。

面试实战阶段

电话面试

接到3次电话面,两个下午五点左右,一个晚上8点,基本都是下班前。问的基本都很简单,最多的是Vue和Webpack、还有ES6相关问题

Q1: 简短自我介绍

简短回答即可

Q2: ES6有接触吗?

Proxy,Promise,箭头函数,async&await,Map&weakMap,Set,迭代器 这些会被随机问到

Q3: Map 介绍一下,它与对象有什么区别? Proxy 有用过吗? 介绍下它

Q4: Promise 相对于 回调有什么好处?async&await 相对于Promise有什么好处? Promise 怎么实现的?

Q5: webpack 有接触过吗?怎么优化打包构建?长缓存怎么做?tree sharking 原理是什么?

Q6: Http 有接触吗?谈谈你对它的理解,越详细越好?

Q7: 如何对处理安全问题,了解常见网络工具吗?

Q8: Vue 双向绑定原理是什么?

Q9: Vue 怎么自定义过滤器,怎么自定义指令?

Q10: Vue 里面 mixins 是怎么实现的?

Q11: 有写过 webpack 插件吗?webpack 插件是在什么时期运行的?

面完之后,一般第二天上午,HR打电话约现场面

网上做题

一般在牛课网做题,做完题后接视频面试,题目具体是什么忘记了,记一下大致内容

网上做题,编程题,和看代码题目偏多,不会直接考问问题形式

Q1: 盒子模型计算题

Q2: 考察原型,看一段代码输出结果

Q3: 考察同步函数异步函数,看代码输出结果

Q4: 三栏布局,左右两边固定,中间自由,手写代码

Q5: sessionStorage, localStorage,cookie 区别

Q6: Http 握手机制

Q7: 编程题 - 求两个数组交集

Q8: 编程题 - 替换字符串

视频面试

一般在做题之后,问题目相关的知识点。或者就是现场给题做,看你解答过程。

Q1: 尝试写一下简单的双向绑定代码

Q2: 写一下三栏布局的代码

Q3: 把这个Promise的代码改造成 Try Catch来获取异常

Q4: 写一个简单的 Promise

Q5: 写一个简单的防抖函数

Q6: 对数组扁平化操作

基本面下来,面试官会一点一点引导你,看你的思路清不清晰。不会必须能跑起来,大致写一个思路即可。

现场面试

注意一定要提前一点,一是要找位置,有的公司在角落太偏,真的不好找,避免误点。二是进去要提前一点填表,早一点留个好印象

基本都是约的上午10点半左右,或者下午2点。填完表开始面试

技术面

一面基本都是部门前端leader或者资深前端,内容和前面的差不多。

区别可能就是问项目和工作经历偏多一点,现场面通过概率也高一些。

Q1:自我介绍

....

Qn: 项目中遇到什么样的难点?怎么解决的

Qn+1: 你简历上有写xxx,具体讲一下

Qn+2: 你这个是如何考虑的? 为什么要这样做?思考过有什么改进的点?

Q2n:你有什么想问我的?

PASS 稍等一下,我叫一下我们老大来

FAIL 今天你先回去,HR之后可能会联系你

BOSS面

什么问题都可能问到,偏综合性(从以下几个方面考察)

  • 思维习惯
  • 交流方式
  • 个人发展
  • 职业规划
  • 技术性思维
  • 对技术的理解能力
  • 高度概括能力

Q1: 自我介绍

Q2: 做个思维题(其实是脑筋急转弯)

Q3: 谈一下HTTP相关

Q4: 输入地址到xxx,全部讲一遍,越详细越好

Q5: 算法题(深度遍历,广度遍历,排序,查找)

Q6: React、Redux 思想、原理

Q7: 最近在看什么书?学什么技术?

Q8: 你的职业规划是什么?

稍等一下,我叫一下HR。或者HR会在一周之内通知你

HR面

主要是谈个人情况,再就是工资期望,什么时候上班等等

目前的状况

  • 是否离职
  • 居住位置(距离上考虑)
  • 是否有家庭
  • 是否有长期发展打算
  • 什么时候可以入职

期望的薪职待遇

  • 可接受工资
  • 是否接受加班

加入公司的意愿

  • 对公司了解情况
  • 通过什么方式了解到公司
  • 对公司感受如何

可达成性

  • 面试多少家公司
  • 拿到多少家 offer
  • 拿到 offer 的公司怎么样,有没有想去的意愿

后记

完成这边文章的同时,作者已经入职一周多时间了。这一周真的太忙了,白天基本没时间。只能每天晚上抽一个小时时间写作,断断续续写了一周左右,现在终于把它写完了。

如果能对你有帮助,便是它最大的价值。都看到这里还不点赞,太过不去啦!😄

由于技术水平有限,文章中如有错误地方,请在评论区指出,感谢!

因为目前公司用React + TypeScript + 魔改的Vue + 魔改的Webpack + Node 技术栈, 以后文章更倾向这些方面的输出,希望多多关注!

最后祝大家都能找到自己满意的工作!