前端面试第一周快速复盘，不标准的面试经验分享 （一）

壹 ❀ 引

从深圳离职回武汉也一周多了，上周不慌不忙的安排了两场面试，到本周一为止两家都收到了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吗？说下vue和react diff差异。

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

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

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

关于虚拟dom与key有疑问可以阅读这两篇文章，我感觉说的也很详细：

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

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

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

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

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

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

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

双向在某些场景开发更便捷，毕竟在vue底层已经帮我们做了view与modle的关联，但在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，再到vue和React，扯到了低代码，开发成本降低，研发关注分离，更聚焦于业务层，类似的话术网上一大堆，大胆说就好了。之后以react为例，又聊到hooks相对于class组件的部分优势等等，比如不用考虑this等等。

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

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

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

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

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

重复问题，见上。

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

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

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

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

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

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

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

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

有了解前端安全吗？

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

最近在学什么？

算法，比较感兴趣，node和go，想转全栈。

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

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

为什么离职？

重复问题。

期望薪资。

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

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

贰 ❀ 伍 CEO综合面

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

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

自我介绍

离职原因？

说下你未来五年的规划？

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

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

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

最近有学什么？

有什么问题问我？

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

叁 ❀ 某加速器公司

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

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

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

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

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

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

能聊聊对于fiber的理解吗？

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

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

肆 ❀ 一个教训

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

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

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

伍 ❀ 未来

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

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