寫在最前

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

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

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

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

上一次面試掛了后缚柳，我便對(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)惫撰？

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

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

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

1. 在公司的項(xiàng)目中中，源于業(yè)務(wù)并高于業(yè)務(wù)的沉淀厨钻。正如同之前我總結(jié)個(gè)人情況中提到扼雏。如果你的簡(jiǎn)歷里面主要介紹了react的項(xiàng)目坚嗜。那么這其中會(huì)存在兩個(gè)互補(bǔ)的研究即項(xiàng)目與react（同理還有vue與項(xiàng)目等等，為啥不是單獨(dú)的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)你的面試官

2. 第二點(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)畫效果
• 基于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)用

半年來(lái)技術(shù)沉淀的成果與自我感覺(jué)的“亮點(diǎn)”

• 半年中總結(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)站中

突如其來(lái)的面試

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)槭前⒗?/li>
• 好像沒(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í)少見的囚似。
• 你在同事眼里是個(gè)怎樣的人？怎么感覺(jué)像是hr在跟我說(shuō)話线得。饶唤。我覺(jué)得還算nice吧嘻嘻
• 你現(xiàn)在在北京，打算來(lái)杭州么贯钩？去搬素！必須去呵晨！不去肯定掛了。熬尺。

筆試

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

交叉面

交叉面充分說(shuō)明了谓罗，沒(méi)有主力業(yè)務(wù)的可怕=粱哼。=，因?yàn)槟悴荒芄鈱懩愕淖髌钒砷菰郏磕憧偨o寫公司的業(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ǔ)言本身上的一些探索吧

終面&hr

來(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)槿酵踉　！?/li>
• hr：?jiǎn)紊韥?lái)杭州梅猿？有女票氓辣，不過(guò)是浙江人
• 沒(méi)什么問(wèn)題了，你有問(wèn)題么袱蚓？沒(méi)
• 很快就結(jié)束了也就20分鐘不到吧

小計(jì)

至此完成了對(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下交流用踩。