寫在最前

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

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

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

基于個人定位與實際情況的發(fā)展方向

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

• 17屆普通211，非cs科班。數(shù)據(jù)結(jié)構(gòu)與算法、計算機基礎(chǔ)等方面相對薄弱。
• 在面試掛掉的時間點是17年6月，實習(xí)半年，尚未畢業(yè)，缺少硬性工作經(jīng)驗條件。
• 公司內(nèi)部尚無主力產(chǎn)品，工作基本為零散項目，缺少業(yè)務(wù)驅(qū)動的可深挖性。例如有主力產(chǎn)品為react，那么你可以借著業(yè)務(wù)深入了解其源碼與原理等一切以react棧為出發(fā)點的知識與實踐經(jīng)驗。
• 前端基本功技術(shù)棧：css相對弱（因為我真的懶得寫樣式），對js的基礎(chǔ)知識興趣濃厚，同時向往服務(wù)端，嘗試基于node搭建服務(wù)。

于此同時我個人認為通過面試的最重要關(guān)鍵點：一定要有一個亮點打動你的面試官！

什么是亮點？

亮點就是在某個層面的深入研究成果：）

PS: 只是針對剛工作的伙伴，高p請放過我

個人理解亮點可以是兩方面：

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

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

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

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

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

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

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

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

• canvas進階——實現(xiàn)靜態(tài)圖像的變形并合成動態(tài)效果
• Canvas進階——貝塞爾公式推導(dǎo)與物體跟隨復(fù)雜曲線的軌跡運動
• bezierMaker.js——N階貝塞爾曲線生成器
• 基于canvas使用粒子拼出你想要的文字[2]——粒子的動畫效果
• 基于canvas使用粒子拼出你想要的文字
• 基于canvas使用貝塞爾曲線平滑擬合折線段
• 用canvas實現(xiàn)視頻播放與彈幕功能
• 基于canvas實現(xiàn)波浪式繪制圖片
• 基于 canvas 實現(xiàn)的一個截圖小 demo
• Node.js EventEmitter類源碼淺析
• 初探Node.js Stream中Readable類的內(nèi)部實現(xiàn)
• 基于node實現(xiàn)文件路徑替換
• 基于casperjs、resemble.js實現(xiàn)一個像素對比服務(wù)
• V8中一個微妙的內(nèi)存泄露方式
• 給文檔添加一組掘金的「小盾牌」
• 基于node的微小服務(wù)——細說緩存與304
• 基于 node 的微小爬蟲——扒了一下知乎
• 基于Vue、Nodejs、Socket.io的聊天應(yīng)用

半年來技術(shù)沉淀的成果與自我感覺的“亮點”

• 半年中總結(jié)了34篇包括但不限于css、js、node、canvas等技術(shù)博客托管在github中，獲得了400個star，同時發(fā)布了bezierMaker.js——N階貝塞爾曲線生成器。
• 在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請，基本上是阿里的；但是我知道我菜。。就沒去，可能有的是群發(fā)，不過都提到了我的博客可能還是編輯了一下的吧：）
• 讀了node源碼并提了第一個pr，但由于“口齒不清”的英語，和node項目維護者敘說很久無果就不了了之了，也算一次實踐吧
• 個人最得意的一個小作品即自我感覺的“亮點”canvas進階——實現(xiàn)靜態(tài)圖像的變形并合成動態(tài)效果，在之后的面試中的項目經(jīng)驗中主要介紹了這個。與此同時這篇文章中收到w3cplus大漠老師的邀請，希望將canvas系列文章發(fā)布在其網(wǎng)站中

突如其來的面試

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

一面

一面其實就是我的師哥。。所以嚴格來說就是一次交流，沒有技術(shù)上的問題；因為我的朋友圈其實已經(jīng)發(fā)了很多我自己的玩具代碼了估計師哥心里也是有數(shù)的：）

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

二面

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

