前端面试第快速复盘,不标准的面试经验分享 (二)

时间:2022-09-29 20:05:47
前端面试第快速复盘,不标准的面试经验分享 (二)

如果说上篇面经能传达拿到offer的喜悦,那么这篇文章能传达的可能只有各类失败的总结。后续时间我又接触了红杉资本、小满科技、微派网络、作业帮、刀锋互娱,腾讯等。其中有挂技术的,有面试刷KPI走流程的,有腾讯会议等了十多分钟说面试官家里有事没下文的,整体体验就是一个字,难。

如果上篇文章我还在说实力没问题可以试试,那么这篇文章我对身边每个有提桶想法的人的建议都是,苟住别离职,有想法你也等到明年春招再试试水温。而且我的直觉,因为目前市场上待业人数太多了(还在裁),到明年春招竞争一样会非常激烈。我与一些公司HR了解情况也是,一个岗位几千人竞争,而且不排除学历,经历背景比自己强很多的竞争者;除此之外,企业由于不缺人,今年想要钱真是难上加难,我个人情况就是好几家简历对我感兴趣,初步沟通问了我预期薪资后直接没下文了。

所以这篇文章开始前,我给大家的建议就是能苟着的就苟着,或者骑驴找马有保底了再考虑离职,裸辞是万万不可的。我找工作也用了脉脉,打开社区看一眼,各种大厂背景,清华毕业研究生到现在2个月 0 offer,曾经的尊严都一扫而空了...

当然,我说这些也不是为了贩卖焦虑,只是给大家传递一个市场现状。其实很多人都非常优秀,但是面试是个很玄学的东西,抛开实力还看运气看眼缘,几千人争一两个岗位,也许在面试开始,你只是对方HR刷KPI一个指标罢了。要要记住,错的不是我,是这个世界!不要自我否定,也不要失去信心,继续等下一个机会就好了。

与上篇文章一样,部分题目我不会直接给出答案,大家可以作为面试者角色代入,看看自己在当下会如何回答,最后,我也希望我这些失败的经历,能给大家一些微弱的帮助。

贰 ❀ 失败的经历分享

贰 ❀ 壹 红杉资本

红杉资本没进入面试环节,作业就给我挂了。面红杉之前一定要先写作业,它们的作业项目在GitHub是开源的,有兴趣的可以搜一搜。你需要先从GitHub拉仓库下来,完成后再提一个PR就算交作业了。前端作业其实不难,给你一个轮播的视频,让你实现视频中相同效果的轮播组件,大概2-3天完成了交上去就好了。

讲道理,一个轮播组件有几个人会觉得困难?但我挂的原因是说我代码仓提交文件过多,其次是轮播的动画实现欠妥。所以我给想面红杉的同学两个建议,第一是改动少一点,前端因为要求必须用ts+hooks写,我当时还加了ts配置相关的文件,看样子他们接受不了。其次别自己从零造*了,他们要的就是最佳实现,所以我建议去GitHub去看看高星轮播组件,借鉴它们的思路也好,起码能保证你作业通过概率高点。另外,红杉的反馈会很慢,我当时提交PR足足一周后才给我反馈,整个面试周期会被拉的比较长,大家得有点心理准备。关于红杉我只能给这些建议了。

贰 ❀ 贰 小满科技

一面挂。很莫名其妙的一家公司,反正在我心里现在印象非常差,面试过程中面试官全程板着个臭脸,跟我欠他钱似的,全程问不出几个问题,导致我也很难去表现自己,几个问题之后一直在重复的问我有没有问题问他,给我的感觉就是非常想快点结束面试。这里我还是整理了一面中遇到的问题:

1.说下你对于事件循环的理解?

2.说下微任务与宏任务区别。

3.讲下你的项目?

4.说下你在项目中做过有难度的事情。

5.谈谈自己的优缺点

6.你是如何看待用户体验的?

面试结束后,我问了下他对于我的评价,然后他把我回答的对于自己优缺点的看法重复说一遍,可见面试过程完全没用心,面试结束后第二天提示我简历进了人才库!!!喜提人才库。

贰 ❀ 叁 微派网络

