前言

首先，我简述下自己面试的背景。我是湖北人，年前因为个人原因辞职，后来因为疫情原因被迫在家失业待业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 技术栈， 以后文章更倾向这些方面的输出，希望多多关注！

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