[轉載]前端 阿里p6面試題集錦含答案

一、說一下你瞭解CSS盒模型。 

盒模型分爲：IE的怪異盒模型和標註瀏覽器的盒模型，而後能夠經過box-sizing屬性控制兩種盒模型的變換。　　

二、說一下box-sizing的應用場景。 

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

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

 

 

 

 

 

 

 

 

 

 

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

1.flex >>> display: flex;justify-content: center;align-items: center; // ie10以上

2.transform >>>> position:absolut; left: 50%;top: 50%; transform: translate(-50%, -50%)　　// 不支持IE9如下不支持transform屬性

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

1.構造函數：構造函數首字母大寫，就是在一個普通的函數前面加了new運算符，其本質仍是一個函數，因此構造函數都有函數的prototype屬性。
2.實例：實例是經過構造函數建立出來的對象
3.原型：構造函數在建立的過程當中，系統自動建立出來與構造函數相關聯的一個空的對象。能夠由構造函數.prototype來訪問到。
4.原型鏈：

　　

 

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

七、DOM事件的綁定的幾種方式 

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

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

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

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

十、webpack的入口文件怎麼配置，多個入口怎麼分割啥的

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

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

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

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

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

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

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

1四、DOM事件中target和currentTarget的區別 

這個沒答上來。。。

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

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

1六、說一下深拷貝的實現原理。 

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

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

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

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

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

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

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

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

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

2一、git大型項目的團隊合做，以及持續集成啥的。 

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

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

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

2三、ES6的箭頭函數this問題，以及拓展運算符。 

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

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

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

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

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

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

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

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

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

① 怎麼獲取一個元素到視圖頂部的距離。 

② getBoundingClientRect獲取的top和offsetTop獲取的top區別 

③事件委託

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

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

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

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

30、XSS是什麼，攻擊原理，怎麼預防。 

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

①轉義 

②DOM解析白名單 

③第三方庫 

④CSP 

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

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

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

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

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

3三、白板寫代碼，用最簡潔的代碼實現數組去重。 

我寫了兩種實現方式：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)})

3四、怎麼實現草稿，多終端同步，以及衝突問題？ 

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

 

以上內容爲轉載，僅用於學習參考。