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

时间:2022-09-14 20:42:48
前端面试第一周快速复盘,不标准的面试经验分享 (一)

从深圳离职回武汉也一周多了,上周不慌不忙的安排了两场面试,到本周一为止两家都收到了offer,考虑到某些原因还是把两个offer都拒了。其实说实话也没想到面试能有这么顺利,不过清楚自己在市场上的定位后,还是想之后花时间再搏一搏。

说在前面,这两家均非大厂,第一家主要做海外SaaS服务,公司技术氛围与我上家很相似,比较看好。前后一共经历了五轮面试,一路过关斩将面了4天最后薪资还是没谈拢,实属遗憾。第二家为国内某知名网游加速器,这一家只有一轮面试(2个人一起),相对简单轻松。那么接下来就分别罗列面试中遇到的问题,部分问题都比较开放,所以我也不好给答案,你可以将自己代入到面试者的角色中,想想如果是自己会如何回答。

贰 ❀ 某SaaS公司

贰 ❀ 壹 编码能力与风格检验

正式面试前,HR给我说了有题目需要先做,线下完成,题目是三选一:

  • 实现一个无限下拉的功能,对方有提供接口,加分项是考虑到DOM节点比较多时该如何优化,可Google,但是不能借助第三方库。
  • 实现一个全局Toast组件,单例,一次注册全局调用,样式自定义。
  • 实现一个Tree组件,有提供模拟数据,需要将数据展示出来且支持展开收拢,样式自定义。

要求是三天内完成,支持codeSandBox或者github,随口问了下HR说如果做的多有加分,本来打算三题全做,但是耐不住现在租的房子的网络太差了,访问codeSandbox最终只做了两个组件,实现也不是非常好,就当交作业了 组件链接

第一题虽然没做,但是加分项很明显考察了虚拟列表,我想大家应该都知道,这里就不过多介绍了。第二天就提交了链接给HR,很快得到了答复,评价还算不错,代码整洁,结构目录清晰,整体实现没有太大缺陷。所以紧接着就在当天中午十一点约了二面。

贰 ❀ 贰 基础面

这一面是入职后的同事负责,主要考察基础知识,问题大致如下:

谈下react 15前后的渲染差异?

这里很显然考察了fiber引入前后的渲染差异,从这个问题我主动引出了fiber,大概讲了fiber带来的渲染提升。

你刚提到了fiber,能具体说说你的理解吗?

我之前专门有读源码写博客....正和我胃口,根据文章思路讲了讲我的理解。

你觉得fiber解决了什么问题?

我觉得问题有点重复,不过还是单独拧出了fiber之前的渲染掉帧原因,以及fiber的任务优先级,调度让出等等,强调了fiber是如何提升渲染体验。

加入了fiber,你觉得渲染时长变少了吗?

并没有,fiber并没有优化算法,只是通过调度让出,以及优先保证渲染,给了用户一种渲染变快的假象。

关于fiber具体可以见这篇文章 【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行,我觉得能耐心看完上述所有问题都能解答...

了解diff吗?说下vuereact diff差异。

vuediff我确实没看,所以结合虚拟dom讲了下react是如何进行diff对比。

diff单节点和多节点更新有什么差异?

其实就是是否是list的差异,每次diff源码中都会判断此次是不是一个数组,如果是数组就会走key的特殊处理,毕竟key日常我们只在list时需要提供。于是我又拓展讲解了key的核心作用。

关于虚拟domkey有疑问可以阅读这两篇文章,我感觉说的也很详细:

