面試分享：一年經驗初探阿里巴巴前端社招

通常阿里社招都是招3-5年的P6+高級工程師，當初本身一年經驗也沒有想過有這個面試機會。

雖然沒想着換工做，可是常常關注一些招聘網站的信息，某一天，在某boss上有我的找我，叫我發一下簡歷，我一看是阿里的某技術專家，雖然以前也有阿里的在某boss上給我要簡歷，可是我深知本身經驗不足，而後給boss說我是16屆的，只有一年經驗，而後就沒有而後了。此次我依然這麼回覆，可是這boss說，不要緊，他喜歡基礎好的，讓我能夠試一試，因而我也抱着試一試的心態發了簡歷。

簡歷發過去以後，boss就給我打了電話，讓我簡單的介紹一下本身，我就噼裏啪啦說了一些，還說了一些題外話。而後boss就開始問我問題。

因爲面了四輪，因此最開始的面試記憶有點模糊了，細細回想，又感受記憶猶新。

1.電話初探

1.說一下你瞭解CSS盒模型。

我就說了一下IE的怪異盒模型和標註瀏覽器的盒模型，而後能夠經過box-sizing屬性控制兩種盒模型的變換。

2.說一下box-sizing的應用場景。

這個也不難，簡單說了一兩個應用場景，具體就不一一細說了。

3.說一下你瞭解的彈性FLEX佈局.

這個我也比較瞭解，各類概念和屬性能想到的說了一大堆，也扯到了Grid佈局，基本這個也沒啥問題。

4.說一下一個未知寬高元素怎麼上下左右垂直居中。

說了一下flex彈性佈局的實現，說了一下兼容性，扯到了postcss的一些東西，而後說了一下常規的兼容性比較好的實現。

5.說一下原型鏈，對象，構造函數之間的一些聯繫。

這個我以前寫過相關的文章，本身也有比較深刻的理解，因此這個也不在話下，噼裏啪啦說了一大堆，也不知道面試官聽得咋樣。

6.DOM事件的綁定的幾種方式

說了三種，而後說了一些冒泡，默認事件，以及DOM2，DOM3級的一些標準。

7.說一下你項目中用到的技術棧，以及以爲得意和出色的點，以及讓你頭疼的點，怎麼解決的。

這個因人而異，開放性問題，主要考察平時項目的一些積累吧，這個我回答感受也比較ok。

8.有沒有了解http2.0,websocket,https，說一下你的理解以及你所瞭解的特性。

這個我看過一些文章，可是沒有什麼印象，扯了一些概念，可是回答的不是很深。

第一輪電話初探，大約面了50分鐘，就記起來這麼多，還有一些細節問題可能淡忘了，整體來講，面的都是以基礎爲主，而後boss說把我簡歷推薦給內部，進行正式的社招流程。

一輪技術面

而後當天晚上一個女的面試官就給我打電話了，說八點半進行下一輪技術面試，沒想到效率這麼快，我都沒怎麼準備。
此次就直接省略自我介紹了。

1.webpack的入口文件怎麼配置，多個入口怎麼分割啥的，我也沒太聽清楚。

這個本身就說了一下本身的理解，以及本身用node寫的多入口怎麼配置，而後面試官說不是多入口配置，而後我又說了一下本身的理解，而後這題就過了。

2.我看到你的項目用到了Babel的一個插件：transform-runtime以及stage-2，你說一下他們的做用。

這個我也還算比較瞭解，就說了一下ES的一些API，好比generator啥的默認不轉換，只轉換語法，須要這個來轉換，而後說profill啥的，扯了一下stage-1，stage-2，stage-3，這個問題回答還算清楚。

3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin這個插件，有沒有以爲壓縮速度很慢，有什麼辦法提高速度。

這個我主要回答了一下，我以前也沒怎麼了解，一個想到是緩存原理，壓縮只從新壓縮改變的，還有就是減小冗餘的代碼，壓縮只用於生產階段，而後面試官問還有呢？我就說，還能夠從硬件上提高，能夠獲得質的飛躍，好比換臺I9處理器的電腦。。。。

4.簡歷上看見你瞭解http協議。說一下200和304的理解和區別

這個噼裏啪啦說了一堆，協商緩存和強制緩存的區別，流程，還有一些細節，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特徵，這一塊以前有過比較詳細的瞭解，因此仍是應答如流。