• 自我介紹
• react、vue原理，這個雖然源碼沒看過但是兩者的區(qū)別還有基本的思想還是能說幾句的
• react怎么優(yōu)化？關(guān)于優(yōu)化其實react的diff算法是怎么計算的你了解清楚了就知道什么操作會讓diff算的慢也就知道怎么優(yōu)化了：）
• 為什么選擇阿里？因為是阿里
• 好像沒問什么了結(jié)束的很快，同時告訴我下次是前端組leader來面試

三面

面試官好像和豆瓣有些淵源，上來就問我你是不是克軍團隊的，我說我不是。。

• 自我介紹
• 先從簡歷的項目了解一遍，時長大約20分鐘，其實很多就是很久前做的都忘記了就是大概說說。。
• react的思想是什么？數(shù)據(jù)驅(qū)動balabala，舉了一個之前封裝輪播圖的例子
• 對redux怎么看？這個強力推薦這篇文章，拯救了我這個問題從時間旅行的烏托邦，看狀態(tài)管理的設(shè)計誤區(qū)，這位文章的作者雖然喜歡懟人但是技術(shù)還是很強的
• 碰到問題你是如何解決的？百度、谷歌、別人的文章；但是！我其實并不相信別人的文章，很多東西的底層應(yīng)該是規(guī)范而不是別人的總結(jié)，比如我總結(jié)的從HTML5與PromiseA+規(guī)范來看事件循環(huán)，在代碼的世界里，其實不需要太多別人的理解，規(guī)范就是規(guī)范，真的想知道為什么，就去看看底層的定義。這可比你讀了誰誰的文章來的靠譜，畢竟人都會犯錯？
• 0.1 + 0.2 ？ 我脫口而出不等于0.3，然后面試官好像有點吃驚，“你是在網(wǎng)上看到這個題？”，“我其實很喜歡這種js的邊邊角角”，自己總結(jié)過一些比如類型轉(zhuǎn)換之類的：）
• 函數(shù)與構(gòu)造函數(shù)的區(qū)別？我覺得沒啥區(qū)別，區(qū)別都是new調(diào)用做的，改了this的指向而已
• 那么延伸一下，數(shù)值怎么存儲？64位浮點型；“小數(shù)怎么存儲？”嗯其實關(guān)于小數(shù)二進制存儲有點懵，就沒說上來。。
• 關(guān)于css，說一下并列布局的方式；核心思路是怎么讓block不自適應(yīng)平鋪為整行。觸發(fā)bfc就可以了；比如絕對布局，float，inline-block等等
• 有沒有一些有意思的項目？終于等來了可以介紹我的“亮點”作品了，關(guān)于作品是啥往上找。。主要就是將靜態(tài)圖通過繪制自定義貝塞爾曲線變?yōu)榕でЧ瑫r生成過程動畫。對這個項目的原理我和面試官討論了給有20分鐘，看得出來他對這個項目很感興趣或者說這么做的思路也是平時少見的。
• 你在同事眼里是個怎樣的人？怎么感覺像是hr在跟我說話。。我覺得還算nice吧嘻嘻
• 你現(xiàn)在在北京，打算來杭州么？去！必須去！不去肯定掛了。。

筆試

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

交叉面

交叉面充分說明了，沒有主力業(yè)務(wù)的可怕=。=，因為你不能光寫你的作品吧？你總給寫公司的業(yè)務(wù)，但是這個業(yè)務(wù)吧你又沒有需求把它優(yōu)化到別人的標準，或者說根本沒有優(yōu)化：）

