记一次“失利后”经过半年准备通过阿里社招的经历与感悟

[Aaaaaaaty]

写在最前

本次分享一下在作者上一次“失利”即拿到毕业证第二天突然“收到”阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。以及本次社招的面试经历（但这部分不是重点，每个人的面试经历都是不一样的。千人千面嘛）

PS:当然了计划赶不上变化，半年后一次内推的机会“稀里糊涂”得就通过了。。

欢迎关注我的博客，不定期更新中——

基于个人定位与实际情况的发展方向

上一次面试挂了后，我便对自己的情况进行了总结：

• 17届普通211，非cs科班。数据结构与算法、计算机基础等方面相对薄弱。
• 在面试挂掉的时间点是17年6月，实习半年，尚未毕业，缺少硬性工作经验条件。
• 公司内部尚无主力产品，工作基本为零散项目，缺少业务驱动的可深挖性。例如有主力产品为react，那么你可以借着业务深入了解其源码与原理等一切以react栈为出发点的知识与实践经验。
• 前端基本功技术栈：css相对弱（因为我真的懒得写样式），对js的基础知识兴趣浓厚，同时向往服务端，尝试基于node搭建服务。

于此同时我个人认为通过面试的最重要关键点：一定要有一个亮点打动你的面试官！

什么是亮点？

亮点就是在某个层面的深入研究成果：）

PS: 只是针对刚工作的伙伴，高p请放过我

个人理解亮点可以是两方面：

1. 在公司的项目中中，源于业务并高于业务的沉淀。正如同之前我总结个人情况中提到。如果你的简历里面主要介绍了react的项目。那么这其中会存在两个互补的研究即项目与react（同理还有vue与项目等等，为啥不是单独的react、vue；因为这只是个框架，结合框架解决实际问题才是最重要的，框架真的太多了，但业务都是相似的）：

   （1）业务的难点，如何解决，更好的思路？针对业务的优化？等等业务层面的深挖。

   （2）针对react你都了解多少？如果你对其了解只停留在api的阶段，那应该是凉凉了。。源码？设计思想？至少给知道diff怎么回事，setState到底是同步的还是异步的，以及为什么要这么处理？等等很多。

   核心思路就是通过你的业务与对技术相结合的深度挖掘来打动你的面试官

2. 第二点我是针对自己做的，因为结合我之前的分析可以发现我其实不具备1的条件，即没有主力业务。在你的业务量极小的时候，你是没有业务驱动的需求去让你挖掘那些背后的优化与更好的解决方案的。也许你会说那你也可以读react源码啊。但是，我读了源码不能反哺到业务中又有什么用呢？不知道如何解决实际的问题，仍然没有做到1的要求即项目与某框架的技术的结合沉淀。故针对我个人情况我选择了如下方式：

   (1)由于自己其实没有别人那么忙，我就强制自己每周周末坚持沉淀自己，并产出技术文章，不论是哪个方面的（因为我真的做不到1中的事情，我只好多学习多产出）。通过撰写博客引起更多人的关注，同时也可以让面试官侧面了解我，毕竟一次面试能决定的东西太少了。

   (2)在这个过程中我找到适合自己的路，选择一个较脱离主要业务（react之类的）的技术方向来进行一定程度的研究（我选的是canvas与node）。核心思路还是你要自己有自己的沉淀并以此试图打动面试官（逃

这是我半年来关于canvas与node的一些学习与记录：

• canvas进阶——实现静态图像的变形并合成动态效果
• Canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
• bezierMaker.js——N阶贝塞尔曲线生成器
• 基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
• 基于canvas使用粒子拼出你想要的文字
• 基于canvas使用贝塞尔曲线平滑拟合折线段
• 用canvas实现视频播放与弹幕功能
• 基于canvas实现波浪式绘制图片
• 基于 canvas 实现的一个截图小 demo
• Node.js EventEmitter类源码浅析
• 初探Node.js Stream中Readable类的内部实现
• 基于node实现文件路径替换
• 基于casperjs、resemble.js实现一个像素对比服务
• V8中一个微妙的内存泄露方式
• 给文档添加一组掘金的「小盾牌」
• 基于node的微小服务——细说缓存与304
• 基于 node 的微小爬虫——扒了一下知乎
• 基于Vue、Nodejs、Socket.io的聊天应用

半年来技术沉淀的成果与自我感觉的“亮点”

• 半年中总结了34篇包括但不限于css、js、node、canvas等技术博客托管在github中，获得了400个star，同时发布了bezierMaker.js——N阶贝塞尔曲线生成器。
• 在博客有一定曝光度的积累中，陆续收到了一些面试邀请，基本上是阿里的；但是我知道我菜。。就没去，可能有的是群发，不过都提到了我的博客可能还是编辑了一下的吧：）
• 读了node源码并提了第一个pr，但由于“口齿不清”的英语，和node项目维护者叙说很久无果就不了了之了，也算一次实践吧
• 个人最得意的一个小作品即自我感觉的“亮点”canvas进阶——实现静态图像的变形并合成动态效果，在之后的面试中的项目经验中主要介绍了这个。与此同时这篇文章中收到w3cplus大漠老师的邀请，希望将canvas系列文章发布在其网站中

突如其来的面试

2017.12月末，师哥突然跟我说现在部门有机会要不要试试，我本来是想拒绝的，因为距离上次被拒只差了半年，加上我现在工作经验满打满算也就一年，其中还有半年实习。。好的一面就来了：），由于这篇文章不是纯粹的面经也不是纯粹的技术文章，同时很多面试题都是有答案的，故大家有兴趣自行百度下面面试题，作者不过多说明。

一面

一面其实就是我的师哥。。所以严格来说就是一次交流，没有技术上的问题；因为我的朋友圈其实已经发了很多我自己的玩具代码了估计师哥心里也是有数的：）

主要介绍了目前团队所做的业务、相关的理念等等。更多的就是互相了解情况，我大概说了一下我这边做的事基本也就结束了。

二面

二面是师哥的老大，也是未来我如果入职的上司。其实这才算是一面。他更多的是来对我了解一些基础情况与一些技术思想（他本身是java）聊得很快也就20分钟：

• 自我介绍
• react、vue原理，这个虽然源码没看过但是两者的区别还有基本的思想还是能说几句的
• react怎么优化？关于优化其实react的diff算法是怎么计算的你了解清楚了就知道什么操作会让diff算的慢也就知道怎么优化了：）
• 为什么选择阿里？因为是阿里
• 好像没问什么了结束的很快，同时告诉我下次是前端组leader来面试

三面

面试官好像和豆瓣有些渊源，上来就问我你是不是克军团队的，我说我不是。。

• 自我介绍
• 先从简历的项目了解一遍，时长大约20分钟，其实很多就是很久前做的都忘记了就是大概说说。。
• react的思想是什么？数据驱动balabala，举了一个之前封装轮播图的例子
• 对redux怎么看？这个强力推荐这篇文章，拯救了我这个问题从时间旅行的乌托邦，看状态管理的设计误区，这位文章的作者虽然喜欢怼人但是技术还是很强的
• 碰到问题你是如何解决的？百度、谷歌、别人的文章；但是！我其实并不相信别人的文章，很多东西的底层应该是规范而不是别人的总结，比如我总结的从HTML5与PromiseA+规范来看事件循环，在代码的世界里，其实不需要太多别人的理解，规范就是规范，真的想知道为什么，就去看看底层的定义。这可比你读了谁谁的文章来的靠谱，毕竟人都会犯错？
• 0.1 + 0.2 ？ 我脱口而出不等于0.3，然后面试官好像有点吃惊，“你是在网上看到这个题？”，“我其实很喜欢这种js的边边角角”，自己总结过一些比如类型转换之类的：）
• 函数与构造函数的区别？我觉得没啥区别，区别都是new调用做的，改了this的指向而已
• 那么延伸一下，数值怎么存储？64位浮点型；“小数怎么存储？”嗯其实关于小数二进制存储有点懵，就没说上来。。
• 关于css，说一下并列布局的方式；核心思路是怎么让block不自适应平铺为整行。触发bfc就可以了；比如绝对布局，float，inline-block等等
• 有没有一些有意思的项目？终于等来了可以介绍我的“亮点”作品了，关于作品是啥往上找。。主要就是将静态图通过绘制自定义贝塞尔曲线变为扭曲效果同时生成过程动画。对这个项目的原理我和面试官讨论了给有20分钟，看得出来他对这个项目很感兴趣或者说这么做的思路也是平时少见的。
• 你在同事眼里是个怎样的人？怎么感觉像是hr在跟我说话。。我觉得还算nice吧嘻嘻
• 你现在在北京，打算来杭州么？去！必须去！不去肯定挂了。。

笔试

穿插了一个笔试，就一道题：写一个js的通用事件绑定函数

交叉面

交叉面充分说明了，没有主力业务的可怕=。=，因为你不能光写你的作品吧？你总给写公司的业务，但是这个业务吧你又没有需求把它优化到别人的标准，或者说根本没有优化：）

• 一开始介绍了自己的项目也就是上面提及的。面试官接下来一句我就凉了，在webgl中也可以实现？ 好的我没用过webgl。“哦没用过，好的”
• 移动端做过什么优化么？我心想我这边的业务，都是活动页做啥优化。。但是我还是说了我看到别人的优化方案，例如直出、域名收敛
• “域名收敛？为什么要收敛？”“因为dns解析慢啊？”“那和pc端有什么区别，pc端域名不是发散来提高并发数么？” 我心里一想是啊，其实浏览器pc和m没啥区别那为啥一个发散一个收敛，或者说发散我们都知道克服pc浏览器的并发限制。那m端？我当时有点迷没说上来就过了，回来又百度了一下感觉上其实就是m端网速慢dns太耗时。。我没反应过来还有网速的事情
• js与native怎么交互？内心独白：我*，我真没做过。。“嗯虽然我没做过，但是我了解过应该是native定义一套协议，js使用该协议发请求，native拦截解析并返回js的所需balabala”
• 缓存策略都有哪些，包括native；我？？我没做过native啊。。缓存策略对浏览器的我研究过一些基本就是基于我这篇文章来说的基于node的微小服务——细说缓存与304
• 看你的简历里写了rn项目，对rn有做过优化么，全量么？有没有自己改过内核？这就是我之前说的我所面临的业务问题，我这个rn项目撑死了是两个人写的，很快就结束了不维护了都，哪里来的优化。。哎所以身在一个好项目中很关键；“嗯没做过优化，只是使用层面（微笑脸”
• 除了react对什么框架熟悉？“毕设用的vue，仅限使用”
• vue与react有什么区别？“于我来说最直观的是写法的区别，jsx与模板；同时debug中也存在差异。再有就是框架实现思想上的区别了，数据绑定与diff”
• 看你写的截图插件，碰到动态图怎么办？“当时使用的是html2canvas，其中确实会存在动态图截取失败的问题，嗯确实没有好的解决方案”
• 看你的博客，对canvas使用的很多，有过一些沉淀么比如引擎？我*，引擎？？“没有没有，不过我封装过一个贝塞尔曲线生成器”
• m端与pc在html5的新特性上有哪些是不一样的？有做过什么么？表示我真的忘了有很多新接口，比如电池陀螺仪之类的；一时间想成了pwa的特性。。“我用过新的音频api接口，虽然pc与m都有，但是这个做了一些效果，实现了读取从设备收取的外界声音，转化为可视化波形”
• 参与过开源项目么？给node提pr被拒了很惭愧，但是也有收获
• 自己觉得积累最多的沉淀是什么？可能是对js语言本身上的一些探索吧

终面&hr

来到了北京的一个工作点，准备视频面，我之后才反应过来我其实已经被hr面过了。。因为跟在老板身边是个男的。。