5.DOM事件中target和currentTarget的區別

這個沒答上來。。。

6.說一下你平時怎麼解決跨域的。以及後續JSONP的原理和實現以及cors怎麼設置。

我就說了一下Jason和cors,而後問我JSONP的原理以及cors怎麼設置，這一塊本身也實踐過，因此仍是對答如流的。

7.說一下深拷貝的實現原理。

這個也還好，就是考慮的細節不是很周全，先是說了一種JSON.stringify和JSON.parse的實現，以及這種實現的缺點，主要就是非標準JSOn格式沒法拷貝以及兼容性問題，而後問了我有麼有用過IE8的一個什麼JSON框架，我也不記得是什麼了，由於我壓根沒聽過，而後說了一下尾遞歸實現深拷貝的原理，還問了我typeof null是啥，這個固然是Object。。。

8.說一下項目中以爲能夠改進的地方以及作的很優秀的地方？

這個也是因人而異，開放性問題，大體扯了一下本身的經歷，也還OK。

最後問了有什麼須要問的地方，面試到這裏基本就結束了，大約面了一個多鐘頭，仍是蠻累的。整體來講，回答的廣度和深度以及細節都還算OK，以爲這輪面試基本沒什麼懸念。

二輪技術面

過了幾天，接到阿里另外一個面試官的電話，上一輪面試經過了，此次是二輪技術面，說估計一個鐘頭。此次依然跳過自我介紹之類的，直奔主題。

1.有沒有本身寫過webpack的loader,他的原理以及啥的，記得也不太清楚。

這個我就說了一下，而後loader配置啥的，也還ok。

2.有沒有去研究webpack的一些原理和機制，怎麼實現的。

這個我簡單說了一下我本身瞭解的，由於這一塊我也沒深刻去研究，因此說的應該比較淺。

3.babel把ES6轉成ES5或者ES3之類的原理是什麼，有沒有去研究。

這一塊我說了一下本身的思路，大體也還OK，我也沒去深刻研究怎麼轉換的，以前好像看過相似的文章，本身也只觀察過轉換以後的代碼是啥樣的，至於怎麼轉換的規則，真的沒去深刻觀察。

4.git大型項目的團隊合做，以及持續集成啥的。

這裏我就說了一下本身瞭解的git flow方面的東西，由於沒有實戰經驗，因此我就選擇性說明了這一塊的不熟練，而後面試官也沒細問。

5.什麼是函數柯里化？以及說一下JS的API有哪些應用到了函數柯里化的實現？

這個我就說了一下函數柯里化一些瞭解，以及在函數式編程的應用，最後說了一下JS中bind函數和數組的reduce方法用到了函數柯里化。

6.ES6的箭頭函數this問題，以及拓展運算符。

這一塊主要是API和概念的問題，扯了一些規範以及嚴格模式下其餘狀況this只想問題。

7.JS模塊化Commonjs,UMD,CMD規範的瞭解，以及ES6的模塊化跟其餘幾種的區別，以及出現的意義。

這個也是說了一下本身的理解和認知，本身對模塊化歷史以及一些規範都有所涉獵，這一塊也還湊合。

8.說一下Vue實現雙向數據綁定的原理，以及vue.js和react.js異同點，若是讓你選框架，你怎麼怎麼權衡這兩個框架，分析一下。

主要是發佈訂閱的設計模式，還有就是ES5的Object.defineProperty的getter和setter機制，而後順便扯了一下Angular的髒檢測，以及alvon.js最早用到這種方式。而後扯了一下vue.js和react.js異同點，權衡框架選擇，調研分析之類，噼裏啪啦說了一大堆。

9.我看你也寫博客，說一下草稿的交互細節以及實現原理。

這一款就按照本身用過簡書或者掘金，SG這類草稿的體驗，詳細說了一下，這個開放性問題，說到點基本就OK。

最後面試官問我有什麼想問的嗎，面試到這裏基本就結束了，差很少面了一個小時，說過幾天就會給答覆，若是過了就會去阿里園區進行下一輪的技術面。

三輪技術面

上一輪發揮感受沒前兩輪發揮好，因此仍是有點不自信的，沒想到第三天後，就來電話了，通知我去阿里園區面試。