[react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?

React key究竟有什么作用?深入源码不背概念,五个问题刷新你对于key的认知

你觉得component element jsx三者关系是什么?

这个问题其实我没太get到面试官的意思,不过还是从渲染过程以及结构解释了下我的理解。

react是单向还是双向数据绑定?

react都知道是单向,如同瀑布的水自上而下流动。每个组件都可以接收上层传递的props,同样自身的state也能构成下层组件的props

双向绑定和单向数据流有什么优缺点?说说你的看法

双向在某些场景开发更便捷,毕竟在vue底层已经帮我们做了viewmodle的关联,但在react不同,很多事件监听以及数据跟踪处理需要人为关注,代码量会更大。而站在组件设计的角度,保证数据的唯一性(唯一进出口)有利于组件的维护,各有优势。

说下class和函数组件的区别?

  1. 底层渲染不同,组件在渲染时会判组件类型,假设是class组件会先new一个实例,再通过实例.render()拿到node节点,而函数组件则是直接调用通过return得到渲染节点。
  2. 编码方式不同,class更多依赖生命周期钩子,而后者早期并没有state的概念,在引入hooks后更倾向于函数式编程。
  3. 有没有this的区别,对于this理解薄弱的同学而言,函数组件确实更清晰易懂。

高阶组件用过吗?什么场景用,有什么问题?

组件之间存在共同的数据加工时常用,问题就是嵌套地狱,在数据溯源时非常痛苦。

你觉得hooks给你带来了什么?

更少的代码量,更清晰的编码方式,以前要共享部分逻辑常见就得hoc,但现在能封装成一个自定义的hooks。其次,在部分减少无效渲染上,hooks确实更方便。

你觉得hooks性能更好吗?你是怎么做性能优化的?

并不觉得,毕竟走同一套diff,这要看什么场景,毕竟相同的功能不同的开发,不同的实现方式都会导致不同的结果。就比如useMemo虽然能缓存,减少重复渲染,但是不会用可能只是徒增内存,并没有很好的提升体验。

关于性能优化,我从简历里挑了两个方面拓展来讲了,一个如何减少无效渲染,一个单点性能问题排查。

关于如何减少无效渲染,可以看看这篇文章:React性能优化,六个小技巧教你减少组件无效渲染

遇到过闭包陷阱吗?

每个hooks新手可能早期都遇到过,比如useEffect第二参数时空数组,或者监听了一个不变的值,会导致内部逻辑永远不会重复触发,内部变量始终访问之前的缓存值。

你觉得useContext能取代redux吗?说说你的看法

不能,我一开始说的是项目复杂度的问题,但是面试官不满意,追问了更深的原因,他期待的答复应该更倾向于如下几点:

  1. 功能耦合度问题,redux从来就不是必须的,但它能更专注于状态管理,让研发从状态监听以及响应中解脱出来。
  2. context存在reRender问题,在性能方面不是很好。
  3. context在层级过高的情况下存在无法更新的情况。

让你设计一个成员搜索组件,每次搜索后都会发起请求,怎么设计,简单说下思路?

因为更倾向于业务,简单说了下思路,分为搜索和list两部分,核心聚焦在搜索上,需要关注防抖以及cancelToken的问题,避免接口并发的问题。

你觉得你在上家公司最出彩的地方是什么?

因人而异,可以说自己在公司做出的成就,可以说自己在公司的成长,没固定答案。

为什么离职?

因人而异,如实说就好了。

到这里基础面差不多就结束了,对方问我有没有什么问题想问他,我就直接问了面试评价,毕竟行就行不行就下一家,节约彼此的时间。对方就说让我自己给自己打个分,我结合问题的回答说70多吧,因为大部分问题自我感觉回答的都不错,然后对方也说我基础不错,整体挺不错的,之后HR给的面试反馈也差不多这个意思。

贰 ❀ 叁 项目经历面

在面完基础后,又约了第二天的项目经历面试,但我是没想到是两轮,直接变车轮战了,第一面的面试官相当于未来的同事面,第二面是CTO,先说第一轮。

你是怎么做性能优化的,思路是什么?简单说下。

因为我简历里有专门做性能优化的经验,所以这里我挑了两个案例说了我当时的分析过程,(写博客记录的好习惯,到现在也非常清晰)。

前端如何把控以及减少性能问题的出现呢?说下你的想法。

方案评审,code review相关扯了一下。

说下你在ONES最出彩的地方。

最出彩,最出色,印象最深...都很爱问这个问题,然后我还是又讲了自己的成长,算一个重复问题。

你提到了Wiki,那假设现在让你做一个复制粘贴功能,你如何设计?

我只参与了wiki海量的bug修复,并未参与过多业务,粘贴API虽然知道,但是关于兼容相关其实没有过多了解,如实回答就好了。

你们的迭代流程是怎么样的?

BA需求拆分--产品出原型--需求评审会同步相关信息--UI出设计稿--研发出方案--方案评审--进入开发--研发自测--dev环境部署与测试参与--集成测试--版本上线。当了挺久的小组迭代负责人,所以对于发版这块算是滚瓜烂熟了。

为什么离职?

重复问题。

这一面比较简单,对方也说能面试的时间其实不多,给我的感觉比较仓促,然后让我在腾讯会议等会,CTO会来进行第二面。

贰 ❀ 肆 CTO面

面试一开始,对方直接开了视频,出于视频礼仪我也打开了视频(还好提前洗了头),但由于我表弟的网真是太烂了,视频直接给我卡成PPT,无奈我说要不还是语音沟通吧,于是转成了语音。面试前也聊了下家常,得知CTO是荆州人,我说我高中经常去荆州补习,一下子拉近了关系。

看你不是计算机专业的,怎么想到做前端开发?

大学有网页设计的课程,大学毕业就思考要走什么路,最终选择了这条路。

你觉得ONES产品中最亮眼的功能是什么,说说你的看法?

短暂的思索,讲了下 ONES Project部分功能,但大部分功能其实也不是我做的,只是平时有读过部分代码,宽松的问题放开说就好了,毕竟也没有固定答案。

说下你在ONES最出彩的地方

重复问题,因为对方是CTO,我觉得这一关比较重要,就详细讲了下自己的成长,如何从一个修bug的菜狗成长到在ONES处理问题小有名气,直到离职最后一天,国际化团队还拉着我帮忙分析问题。又不满于现状临时加入性能优化小组做性能优化,以及平时自己留意一些体验不好的地方用爱发电做优化,最后做某个需求因为组件库也需要提供支持,但是他们没资源,无奈我又临时加入组件库,先开发组件再做业务,也因此做完后被组件库小组项目经理一顿夸,三次收到组件库小组转岗邀请(离职期间一直希望我能别走调过去)。其实说这么说,都是想突出自己对于技术成长的渴望。

你是如何看到前端未来发展的?

JQ聊到angularjs,再到vueReact,扯到了低代码,开发成本降低,研发关注分离,更聚焦于业务层,类似的话术网上一大堆,大胆说就好了。之后以react为例,又聊到hooks相对于class组件的部分优势等等,比如不用考虑this等等。

既然你提到了this,闭包这些的底层模型是怎么样的吗?比如闭包不会释放,那为什么不会释放,底层是因为什么?

这个问题说实话我答不上来,虽然之前有看执行上下文原理,了解过上下文创建的一些原理,但是对于底层模型说实话没看过,如实回答了。大家如果有了解的可以在评论区留言,我也学习下。

你们有做APP吗?有了解RN与flutter的差异吗?

有,不过APP是移动端小组专门负责,使用的技术是Flutter,因为没用过所以区别答不上来。

你上家的研发流程是怎么样的?

重复问题,见上。

看你处理了这么多bug,有通过反馈来提升前端代码质量吗?

有,平时会搜集研发同学出现bug的原因,对于踩坑,或者使用不当的地方会搜集到一定数量后在月会同步,离职前最后一次前端月会还分享了如何减少组件渲染,内容我也整理成了博客,见博客最新一篇文章。

说下你处理的印象最深的问题。

太多了,在ONES处理了上千个问题,总有几十个属于疑难问题,挑了三个讲了下我是如何分析以及一步步得出真相的过程。

你觉得了解前端业务对于前端开发有帮助吗?

有,还是以ONES为例,在处理权限问题时,如果你对于权限设计比较陌生,你可能都区分不出一个问题时客户不会用,还是真的时一个bug,我又结合了一些案例讲了我是如何分析,以及一些处理bug比较的同学是如何分析的区别。了解业务也能便于你重构改善这部分的功能,反正很重要。

你刚提到权限系统,如果让你来设计一套权限,你会如何做?

答不上来,只修过部分问题,没完整了解过,反正不知道的如实回答就好了,不需要支支吾吾。

有了解前端安全吗?

虽然我想说xss攻击,但是想了下全是理论,也没真的处理过,所以就没讲。但是在职期间也帮银行客户处理过严重的安全漏洞,所以就挑这个说了下。

最近在学什么?

算法,比较感兴趣,nodego,想转全栈。

那你觉得全栈需要具备哪些技能?

我说我理解的比较浅,前后端运维吧,对方说好的全栈还需要懂设计,有好的审美之类的,这个我觉得也不算一个问题吧,随便聊聊。

为什么离职?

重复问题。

期望薪资。

到这就聊的差不多了,然后问我有没有什么问题,老规矩,直接问面试评价。结果对方说在研发里,像有我这样沟通能力的确实很少见(可能我贼能聊吧),而且结合我处理问题的能力能耐心读很多人的代码,真的很不错。最后聊完,CTO又把视频打开了,说再看看我,我就知道这一面稳了。

面完之后两小时,HR给我同步了面试反馈,大家都觉得我很优秀,虽然有偏科,业务能力稍有薄弱(结合前面一些让我给方案,因为我没做过,所以说不出来),但是解决问题的能力正好是他们所需要的,而且沟通大家都觉得很棒,也问了我有没有兴趣带团队,讲了武汉分部的一些情况等等,我当时讲道理都乐开花了。

贰 ❀ 伍 CEO综合面

这一面已经是第二周的周一了,好家伙前前后后给我面了4天。这一面也是视频面,因为网络问题,无奈我跑我表弟房间面,身后就是一整排我表弟挂着的衣服,第一眼对方也许以为我是直播带货的。

关于聊的问题其实都比较宽泛,我个人反而不太喜欢回答这类问题,大致如下,部分问题存在重复,我就不再重复解释了。

自我介绍

离职原因?

说下你未来五年的规划?

你觉得一个优先的开发应该具备哪些能力?

说下你在ONES最出彩的经历?

如果让身边同事评价你,你觉得自己的优缺点分别是什么?

最近有学什么?

有什么问题问我?

整个过程比较轻松,最后我还是问了面试评价,CEO直接说YES,那么这家公司五面就算全部结束了,顺利通过。

叁 ❀ 某加速器公司

相对于第一家,这一家面试其实可以说就1面,1面聊技术问了一些问题,2面直接谈薪资准备发offer了,其实仔细一想,应该是简历高度符合,所以只是简单的聊聊情况确认简历可信度,先说一面说。

因为我简历有写管理经验,所以前十几分钟一直在聊管理相关的问题,部分问题如下:

你之前公司研发流程是怎么样?

公司产品支持定制吗?如何满足定制需求?

SaaS存在多个版本,你们是如何管理不同版本的?

做过哪些性能优化?能不能说下思路?

能聊聊对于fiber的理解吗?

了解高阶组件吗?说说常见场景?

诸如此类,然后说差不多了,我当时一愣,这才半小时啊,这就没了?对方说技术肯定没问题的,直接约了二面。同样也是第二周周一,我以为是技术复试,没想到直接进入薪资确认以及入职后工作负责范围,问我是否愿意,愿意的话现在就发offer,因为我第一家投入了很大的经历,对方也觉得我的最终选择可能不是他们,所以说我可以先考虑下,第二家大概这样了。

肆 ❀ 一个教训

我在第二家二面时,对面技术总监听到我说面的另一家居然有五面表示很惊讶,他说如果这一家聊到最后不给我一个合适的薪资,那就确实很对不起我了。戏剧的是第一家最终薪资确实时,在对方已知我已有offer的情况下,还是给我开了一个尾数比第二家更低的薪资。我仔细反思了自己第一家的面试过程,由于这一家跟ONES的技术团队以及技术氛围非常相近,很有技术追求,所以我比较看好,整个过程都表现的非常想去,所以薪资上实属把我拿捏了。HR可能也听出了我的失望,一直在强调平台氛围等等,我说这也不能怪你,毕竟薪资不是你来给,我还是得考虑一下。

通过这件事,我确实学到了一个教训,在面试中体现技术就好了,没必要透露自己太多喜悦以及很想去的神情,越这样对方越容易拿捏你,感觉你很想来很好压价,所以今后要做一个高冷的人!

两家公司都给我考虑时间,期间第二季还是很希望过去,不过结局我还是把两家offer都拒绝了,薪资范围都是2开头但尾数不高,其次两家的公积金都不高,因为短期内要买房,所以还是很看重公积金缴存比例。

伍 ❀ 未来

通过这次面试,主要还是弄清自己在市场的定价,有个一个范围后才好决定下一步怎么走。粗略统计了下武汉部分公司,小红书、字节、红杉资本、斗鱼、小米、作业帮、联想等,后续打算一家家内推面,大概率进不去,毕竟学历渣,但万一成了那不得笑醒。本来去年想着是回来让同事推我去金山...结果今年金山直接裁员,锁社招HC到现在,直接没戏。

今年整体行情确实不咋地,不过只要实力OK,简历出色还是可以杀出来,不过如果当前薪资已经差不多,跳槽薪资涨幅不大的话还是建议先稳一波。那么这篇面试大概就这样了,也希望后续面试顺利,本文完。