兩年經驗面試阿里前端開發崗，已拿offer，這些知識點該放出來了

通常阿里社招都是招3-5年的P6+工程師，但在某boss上有個阿里的技術專傢俬聊了我要我簡歷，我說我只有兩年經歷，可是這boss說，不要緊，他喜歡基礎好的，讓我試一試，因而我也抱着試一試的心態發了簡歷。

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

因爲面了四輪，因此最開始的面試記憶有點模糊了。

電話面試

1.說一下你瞭解CSS盒模型。
2.說一下box-sizing的應用場景。
3.說一下你瞭解的彈性FLEX佈局.
4.說一下一個未知寬高元素怎麼上下左右垂直居中。
5.說一下原型鏈，對象，構造函數之間的一些聯繫。
6.DOM事件的綁定的幾種方式
7.說一下你項目中用到的技術棧，以及以爲得意和出色的點，以及讓你頭疼的點，怎麼解決的。
8.有沒有了解http2.0,websocket,https，說一下你的理解以及你所瞭解的特性。

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

一輪技術面

此次就直接省略自我介紹了。

1.webpack的入口文件怎麼配置，多個入口怎麼分割啥的，我也沒太聽清楚。
2.我看到你的項目用到了Babel的一個插件：transform-runtime以及stage-2，你說一下他們的做用。
3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin這個插件，有沒有以爲壓縮速度很慢，有什麼辦法提高速度。
4.簡歷上看見你瞭解http協議。說一下200和304的理解和區別
5.DOM事件中target和currentTarget的區別
6.說一下你平時怎麼解決跨域的。以及後續JSONP的原理和實現以及cors怎麼設置。
7.說一下深拷貝的實現原理。
8.說一下項目中以爲能夠改進的地方以及作的很優秀的地方？

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

二輪技術面

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

1.有沒有本身寫過webpack的loader,他的原理以及啥的，記得也不太清楚。
2.有沒有去研究webpack的一些原理和機制，怎麼實現的。
3.babel把ES6轉成ES5或者ES3之類的原理是什麼，有沒有去研究。
4.git大型項目的團隊合做，以及持續集成啥的。
5.什麼是函數柯里化？以及說一下JS的API有哪些應用到了函數柯里化的實現？
6.ES6的箭頭函數this問題，以及拓展運算符。
7.JS模塊化Commonjs,UMD,CMD規範的瞭解，以及ES6的模塊化跟其餘幾種的區別，以及出現的意義。
8.說一下Vue實現雙向數據綁定的原理，以及vue.js和react.js異同點，若是讓你選框架，你怎麼怎麼權衡這兩個框架，分析一下。
9.我看你也寫博客，說一下草稿的交互細節以及實現原理。

最後面試官問我有什麼想問的嗎，面試到這裏基本就結束了，差很少面了一個小時。

三輪技術面

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

第一個面試官

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

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

第二個面試官

1.業務場景：好比說百度的一個服務不想讓阿里使用，若是識別到是阿里的請求，而後跳轉到404或者拒絕服務之類的？
2.二分查找的時間複雜度怎麼求，是多少
3.XSS是什麼，攻擊原理，怎麼預防。
4.線性順序存儲結構和鏈式存儲結構有什麼區別？以及優缺點。
5.分析一下移動端日曆，PC端日曆以及桌面日曆的一些不一樣和須要注意的地方。
6.白板寫代碼，用最簡潔的代碼實現數組去重。
7.怎麼實現草稿，多終端同步，以及衝突問題？

小結

一面的時候其實我本身感受答得不是特別好，當時面下來感受要涼了，很幸運的時候仍是給我過了。

我準備面試以前對我本身的要求就是，我會的儘可能不會很快就被問倒，因此我重點複習了我擅長的知識，而且到網上刷了不少阿里面試題，作了一個整理，如今分享給你們，算是一個感恩回饋吧。

React

• REACT 全家桶
• 介紹Redux，主要解決什麼問題？數據流程是怎麼樣的？多個組件使用相同狀態如何進行管理？
• React-Redux到react組件的鏈接過
• Redux中間件是什麼東西，接受幾個參數
• redux請求中間件如何處理併發
• Redux中異步的請求怎麼處理
• 如何配置React-Router
• react-router怎麼實現路由切換？BrowserRouter as Router

......

HTML和CSS

• 你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
• 每一個 HTML 文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
• Quirks 模式是什麼？它和 Standards 模式有什麼區別
• div+css 的佈局較 table 佈局有什麼優勢？
• img 的 alt 與 title 有何異同？ strong 與 em 的異同？
• 你能描述一下漸進加強和優雅降級之間的不一樣嗎?
• 爲何利用多個域名來存儲網站資源會更有效？
• 請談一下你對網頁標準和標準制定機構重要性的理解。
• 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

JavaScript

• JQuery 一個對象能夠同時綁定多個事件，這是如何實現的？
• 知道什麼是 webkit 麼? 知道怎麼用瀏覽器的各類工具來調試和 debug 代碼麼?
• 如何測試前端代碼麼? 知道 BDD, TDD, Unit Test 麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?
• 前端 templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?
• 簡述一下 Handlebars 的基本用法？
• 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
• 用 js 實現千位分隔符?
• 檢測瀏覽器版本版本有哪些方式？
• 咱們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來講下會執行幾回事件，而後會先執行冒泡仍是捕獲
• 實現一個函數 clone，能夠對 JavaScript 中的 5 種主要的數據類型（包括 Number、String、Object、Array、Boolean）進行值複製
• 如何消除一個數組裏面重復的元素？

HTML5和CSS3

• CSS3 有哪些新特性？
• html5 有哪些新特性、移除了那些元素？如何處理 HTML5 新標籤的瀏覽器兼容問題？
• 如何區分 HTML 和 HTML5？
• 本地存儲（Local Storage ）和 cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？
• 如何實現瀏覽器內多個標籤頁之間的通訊?
• 你如何對網站的文件和資源進行優化？
• 什麼是響應式設計？
• 新的 HTML5 文檔類型和字符集是？
• HTML5 Canvas 元素有什麼用？
• HTML5 存儲類型有什麼區別？