武汉一家做游戏和社交软件的公司,比如贪吃蛇大作战,青藤之恋,很搞人的是,我在面了这家之后,B站就给我推了青藤之恋app广告,大数据真是无孔不入。

本来猎头给我约的是9月21号上午11点,然后我在腾讯会议等了10分钟没看到面试官,问了猎头,猎头又问了对方公司HR,跟我说面试官今天家里有事,不面了...我在想,这事情不能提前告知???

然后就没下文了,我心里已经放弃了,结果这周猎头又找到我,说再约面试,我当时就很抗拒,猎头也是一顿好话,说自己也不容易,我就说行吧,约了9月28号也就是星期三。

一面面试过程感受其实还好,分为三个部分:

第一部分主要是看简历聊了下过往经历:

1.说下你在工作中比较出彩的地方?

2.看你有管理经验,能说下管理过程中有遇到什么问题吗?你是如何推进解决的?

3.有做过构建优化吗?

第二部分针对基础知识,问题如下:

1.Javascript为什么要设计成单线程?

2.说下页面渲染过程。

3.说下你对于http缓存的理解?http缓存的状态码是多少?

4.http缓存通信过程是怎么样的?能简单说下吗?

5.promise,async await有什么区别?

6.说下你对于迭代器的理解?

7.假设我一个对象想要能迭代,可以怎么做?

8.说下你对于闭包的理解,日程中有哪些闭包?

9.了解函数柯里化吗?说说你的理解

第三部分做题,第一题让我说下如下代码的输出以及为什么。

let num = 10;
let obj = {
  num: 20,
  run: function () {
    console.log(this.num);
    this.num = 30;
  },
};
obj.run();
let run = obj.run;
run();
console.log(num);
console.log(obj.num);
// 20 undefined 10 30

因为比较简单,这里我直接给出答案,考察的无非就是this指向,关于this如果有疑问,可以阅读如下文章:

五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

第二道题是一道编程题,需要我腾讯会议共享屏幕写代码给面试官看,题目就是简单的数组转tree,如下:

// 给定如下数据结构
const arr1 = [
  { id: 1, pid: 0, title: "html" },
  { id: 2, pid: 1, title: "body" },
  { id: 3, pid: 2, title: "div" },
  { id: 4, pid: 2, title: "div" },
  { id: 5, pid: 3, title: "a" },
  { id: 6, pid: 3, title: "a" },
  { id: 7, pid: 5, title: "span" },
];

// 转换成如下数据
const arr2 = [
  {
    id: 1,
    pid: 0,
    title: "html",
    children: [
      {
        id: 2,
        pid: 1,
        title: "body",
        children: [
          {
            id: 3,
            pid: 2,
            title: "div",
            children: [
              {
                id: 5,
                pid: 3,
                title: "a",
                children: [{ id: 7, pid: 5, title: "span" }],
              },
              { id: 6, pid: 3, title: "a", children: [] },
            ],
          },
          { id: 4, pid: 2, title: "div" },
        ],
      },
    ],
  },
];
// 实现一个方法,转成tree结构
function format(arr) {};

关于数组转tree,掘金都有不少文章,递归也好,先转map再利用浅拷贝关系去建立父子关系也行,这里我就不贴代码了,感兴趣大家可以自己写写。

做完题之后面试差不多就结束了,结果到当天下午3点,猎头联系我说约个二面,一面通过了,因为我已经决定了入职了,所以想了想请了猎头一杯喜茶,表示歉意,让她帮我拒绝掉了。

贰 ❀ 肆 作业帮

作业帮二面挂,先说下第一面。

作业帮一面:

1.说下你对于react的理解?

2.看你之前用的是react,能说下reduxflux的区别吗?

3.垂直定位有几种方式?(一直追问更多)

4.标准盒模型和怪异盒模型区别?

5.说下scssless的区别?

6.httphttps有什么区别?

7.讲一下跨域以及对应的解决方案。

8.说下对于typescript的理解。

9.看你之前做过H5,假设我现在想做适配,说下你的方案。

10.写一个防抖(在线编程)。

这些问题中有几个问题我得单独拧出来说下,关于reduxflux的区别可能有些人不太清楚,省的大家去查我这里简单介绍下。