• 自我介绍
• 项目介绍，主要介绍了canvas。
• hr：为什么毕业半年就准备换工作？因为再待在舒适区我就废了
• hr：当时实习半年你就已经了解了情况为什么不考虑当时就走？因为三方。。
• hr：单身来杭州？有女票，不过是浙江人
• 没什么问题了，你有问题么？没
• 很快就结束了也就20分钟不到吧

小计

至此完成了对自己这边年来的准备的一个回顾与面试经验的分享。面经不是重点每个人都是不一样的，更重要的应该是如何在当前的工作中找到自己应该努力的方向，并且持续地发光发热，让别人认可你，打动他们。

PS：目前是待发offer状态，之后如果hc没有问题，背调没有问题，体检没有问题，我就可以奔赴2000公里外的杭州了。当然了结果很重要，但过程更令人回味更多。

PPS: 这一切都是个人感悟，说的不对的，不严谨的，欢迎一起分享你的想法，在码梦的路上，一去不归。

PPPS：由于只毕业半年，我估计可能是p5（但是社招p5基本无hc），p6就太赚了，不过这都是后话，静候佳音

最后

惯例po作者的博客，不定时更新中——

有问题欢迎在issues下交流。

[jawil]

我们有5个 P5的 HC，要不要试一试我们部门？

[Aaaaaaaty]

@jawil 如果这边最后hc突然没了是不是能转过来哈哈哈 我觉得年前应该会有个结果~

[jawil]

要重新面，一般一两轮技术面就 ok，不需要三四轮了 @Aaaaaaaty

[Aaaaaaaty]

@jawil 哈哈三四轮真是太费劲了。我年前等波这个offer 不行的话还是投奔大佬了！

[jawil]

我最近推荐的这个，跟你情况类似，简历评估过了之后，就面了一轮就到 HRG 了

[Aaaaaaaty]

@jawil 啊这样么~ 明白啦！谢谢大佬~

[youngwind]

👍 厉害厉害，Canvas 的那些例子也很有趣。

[Aaaaaaaty]

@youngwind 啊哈哈哈真大佬出现了~ 谢谢夸奖~

[happylindz]

挺好的，加油，看头像还以为是个妹子~

[Aaaaaaaty]

@happylindz 啊哈哈哈 差一点是个妹子

[sunyongjian]

很不错~ ps: 不考虑其他公司嘛 = =

[Aaaaaaaty]

@sunyongjian 额目前只想进阿里哈哈哈 不好意思啦

[lclown]

恭喜大神一下，也羡慕大神实现了我的梦想。希望我也能够有这一天。

[Aaaaaaaty]

@lclown 好好研究代码就没问题的！

[lclown]

感谢🙏，借吉言。

在 2018年2月5日，下午7:16，An <notifications@github.com mailto:notifications@github.com> 写道：

@lclown https://github.com/lclown 好好研究代码就没问题的！

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aaaaaaaty/blog/issues/39#issuecomment-363055202, or mute the thread https://github.com/notifications/unsubscribe-auth/AXq90UnXyfok2JMoBxmU8vFInYs-bLQCks5tRuMOgaJpZM4R4fAD.

[lclown]

感谢🙏，借吉言。在 2018年2月5日，下午7:16，An notifications@github.com 写道：@lclown 好好研究代码就没问题的！—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

[jawil]

@lecepin 跳槽了啊，要不要我内推你阿里或者草榴啊

[FrontMage]

感觉真是屠龙的技术呀，看来像webassembly，css grid都得熟练才行了

[crossoverJie]

所以比较好奇 LZ 最后拿到 offer 没有？p5 还是 P6？😆

[jawil]

同问

[Aaaaaaaty]

@crossoverJie 侥幸通过咯 p6 @jawil 月底就可以和大佬在一个办公区了吧😆

[crossoverJie]

@Aaaaaaaty 👍

[gyt95]

同毕业半年多...没你这么强..但也是因为待舒适区待得受不了了..选择了离职..

加油吧！

[Aaaaaaaty]

@gyt95 加油！我还很菜路还很漫长。。

[webMasterMrBin]

好奇楼主学历 是985/211么