• 一開始介紹了自己的項目也就是上面提及的。面試官接下來一句我就涼了，在webgl中也可以實現(xiàn)？ 好的我沒用過webgl?！芭稕]用過，好的”
• 移動端做過什么優(yōu)化么？我心想我這邊的業(yè)務(wù)，都是活動頁做啥優(yōu)化。。但是我還是說了我看到別人的優(yōu)化方案，例如直出、域名收斂
• “域名收斂？為什么要收斂？”“因為dns解析慢啊？”“那和pc端有什么區(qū)別，pc端域名不是發(fā)散來提高并發(fā)數(shù)么？” 我心里一想是啊，其實瀏覽器pc和m沒啥區(qū)別那為啥一個發(fā)散一個收斂，或者說發(fā)散我們都知道克服pc瀏覽器的并發(fā)限制。那m端？我當(dāng)時有點迷沒說上來就過了，回來又百度了一下感覺上其實就是m端網(wǎng)速慢dns太耗時。。我沒反應(yīng)過來還有網(wǎng)速的事情
• js與native怎么交互？內(nèi)心獨白：我*，我真沒做過。?！班烹m然我沒做過，但是我了解過應(yīng)該是native定義一套協(xié)議，js使用該協(xié)議發(fā)請求，native攔截解析并返回js的所需balabala”
• 緩存策略都有哪些，包括native；我？？我沒做過native啊。。緩存策略對瀏覽器的我研究過一些基本就是基于我這篇文章來說的基于node的微小服務(wù)——細說緩存與304
• 看你的簡歷里寫了rn項目，對rn有做過優(yōu)化么，全量么？有沒有自己改過內(nèi)核？這就是我之前說的我所面臨的業(yè)務(wù)問題，我這個rn項目撐死了是兩個人寫的，很快就結(jié)束了不維護了都，哪里來的優(yōu)化。。哎所以身在一個好項目中很關(guān)鍵；“嗯沒做過優(yōu)化，只是使用層面（微笑臉”
• 除了react對什么框架熟悉？“畢設(shè)用的vue，僅限使用”
• vue與react有什么區(qū)別？“于我來說最直觀的是寫法的區(qū)別，jsx與模板；同時debug中也存在差異。再有就是框架實現(xiàn)思想上的區(qū)別了，數(shù)據(jù)綁定與diff”
• 看你寫的截圖插件，碰到動態(tài)圖怎么辦？“當(dāng)時使用的是html2canvas，其中確實會存在動態(tài)圖截取失敗的問題，嗯確實沒有好的解決方案”
• 看你的博客，對canvas使用的很多，有過一些沉淀么比如引擎？我*，引擎？？“沒有沒有，不過我封裝過一個貝塞爾曲線生成器”
• m端與pc在html5的新特性上有哪些是不一樣的？有做過什么么？表示我真的忘了有很多新接口，比如電池陀螺儀之類的；一時間想成了pwa的特性。?！拔矣眠^新的音頻api接口，雖然pc與m都有，但是這個做了一些效果，實現(xiàn)了讀取從設(shè)備收取的外界聲音，轉(zhuǎn)化為可視化波形”
• 參與過開源項目么？給node提pr被拒了很慚愧，但是也有收獲
• 自己覺得積累最多的沉淀是什么？可能是對js語言本身上的一些探索吧

終面&hr

來到了北京的一個工作點，準備視頻面，我之后才反應(yīng)過來我其實已經(jīng)被hr面過了。。因為跟在老板身邊是個男的。。

• 自我介紹
• 項目介紹，主要介紹了canvas。
• hr：為什么畢業(yè)半年就準備換工作？因為再待在舒適區(qū)我就廢了
• hr：當(dāng)時實習(xí)半年你就已經(jīng)了解了情況為什么不考慮當(dāng)時就走？因為三方。。
• hr：單身來杭州？有女票，不過是浙江人
• 沒什么問題了，你有問題么？沒
• 很快就結(jié)束了也就20分鐘不到吧

小計

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

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

PPS: 這一切都是個人感悟，說的不對的，不嚴謹?shù)?，歡迎一起分享你的想法，在碼夢的路上，一去不歸。

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

最后

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

有問題歡迎在issues下交流。