redux这个词由 其实是由reducer + Flux 组合构成,redux在设计上借鉴了Flux部分概念,从区别上来讲主要是两点:

第一点,数据流不同:

Flux数据流为:Action --> Dispatcher --> Store --> View。

前端面试第快速复盘,不标准的面试经验分享 (二)

redux的数据流如下,可以看到dispatcher被替换成了纯函数reducer

前端面试第快速复盘,不标准的面试经验分享 (二)

第二点,store数量不同:

Flux支持定义多个store,可能一个组件就有一个与之对应的store,与传统MVC相比,虽然Flux解决了ViewModel直接通信可能造成数据源不稳定,逻辑缠绕的问题,但它又产生了多个Store之间相互依赖的问题,这为不同store之间的维护又产生了新的负担;而redux强调单一数据源,永远只有一个全局store

关于标准盒模型和怪异(IE)盒模型区别,IE都凉了我是没想到在武汉居然被两家公司问到了这个问题(不敢相信我是在面高级开发...),防不甚防,这里我直接说下答案大家过一眼就好了:

在标准模式下,一个块的总宽度= width(content) + margin(左右) + padding(左右) + border(左右)

在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

关于防抖,从零教你写防抖可以看这篇文章:

JS 保姆级贴心,从零教你手写实现一个防抖debounce方法

聊完问题之后,我就跟面试官在闲聊,扯到了作业帮目前的运转情况,裁员情况。他告诉我之前作业帮5万员工,裁了接近4万,目前还算稳定,不过给我的建议是别来,武汉这边作业帮团队今年5月分起步,而且给不起钱,根据他的消息,可能只能开17K左右。之后他问我看我要不要继续往下推面试,我说先推吧,积累下面经也不是不可以,于是就有了第二面了。

作业帮二面:

作业帮二面问题其实不多,开始就拿我简历问了下项目细节,追问了下一些方案,我在讲述过程中,对方一直若有所思的样子,然后动不动十几秒沉默不语,问他是有什么问题吗,他说是在思考,项目聊了差不多半小时。

之后就是一些基础问题了,如下:

1.说下https请求过程

2.了解跨域吗?有什么解决方案?

3.为什么jsonp能解决跨域?

4.看你有做过性能优化,能说下吗?

聊完这些就得在线做题了,一共两题。

第一题,要求封装一个retry

// 要求实现如下方法
const retry = (fn, limit) => {};
// 假定这个是请求
const request = (id) => {};
// 通过调用retry得到真正的执行方法,这里的3是retry次数
const fn = retry(request, 3);
// 传入请求参数,假设失败了会自动尝试3次
fn(id).then((res) => {});

第二题,leetcode原题415. 字符串相加

给定两个字符串形式的非负整数 num1num2 ,计算它们的和并同样以字符串形式返回。

输入:num1 = "11", num2 = "123"
输出:"134"

输入:num1 = "456", num2 = "77"
输出:"533"

输入:num1 = "0", num2 = "0"
输出:"0"

贰 ❀ 伍 刀锋互娱

这一家一面难度同样不高,但是也是一面挂,部分问题如下:

1.说下ONES产品与其它产品的区别,你们的优势在哪?

2.说下url地址栏回车后到页面渲染出来的过程。

3.能说说三次握手四次挥手吗?

4.说下你对于垃圾回收的理解。

5.聊聊vuereact的区别。

6.看你有做性能优化,能说说你排查的心得吗?

7.能谈谈你未来5年的职业规划吗?

因为问题其实都是差不多的,也没聊什么,聊完之后也就没有下文了。

贰 ❀ 陆 腾讯

一面挂。其实最开始猎头联系我的时候,我还以为是腾讯外包,第一时间准备拒掉,最后得知确实是腾讯本部,面试是在本周二晚上七点进行的视频面试,开局就要在线先做三道题,规定30分钟内完成。

第一题,leetcode原题169. 多数元素

定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。

你可以假设数组是非空的,并且给定的数组总是存在多数元素。

输入:nums = [3,2,3]
输出:3

输入:nums = [2,2,1,1,1,2,2]
输出:2

第二题,leetcode原题112. 路径总和

给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum 。如果存在,返回 true ;否则,返回 false

第三题编程题:

// 实现一个方法,扁平化如下数据
// 原数据
const obj = {
    a:1,
    b:{
        f:'2',
        g:'3'
    },
    c:{
        d:[1,2,{
            e:true
        }]
    }
}
// 转化为
const obj2 = {
    a:1,
    'b.f':'2',
    'b.g':'3',
    'c.d[0]':1,
    'c.d[1]':2,
    'c.d[2].e':true
}

实不相瞒,我第三题挂了,之前只写过数组扁平化,还真是第一次遇到扁平对象,在做完题之后就进入基础问答了,题目如下:

1.基本数据类型有哪些,跟引用类型在内存中有什么差异?

2.说下跨域

3.说下http安全的理解,如何避免

4.说下http缓存的理解

5.聊下react更新后渲染到页面的过程

6.说下你在项目中有亮点的事情,追问了方案。

上述题目单独说下题目1,其实站在八股文的角度,我们常说基本类型数据的变量名与val都在栈中,而引用数据类型的变量名以及保存的引用地址都在栈中,真实的数据存放在堆中。这也许是面试官想要的答案,不过我也是在最近得知这个答案存在问题,具体内存中的差异可以看看哔哩哔哩winter大佬的看法:

鉴定一下网络热门面试题:JavaScript哪些变量在堆区哪些在栈区?

聊完上述后也是跟面试官闲聊了下,了解下腾讯目前裁员情况以及工作强度,我得知的是深圳目前仍在优化中,裁员继续,武汉腾讯相对稳定一点,但是不敢保证。深圳那边上班是早十晚九,武汉是早十晚八,具体看部门。不过现在这个裁员风波下,估计大家都往死里卷...

好了,以上就是我在最近半个月所接触的公司了。

叁 ❀ 杂谈

事实证明,我在回武汉第一周的面试真的太顺利了,没遇到困难以至于我没来得及看清武汉市场全貌,当时就拒绝了之前两家的offer(有效期一星期),这点大家千万别学我。

当时在拿到offer之后,我给我妈打了一个电话,我说我真的不知道该如何选择,人生又不是电视剧,我也不知道未来的我剧情会如何发展,不继续面的话我也不知道有没有更好的。她说,自我工作起她就不能给我任何参考意见,她能做的就是无条件相信我,支持我的选择。答案一开始就在我心里,我可能只是想寻找一个倾述口。考虑到offer只有一周的有效期,我没把握在一周内拿到更好的,于是拒绝了前两家。

之后的面试正如上文,因为武汉确实没办法跟北上广深比,我对于薪资的要求导致我自己就主动过滤掉了一大半的公司,剩下符合条件又有很多并不招人,于是能面的公司就更少了。有限的公司面一家挂一家少一家,很多公司投递到现在简历都未查看,让我觉得难的不是面试难,而是我已经做到我目前的极限依然没有结果。

在之后我与金山的前同事聊天,他说他一个被腾讯裁员的同学,到现在快2个月了还没找到工作,这就是互联网寒冬,波及到每个人。

后来,我还是决定联系之前推掉的offer的公司(与我上家技术氛围很像的一家),当我问对方是否还招人时,对方HR很快速的回了一个招字,我就知道还有戏。在第二天公司CTO又与我约了一个视频面试,聊了下目前的情况,我很坦诚的讲述了目前的状态,而对方也说,其实在我之后的一个月,他们也没再招到觉得合适的人,再一次表示了对我入职的期待,只要我这边意向确定,那就可以给我发offer,于是在昨天,我最终还是找到了回武汉的工作。

前端面试第快速复盘,不标准的面试经验分享 (二)

通过这件事,关于offer的期限,我觉得都是可以谈的,找工作本来就是双向选择,只要对方还有hc,之后聊的好再入职也没什么问题,最终我还是决定在冬季来临之前先上岸。

另外,我在今年三月开始自己就整理了一个前端面试知识点汇总,部分是我写博客5年来觉得还不错的理论知识,还有一些题目暂时没答案或者答案并不完善,大家其实也能根据题目对应去搜索,起码能起到一个复习引导作用。当然相关知识点我在之后也会一步步完善,有兴趣大家也可以看看。

最后,希望这篇失败的文章能为大家共享一些信息,如果有帮助就更好了。