由於阿里西溪園區距離我不到十千米，我就踩着共享單車一點鐘就出發了，天氣比較熱，飄在路上，百感交集，身邊一輛法拉利轟鳴而過，又一輛蘭博基尼呼嘯而過，我內心一萬頭草泥馬奔騰，MLGB，內心暗想，爲神馬開這車的人不是此刻看文章的你？

走到半路了，面試官給我打電話了，說我怎麼還沒到，說約定的是兩點鐘，我一會兒就懵逼了，短信只有一個遊客訪問ID，並無通知我具體時間，反正無論誰的疏忽，我確定是要遲到了，因而我馬不停蹄，踩着賊難騎的共享單車，揹着微風，一路狂奔，到阿里園區已經是汗流浹背，油光滿面，氣喘乎乎。。。

面試遲到了，印象確定很差，加上滿頭大汗的形象也不太好，加上本身飢渴難耐，這面是估計要GG了，一進來就直奔主題，此次是兩個大Boss面試我。

第一個面試官

1.先自我介紹一下，說一下項目的技術棧，以及項目中遇到的一些問題啥的。

這個問題就是個開場白，簡要說明一下，問題都不大，這個面試官就是第一次打電話給我面試的那個boss，因此技術那塊boss內心也有個底細，因此沒再問技術問題。

2.一個業務場景，面對產品不斷迭代，以及需求的變更該怎麼應對，具體技術方案實現。

具體業務場景，我就不一一描述，Boss在白板上畫了一個大體的模塊圖，而後作了一些需求描述。
而後需求一層一層的改變，而後往下挖，主要是考察應對產品能力，以及對代碼的可維護性和可拓展性這些考察，開放性問題，我以爲還考察一些溝通交流方面的能力，由於有些地方面試官故意說得很含糊，反正就是一個綜合能力，以及對產品的理解，中間談到怎麼實現，也問到了一些具體的點，記得問到的有一下幾個。

① 怎麼獲取一個元素到視圖頂部的距離。
② getBoundingClientRect獲取的top和offsetTop獲取的top區別
③事件委託

第二個面試官

1.業務場景：好比說百度的一個服務不想讓阿里使用，若是識別到是阿里的請求，而後跳轉到404或者拒絕服務之類的？

主要是考察http協議頭Referer，而後怎麼判斷是阿里的ip或者啥的，我也不太清楚。

2.二分查找的時間複雜度怎麼求，是多少

。。。排序的還算清楚一點，查找真的不知所措，沒回答上來，也沒猜，意義不大，不會就是不會。

3.XSS是什麼，攻擊原理，怎麼預防。

這個很簡單，跨站腳本攻擊XSS(cross site scripting)，攻擊類型主要有兩種：反射型和存儲型，簡單說了一下如何防護：

①轉義
②DOM解析白名單
③第三方庫
④CSP

本身對web安全這塊系統學習過，前先後後大約瞭解了不少，對於XSS,CSRF,點擊劫持，Cookie安全，HTTP竊聽篡改，密碼安全，SQL注入，社會工程學都有必定了解，因此這個天然也不在話下。

4.線性順序存儲結構和鏈式存儲結構有什麼區別？以及優缺點。

我是類比JS數組和對象來回答的，反正還算湊合吧，本身都數據結構這塊多少仍是有些印象，因此入了前端，對數據結構和算法確實一直淡忘了。

5.分析一下移動端日曆，PC端日曆以及桌面日曆的一些不一樣和須要注意的地方。

這個我能想到的大體都說了一遍，不一樣的場景交互和細節以及功能都有所誤差，以及功能的側重均可能不一樣。

6.白板寫代碼，用最簡潔的代碼實現數組去重。

我寫了兩種實現方式：
ES6實現：

[...new Set([1,2,3,1,'a',1,'a'])]

ES5實現：

[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){ return index===array.indexOf(ele) })

7.怎麼實現草稿，多終端同步，以及衝突問題？

這個回答的不算好，原本也想到類比git的處理方式，可是說的時候往另一個方面說了，致使與面試官想要的結果不同。

最後說目前的工做經驗達不到P6水平，業務類稍弱，阿里如今社招只要P6的高級工程師，可是能夠以第二梯隊進去，就是以第三方簽署就業協議，一年後能夠轉正，就是俗稱的外包。多少仍是有點遺憾，面了四輪面了個外包，最後放棄這份工做了。

最後，感謝boss一直以來的關照和器重。

學習前端的同窗們，歡迎加入前端學習交流羣

前端學習交流QQ羣：461593224