3

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

 2 years ago
source link: https://www.cnblogs.com/echolun/p/16691309.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
1213309-20220913225609659-571145275.jpg

从深圳离职回武汉也一周多了,上周不慌不忙的安排了两场面试,到本周一为止两家都收到了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,简历出色还是可以杀出来,不过如果当前薪资已经差不多,跳槽薪资涨幅不大的话还是建议先稳一波。那么这篇面试大概就这样了,也希望后续面试顺利,本文完。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK