摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過(guò)分析自己的定位與實(shí)際情況，做出的未來(lái)一到兩年的規(guī)劃。在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請(qǐng)，基本上是阿里的但是我知道我菜。。

本次分享一下在作者上一次“失利”即拿到畢業(yè)證第二天突然“收到”阿里社招面試通知失敗之后，通過(guò)分析自己的定位與實(shí)際情況，做出的未來(lái)一到兩年的規(guī)劃。以及本次社招的面試經(jīng)歷（但這部分不是重點(diǎn)，每個(gè)人的面試經(jīng)歷都是不一樣的。千人千面嘛）

PS:當(dāng)然了計(jì)劃趕不上變化，半年后一次內(nèi)推的機(jī)會(huì)“稀里糊涂”得就通過(guò)了。。

歡迎關(guān)注我的博客，不定期更新中——

上一次面試掛了后，我便對(duì)自己的情況進(jìn)行了總結(jié)：

17屆普通211，非cs科班。數(shù)據(jù)結(jié)構(gòu)與算法、計(jì)算機(jī)基礎(chǔ)等方面相對(duì)薄弱。

在面試掛掉的時(shí)間點(diǎn)是17年6月，實(shí)習(xí)半年，尚未畢業(yè)，缺少硬性工作經(jīng)驗(yàn)條件。

公司內(nèi)部尚無(wú)主力產(chǎn)品，工作基本為零散項(xiàng)目，缺少業(yè)務(wù)驅(qū)動(dòng)的可深挖性。例如有主力產(chǎn)品為react，那么你可以借著業(yè)務(wù)深入了解其源碼與原理等一切以react棧為出發(fā)點(diǎn)的知識(shí)與實(shí)踐經(jīng)驗(yàn)。

前端基本功技術(shù)棧：css相對(duì)弱（因?yàn)槲艺娴膽械脤憳邮剑?，?duì)js的基礎(chǔ)知識(shí)興趣濃厚，同時(shí)向往服務(wù)端，嘗試基于node搭建服務(wù)。

于此同時(shí)我個(gè)人認(rèn)為通過(guò)面試的最重要關(guān)鍵點(diǎn)：一定要有一個(gè)亮點(diǎn)打動(dòng)你的面試官！

亮點(diǎn)就是在某個(gè)層面的深入研究成果：）

PS: 只是針對(duì)剛工作的伙伴，高p請(qǐng)放過(guò)我

個(gè)人理解亮點(diǎn)可以是兩方面：

在公司的項(xiàng)目中中，源于業(yè)務(wù)并高于業(yè)務(wù)的沉淀。正如同之前我總結(jié)個(gè)人情況中提到。如果你的簡(jiǎn)歷里面主要介紹了react的項(xiàng)目。那么這其中會(huì)存在兩個(gè)互補(bǔ)的研究即項(xiàng)目與react（同理還有vue與項(xiàng)目等等，為啥不是多帶帶的react、vue；因?yàn)檫@只是個(gè)框架，結(jié)合框架解決實(shí)際問(wèn)題才是最重要的，框架真的太多了，但業(yè)務(wù)都是相似的）：

（1）業(yè)務(wù)的難點(diǎn)，如何解決，更好的思路？針對(duì)業(yè)務(wù)的優(yōu)化？等等業(yè)務(wù)層面的深挖。

（2）針對(duì)react你都了解多少？如果你對(duì)其了解只停留在api的階段，那應(yīng)該是涼涼了。。源碼？設(shè)計(jì)思想？至少給知道diff怎么回事，setState到底是同步的還是異步的，以及為什么要這么處理？等等很多。

核心思路就是通過(guò)你的業(yè)務(wù)與對(duì)技術(shù)相結(jié)合的深度挖掘來(lái)打動(dòng)你的面試官

第二點(diǎn)我是針對(duì)自己做的，因?yàn)榻Y(jié)合我之前的分析可以發(fā)現(xiàn)我其實(shí)不具備1的條件，即沒(méi)有主力業(yè)務(wù)。在你的業(yè)務(wù)量極小的時(shí)候，你是沒(méi)有業(yè)務(wù)驅(qū)動(dòng)的需求去讓你挖掘那些背后的優(yōu)化與更好的解決方案的。也許你會(huì)說(shuō)那你也可以讀react源碼啊。但是，我讀了源碼不能反哺到業(yè)務(wù)中又有什么用呢？不知道如何解決實(shí)際的問(wèn)題，仍然沒(méi)有做到1的要求即項(xiàng)目與某框架的技術(shù)的結(jié)合沉淀。故針對(duì)我個(gè)人情況我選擇了如下方式：

(1)由于自己其實(shí)沒(méi)有別人那么忙，我就強(qiáng)制自己每周周末堅(jiān)持沉淀自己，并產(chǎn)出技術(shù)文章，不論是哪個(gè)方面的（因?yàn)槲艺娴淖霾坏?中的事情，我只好多學(xué)習(xí)多產(chǎn)出）。通過(guò)撰寫博客引起更多人的關(guān)注，同時(shí)也可以讓面試官側(cè)面了解我，畢竟一次面試能決定的東西太少了。

(2)在這個(gè)過(guò)程中我找到適合自己的路，選擇一個(gè)較脫離主要業(yè)務(wù)（react之類的）的技術(shù)方向來(lái)進(jìn)行一定程度的研究（我選的是canvas與node）。核心思路還是你要自己有自己的沉淀并以此試圖打動(dòng)面試官（逃

這是我半年來(lái)關(guān)于canvas與node的一些學(xué)習(xí)與記錄：

canvas進(jìn)階——實(shí)現(xiàn)靜態(tài)圖像的變形并合成動(dòng)態(tài)效果

Canvas進(jìn)階——貝塞爾公式推導(dǎo)與物體跟隨復(fù)雜曲線的軌跡運(yùn)動(dòng)

bezierMaker.js——N階貝塞爾曲線生成器

[基于canvas使用粒子拼出你想要的文字[2]——粒子的動(dòng)畫效果](https://github.com/Aaaaaaaty/...

基于canvas使用粒子拼出你想要的文字

基于canvas使用貝塞爾曲線平滑擬合折線段

用canvas實(shí)現(xiàn)視頻播放與彈幕功能

基于canvas實(shí)現(xiàn)波浪式繪制圖片

基于 canvas 實(shí)現(xiàn)的一個(gè)截圖小 demo

Node.js EventEmitter類源碼淺析

初探Node.js Stream中Readable類的內(nèi)部實(shí)現(xiàn)

基于node實(shí)現(xiàn)文件路徑替換

基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)

V8中一個(gè)微妙的內(nèi)存泄露方式

給文檔添加一組掘金的「小盾牌」

基于node的微小服務(wù)——細(xì)說(shuō)緩存與304

基于 node 的微小爬蟲——扒了一下知乎

基于Vue、Nodejs、Socket.io的聊天應(yīng)用

半年中總結(jié)了34篇包括但不限于css、js、node、canvas等技術(shù)博客托管在github中，獲得了400個(gè)star，同時(shí)發(fā)布了bezierMaker.js——N階貝塞爾曲線生成器。

在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請(qǐng)，基本上是阿里的；但是我知道我菜。。就沒(méi)去，可能有的是群發(fā)，不過(guò)都提到了我的博客可能還是編輯了一下的吧：）

讀了node源碼并提了第一個(gè)pr，但由于“口齒不清”的英語(yǔ)，和node項(xiàng)目維護(hù)者敘說(shuō)很久無(wú)果就不了了之了，也算一次實(shí)踐吧

個(gè)人最得意的一個(gè)小作品即自我感覺(jué)的“亮點(diǎn)”canvas進(jìn)階——實(shí)現(xiàn)靜態(tài)圖像的變形并合成動(dòng)態(tài)效果，在之后的面試中的項(xiàng)目經(jīng)驗(yàn)中主要介紹了這個(gè)。與此同時(shí)這篇文章中收到w3cplus大漠老師的邀請(qǐng)，希望將canvas系列文章發(fā)布在其網(wǎng)站中

2017.12月末，師哥突然跟我說(shuō)現(xiàn)在部門有機(jī)會(huì)要不要試試，我本來(lái)是想拒絕的，因?yàn)榫嚯x上次被拒只差了半年，加上我現(xiàn)在工作經(jīng)驗(yàn)滿打滿算也就一年，其中還有半年實(shí)習(xí)。。好的一面就來(lái)了：），由于這篇文章不是純粹的面經(jīng)也不是純粹的技術(shù)文章，同時(shí)很多面試題都是有答案的，故大家有興趣自行百度下面面試題，作者不過(guò)多說(shuō)明。

一面其實(shí)就是我的師哥。。所以嚴(yán)格來(lái)說(shuō)就是一次交流，沒(méi)有技術(shù)上的問(wèn)題；因?yàn)槲业呐笥讶ζ鋵?shí)已經(jīng)發(fā)了很多我自己的玩具代碼了估計(jì)師哥心里也是有數(shù)的：）

主要介紹了目前團(tuán)隊(duì)所做的業(yè)務(wù)、相關(guān)的理念等等。更多的就是互相了解情況，我大概說(shuō)了一下我這邊做的事基本也就結(jié)束了。

二面是師哥的老大，也是未來(lái)我如果入職的上司。其實(shí)這才算是一面。他更多的是來(lái)對(duì)我了解一些基礎(chǔ)情況與一些技術(shù)思想（他本身是java）聊得很快也就20分鐘：

自我介紹

react、vue原理，這個(gè)雖然源碼沒(méi)看過(guò)但是兩者的區(qū)別還有基本的思想還是能說(shuō)幾句的

react怎么優(yōu)化？關(guān)于優(yōu)化其實(shí)react的diff算法是怎么計(jì)算的你了解清楚了就知道什么操作會(huì)讓diff算的慢也就知道怎么優(yōu)化了：）

為什么選擇阿里？因?yàn)槭前⒗?/p>

好像沒(méi)問(wèn)什么了結(jié)束的很快，同時(shí)告訴我下次是前端組leader來(lái)面試

面試官好像和豆瓣有些淵源，上來(lái)就問(wèn)我你是不是克軍團(tuán)隊(duì)的，我說(shuō)我不是。。

自我介紹

先從簡(jiǎn)歷的項(xiàng)目了解一遍，時(shí)長(zhǎng)大約20分鐘，其實(shí)很多就是很久前做的都忘記了就是大概說(shuō)說(shuō)。。

react的思想是什么？數(shù)據(jù)驅(qū)動(dòng)balabala，舉了一個(gè)之前封裝輪播圖的例子

對(duì)redux怎么看？這個(gè)強(qiáng)力推薦這篇文章，拯救了我這個(gè)問(wèn)題從時(shí)間旅行的烏托邦，看狀態(tài)管理的設(shè)計(jì)誤區(qū)，這位文章的作者雖然喜歡懟人但是技術(shù)還是很強(qiáng)的

碰到問(wèn)題你是如何解決的？百度、谷歌、別人的文章；但是！我其實(shí)并不相信別人的文章，很多東西的底層應(yīng)該是規(guī)范而不是別人的總結(jié)，比如我總結(jié)的從HTML5與PromiseA+規(guī)范來(lái)看事件循環(huán)，在代碼的世界里，其實(shí)不需要太多別人的理解，規(guī)范就是規(guī)范，真的想知道為什么，就去看看底層的定義。這可比你讀了誰(shuí)誰(shuí)的文章來(lái)的靠譜，畢竟人都會(huì)犯錯(cuò)？

0.1 + 0.2 ？ 我脫口而出不等于0.3，然后面試官好像有點(diǎn)吃驚，“你是在網(wǎng)上看到這個(gè)題？”，“我其實(shí)很喜歡這種js的邊邊角角”，自己總結(jié)過(guò)一些比如類型轉(zhuǎn)換之類的：）

函數(shù)與構(gòu)造函數(shù)的區(qū)別？我覺(jué)得沒(méi)啥區(qū)別，區(qū)別都是new調(diào)用做的，改了this的指向而已

那么延伸一下，數(shù)值怎么存儲(chǔ)？64位浮點(diǎn)型；“小數(shù)怎么存儲(chǔ)？”嗯其實(shí)關(guān)于小數(shù)二進(jìn)制存儲(chǔ)有點(diǎn)懵，就沒(méi)說(shuō)上來(lái)。。

關(guān)于css，說(shuō)一下并列布局的方式；核心思路是怎么讓block不自適應(yīng)平鋪為整行。觸發(fā)bfc就可以了；比如絕對(duì)布局，float，inline-block等等

有沒(méi)有一些有意思的項(xiàng)目？終于等來(lái)了可以介紹我的“亮點(diǎn)”作品了，關(guān)于作品是啥往上找。。主要就是將靜態(tài)圖通過(guò)繪制自定義貝塞爾曲線變?yōu)榕でЧ瑫r(shí)生成過(guò)程動(dòng)畫。對(duì)這個(gè)項(xiàng)目的原理我和面試官討論了給有20分鐘，看得出來(lái)他對(duì)這個(gè)項(xiàng)目很感興趣或者說(shuō)這么做的思路也是平時(shí)少見(jiàn)的。

你在同事眼里是個(gè)怎樣的人？怎么感覺(jué)像是hr在跟我說(shuō)話。。我覺(jué)得還算nice吧嘻嘻

你現(xiàn)在在北京，打算來(lái)杭州么？去！必須去！不去肯定掛了。。

穿插了一個(gè)筆試，就一道題：寫一個(gè)js的通用事件綁定函數(shù)

交叉面充分說(shuō)明了，沒(méi)有主力業(yè)務(wù)的可怕=。=，因?yàn)槟悴荒芄鈱懩愕淖髌钒?？你總給寫公司的業(yè)務(wù)，但是這個(gè)業(yè)務(wù)吧你又沒(méi)有需求把它優(yōu)化到別人的標(biāo)準(zhǔn)，或者說(shuō)根本沒(méi)有優(yōu)化：）

一開始介紹了自己的項(xiàng)目也就是上面提及的。面試官接下來(lái)一句我就涼了，在webgl中也可以實(shí)現(xiàn)？ 好的我沒(méi)用過(guò)webgl?！芭稕](méi)用過(guò)，好的”

移動(dòng)端做過(guò)什么優(yōu)化么？我心想我這邊的業(yè)務(wù)，都是活動(dòng)頁(yè)做啥優(yōu)化。。但是我還是說(shuō)了我看到別人的優(yōu)化方案，例如直出、域名收斂

“域名收斂？為什么要收斂？”“因?yàn)閐ns解析慢啊？”“那和pc端有什么區(qū)別，pc端域名不是發(fā)散來(lái)提高并發(fā)數(shù)么？” 我心里一想是啊，其實(shí)瀏覽器pc和m沒(méi)啥區(qū)別那為啥一個(gè)發(fā)散一個(gè)收斂，或者說(shuō)發(fā)散我們都知道克服pc瀏覽器的并發(fā)限制。那m端？我當(dāng)時(shí)有點(diǎn)迷沒(méi)說(shuō)上來(lái)就過(guò)了，回來(lái)又百度了一下感覺(jué)上其實(shí)就是m端網(wǎng)速慢dns太耗時(shí)。。我沒(méi)反應(yīng)過(guò)來(lái)還有網(wǎng)速的事情

js與native怎么交互？?jī)?nèi)心獨(dú)白：我*，我真沒(méi)做過(guò)。。“嗯雖然我沒(méi)做過(guò)，但是我了解過(guò)應(yīng)該是native定義一套協(xié)議，js使用該協(xié)議發(fā)請(qǐng)求，native攔截解析并返回js的所需balabala”

緩存策略都有哪些，包括native；我？？我沒(méi)做過(guò)native啊。。緩存策略對(duì)瀏覽器的我研究過(guò)一些基本就是基于我這篇文章來(lái)說(shuō)的基于node的微小服務(wù)——細(xì)說(shuō)緩存與304

看你的簡(jiǎn)歷里寫了rn項(xiàng)目，對(duì)rn有做過(guò)優(yōu)化么，全量么？有沒(méi)有自己改過(guò)內(nèi)核？這就是我之前說(shuō)的我所面臨的業(yè)務(wù)問(wèn)題，我這個(gè)rn項(xiàng)目撐死了是兩個(gè)人寫的，很快就結(jié)束了不維護(hù)了都，哪里來(lái)的優(yōu)化。。哎所以身在一個(gè)好項(xiàng)目中很關(guān)鍵；“嗯沒(méi)做過(guò)優(yōu)化，只是使用層面（微笑臉”

除了react對(duì)什么框架熟悉？“畢設(shè)用的vue，僅限使用”

vue與react有什么區(qū)別？“于我來(lái)說(shuō)最直觀的是寫法的區(qū)別，jsx與模板；同時(shí)debug中也存在差異。再有就是框架實(shí)現(xiàn)思想上的區(qū)別了，數(shù)據(jù)綁定與diff”

看你寫的截圖插件，碰到動(dòng)態(tài)圖怎么辦？“當(dāng)時(shí)使用的是html2canvas，其中確實(shí)會(huì)存在動(dòng)態(tài)圖截取失敗的問(wèn)題，嗯確實(shí)沒(méi)有好的解決方案”

看你的博客，對(duì)canvas使用的很多，有過(guò)一些沉淀么比如引擎？我*，引擎？？“沒(méi)有沒(méi)有，不過(guò)我封裝過(guò)一個(gè)貝塞爾曲線生成器”

m端與pc在html5的新特性上有哪些是不一樣的？有做過(guò)什么么？表示我真的忘了有很多新接口，比如電池陀螺儀之類的；一時(shí)間想成了pwa的特性。?！拔矣眠^(guò)新的音頻api接口，雖然pc與m都有，但是這個(gè)做了一些效果，實(shí)現(xiàn)了讀取從設(shè)備收取的外界聲音，轉(zhuǎn)化為可視化波形”

參與過(guò)開源項(xiàng)目么？給node提pr被拒了很慚愧，但是也有收獲

自己覺(jué)得積累最多的沉淀是什么？可能是對(duì)js語(yǔ)言本身上的一些探索吧

來(lái)到了北京的一個(gè)工作點(diǎn)，準(zhǔn)備視頻面，我之后才反應(yīng)過(guò)來(lái)我其實(shí)已經(jīng)被hr面過(guò)了。。因?yàn)楦诶习迳磉吺莻€(gè)男的。。

自我介紹

項(xiàng)目介紹，主要介紹了canvas。

hr：為什么畢業(yè)半年就準(zhǔn)備換工作？因?yàn)樵俅谑孢m區(qū)我就廢了

hr：當(dāng)時(shí)實(shí)習(xí)半年你就已經(jīng)了解了情況為什么不考慮當(dāng)時(shí)就走？因?yàn)槿健！?/p>

hr：?jiǎn)紊韥?lái)杭州？有女票，不過(guò)是浙江人

沒(méi)什么問(wèn)題了，你有問(wèn)題么？沒(méi)

很快就結(jié)束了也就20分鐘不到吧

至此完成了對(duì)自己這邊年來(lái)的準(zhǔn)備的一個(gè)回顧與面試經(jīng)驗(yàn)的分享。面經(jīng)不是重點(diǎn)每個(gè)人都是不一樣的，更重要的應(yīng)該是如何在當(dāng)前的工作中找到自己應(yīng)該努力的方向，并且持續(xù)地發(fā)光發(fā)熱，讓別人認(rèn)可你，打動(dòng)他們。

PS：目前是待發(fā)offer狀態(tài)，之后如果hc沒(méi)有問(wèn)題，背調(diào)沒(méi)有問(wèn)題，體檢沒(méi)有問(wèn)題，我就可以奔赴2000公里外的杭州了。當(dāng)然了結(jié)果很重要，但過(guò)程更令人回味更多。

PPS: 這一切都是個(gè)人感悟，說(shuō)的不對(duì)的，不嚴(yán)謹(jǐn)?shù)模瑲g迎一起分享你的想法，在碼夢(mèng)的路上，一去不歸。

PPPS：由于只畢業(yè)半年，我估計(jì)可能是p5（但是社招p5基本無(wú)hc），p6就太賺了，不過(guò)這都是后話，靜候佳音

慣例po作者的博客，不定時(shí)更新中——

有問(wèn)題歡迎在issues下交流。