前端面试第一周快速复盘，不标准的面试经验分享 （一）
壹 ❀ 引
从深圳离职回武汉也一周多了，上周不慌不忙的安排了两场面试，到本周一为止两家都收到了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和reactdiff差异。
vue的diff我确实没看，所以结合虚拟dom讲了下react是如何进行diff对比。
diff单节点和多节点更新有什么差异？
其实就是是否是list的差异，每次diff源码中都会判断此次是不是一个数组，如果是数组就会走key的特殊处理，毕竟key日常我们只在list时需要提供。于是我又拓展讲解了key的核心作用。
关于虚拟dom与key有疑问可以阅读这两篇文章，我感觉说的也很详细：
[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
React key究竟有什么作用？深入源码不背概念，五个问题刷新你对于key的认知
你觉得
componentelementjsx三者关系是什么？
这个问题其实我没太get到面试官的意思，不过还是从渲染过程以及结构解释了下我的理解。
react是单向还是双向数据绑定？
写react都知道是单向，如同瀑布的水自上而下流动。每个组件都可以接收上层传递的props，同样自身的state也能构成下层组件的props。
双向绑定和单向数据流有什么优缺点？说说你的看法
双向在某些场景开发更便捷，毕竟在vue底层已经帮我们做了view与modle的关联，但在react不同，很多事件监听以及数据跟踪处理需要人为关注，代码量会更大。而站在组件设计的角度，保证数据的唯一性（唯一进出口）有利于组件的维护，各有优势。
说下class和函数组件的区别？
- 底层渲染不同，组件在渲染时会判组件类型，假设是
class组件会先new一个实例，再通过实例.render()拿到node节点，而函数组件则是直接调用通过return得到渲染节点。 - 编码方式不同，
class更多依赖生命周期钩子，而后者早期并没有state的概念，在引入hooks后更倾向于函数式编程。 - 有没有
this的区别，对于this理解薄弱的同学而言，函数组件确实更清晰易懂。
高阶组件用过吗？什么场景用，有什么问题？
组件之间存在共同的数据加工时常用，问题就是嵌套地狱，在数据溯源时非常痛苦。
你觉得hooks给你带来了什么？
更少的代码量，更清晰的编码方式，以前要共享部分逻辑常见就得hoc，但现在能封装成一个自定义的hooks。其次，在部分减少无效渲染上，hooks确实更方便。
你觉得hooks性能更好吗？你是怎么做性能优化的？
并不觉得，毕竟走同一套diff，这要看什么场景，毕竟相同的功能不同的开发，不同的实现方式都会导致不同的结果。就比如useMemo虽然能缓存，减少重复渲染，但是不会用可能只是徒增内存，并没有很好的提升体验。
关于性能优化，我从简历里挑了两个方面拓展来讲了，一个如何减少无效渲染，一个单点性能问题排查。
关于如何减少无效渲染，可以看看这篇文章：React性能优化，六个小技巧教你减少组件无效渲染
遇到过闭包陷阱吗？
每个hooks新手可能早期都遇到过，比如useEffect第二参数时空数组，或者监听了一个不变的值，会导致内部逻辑永远不会重复触发，内部变量始终访问之前的缓存值。
你觉得
useContext能取代redux吗？说说你的看法
不能，我一开始说的是项目复杂度的问题，但是面试官不满意，追问了更深的原因，他期待的答复应该更倾向于如下几点：
- 功能耦合度问题，
redux从来就不是必须的，但它能更专注于状态管理，让研发从状态监听以及响应中解脱出来。 context存在reRender问题，在性能方面不是很好。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，简历出色还是可以杀出来，不过如果当前薪资已经差不多，跳槽薪资涨幅不大的话还是建议先稳一波。那么这篇面试大概就这样了，也希望后续面试顺利，本文完。