來杭州也有一兩個星期了，這個週末下雨，是在沒地去，還是習慣性的開啟電腦逛技術論壇，想想也是好久沒有更新博文了。。。

背景

因為曾經看過一篇文章面試分享：一年經驗初探阿里巴巴前端社招所以來杭州也是帶有目標的，網易！如果能有幸加入阿里，也是非常榮幸的。所以面試總是懶懶散散的，大概一天也就面試一家。

然後我的技術棧大概是react+node，GitHub地址：Nealyang

目前的狀態是阿里通過了技術面和交叉面，大概下週一總監面+hr面。網易hr面結束了，在等通知，科大訊飛已經拿到offer了，還是比較不錯的offer，別的創業公司、上市公司不管是人工智慧還是智慧家居也都基本拿了offer，但是。。。好吧，還是有著一顆對大廠的夙願。或許就是大學埋下的吧。

因為個人比較懶得跑面試，所以很多公司的電面我都接了，但是很多公司的現場面試都沒有去，哎呀呀，好吧，我懶~這裡我大概回一下所有面試所問到的問題吧，因為之前沒想去記錄，所以很多我都忘記是哪一家了，索性一不做二不休，直接一股腦回憶下面試題吧。能想起來的我標註下是哪家公司。

面試 begin

大概我是一月分離開的環球網，然後再北京收拾東西總結知識，開始投遞簡歷，大概都是boss直聘和拉鉤上面

HTML & CSS 部分

• css常用佈局

這個在面試上市公司和創業公司問的比較多。大概我會回答一些盒模型包括怪異盒模型，定位佈局，流佈局，浮動佈局，flex和grid佈局，包括還有三欄佈局中的聖盃和雙飛翼。這些都還比較熟悉，所以問到都還知道。其中flex佈局問的比較多，阿里的交叉面還有別的公司有問到子元素的一些屬性。

• BFC

這個滴滴面試的時候有問道（滴滴是破例讓我加入流程中的，並且他們還招的技術棧是vue）一般在問清除浮動的時候會說一下

• 居中問題

這個應該是老生常談的東西了，電話面試的時候有兩家問到

• session、cookie、sessionStorage、localStorage等區別

這個也是上市公司和創業公司問到，大概就是說了下中間的區別，還有會簡單說下cookie的屬性，以及一些前端安全方面

• px/em/rem的區別

滴滴電面的時候問的，這個我也知道，大概說了下相對於父元素還是文件來確定大小之類的。

• animation和transiton的相關屬性

這個我也就用了個大概，大概知道的簡寫位置和屬性，當然，阿里一面還問到，為什麼動畫推薦用c3而不是js，這個問題當時並沒有回答好，大概就是從效能上扯了扯，但是什麼佔用主執行緒以及瀏覽器對c3加速都沒聊到。然後網易面試也問到了，然後我巴拉巴拉說了下後來查的相關東西。然後網易問了一句，瀏覽器怎麼優化的動畫。。。我。。。不知道。

• css編寫注意事項

因為這個在之前團隊裡面沒有明文規定，所以我也沒總結過，大概說了下自己編碼中的方式，和瀏覽器查抄的過程。

• css和HTML 問的的確都不是很多，然後還有什麼標籤，meta和media啥的，大概也就介紹了下，問的都不是很深，我也沒有回答的很深。。。因為我HTML CSS真的一般般。

JavaScript部分

• JavaScript資料型別分哪些

這是一個初創公司電面的問題，問的都非常基礎，比如css畫三角形之類的。別說，之前沒準備，還真的忘記了border怎麼設定出現直角三角形還是等腰三角形。當然，這個型別還是。。。沒得說的

• JavaScript閉包

這個應該問的都比較多，我之前總結過，以及常用的場景，也結合es6談了下作用域和單例模式談了下

• 前端跨域

這個我基本都知道，之前有在掘金上總結過，這個很多公司又問道，包括阿里、網易一面。一般方式我都知道，具體展開會把CORS跨域，heade資訊欄位都說了一遍。也不難

• JavaScript繼承

這個我之前也總結過相關文章，網易的一面第二個面試官問了，我大概從原型繼承、建構函式繼承、組合繼承、寄生組合繼承優缺點和實現方式都說了下，還有es6的實現方式。一般這樣就回答差不多了。後來網易還接著問，es5如何實現super關鍵字。看過babel轉換後代碼，但是這個。。真的忘記看了。大概說了下自己的實現思路，也就是裝飾著模式。然後也就渾過這題了。

• JavaScript的節流和防抖

滴滴一面問到了，阿里交叉面的時候聊業務場景的時候，也有問到。之前看過文章，自己專案中也用過，所以大概知道些

• JavaScript的事件

阿里交叉面問到的js事件執行機制。我大概談了下event loop，microtask，task queue。然後事件委託、捕獲、冒泡、目標階段大概談了下，也順道談了下target和currentTarget。

• ajax請求方式

因該算是考察基礎功吧，談了下XMLHTTPRequest的過程，readyState的幾種型別和代表的意思。以及瀏覽器相容性的處理方案。

• js判斷資料型別的方法

貌似有兩家公司問到，大概說了下typeof、instanceof、constructor、prototype等判斷方式，注意事項以及優缺點。應該回答的還可以

• 函式宣告和變數宣告

這個大概我也知道，還說了下es6的相關東西

• this指向的問題

這個我也總結相關文章，大概說了下四種繫結規則，還說下new的執行過程以及箭頭函式注意事項

• 面向物件的理解 滴滴一面問的，大概說了下理解以及實現，從封裝、繼承和多型上說了下es5和es6的實現方式

• 對於js這門語言你認為怎麼樣

哇，這個問題問的真的大。有看過《JavaScript語言精粹》，大概說了哪些弱型別語言通病，因為之前搞過Java，所以綜合對比了下，同時也說了這些詬病怎麼解決。應該會的面試官還是挺滿意的

• es6相關知識點

這個應該回答的都不是很深入，大概我都用過，promise的實現方式也研究過，但是不記得哪一家公司問到generator的怎麼實現的。大概從iterator上簡單說了自己的方案，然後說沒看過。然後對於別的其實問的不是很多。基本套路就是es6瞭解過嗎？用過哪些語法。後面具體可能會說下哪一個新特性的實現方式或者轉向babel、webpack的相關面試。

React部分

• react部分必考的肯定有生命週期

這裡我大概說了下每一個生命週期，es5、es6的兩種書寫方式，以及每一個生命週期我們一般用來做些什麼操作

• setState是非同步的還是同步的

阿里一面的時候問到的，我大概說了兩種setState設定方式，以及表現為同步的那種設定方式展開說了下

• 子元件和父元件componentDidMount哪一個先執行

這個也大概從生命週期分期了下。話說我到現在還不知道自己回答的對不對，技友們，你們覺得呢？

• redux的一般流程

這個我比較熟悉，一帶說了下所有的技術棧，以及react-redux的原理、高階元件、以及redux-saga的實現原理。（逮住會的，都啪啪啪說出來，自己掌握點節奏。但是要適當，比如問到我es6，我啦啦啦說了一二十分鐘，一般面試官會有點不耐煩。所以視情況而定）

• 如何設計一些元件，原則是什麼，你寫過什麼自豪或者眼前一亮的元件

阿里一面以及一家上市公司也聞到過這類似的問題，大概從組合、複用、重複、測試、維護等方面說了下

• a元件在b元件內，c元件在a元件內，如何讓他渲染出來，a元件和c元件同級

阿里面試的時候問到的問題，想了一會，說了不會。後來查了下，大概可以通過react16中返回不帶包裹元素的元件來實現。因為和阿里一面面試官後來聊得比較開心，加了微信，還斗膽為了下他，他說還有曲線救國的實現方式

• react元件的優化

從pureRenderMixin、ShouldComponentUpdate等方面說了下，以及元件的設計和木偶組建的函式編寫方式說了下

• react元件的通訊

這個大搞幾種方式也都說了下，prop，context（順道扯了react-redux的context實現方式）、redux甚至廣播都說了一遍

• react 的virtual dom和diff演算法的實現方式

阿里交叉面問的，直接說實現方式原始碼沒有看過，但是大概說了下原理和步驟，具體程式碼怎麼寫的不知道。

• MVC、MVVM瞭解麼，資料雙向繫結和單向繫結實現方式

滴滴一面問的，實現方式還是說了不知道，然後說了下MVC和MVVM的設計模式，因為之前用過angular1，大概就說下髒檢查步驟以及view-model的作用

• react-router實現方式，單頁面應用相關東西

大概說了下react-router的一般使用方式，以及沒有使用react-router的時候如何利用h5 的history API來實現路由跳轉等。

• react的ssr瞭解麼？大概怎麼實現

阿里的一面問的，在github上寫過demo，但是沒有用過別的第三方庫，這裡我就大概說了下webpack的配置項以及大概的實現思路和注意事項。

• react大概也就問了這麼寫，別的就是具體的業務場景改怎麼寫程式碼怎麼分析，比較不大眾，這裡我就我細說了。其實也就考驗你的專案經驗吧。當然，還有一些react Native的面試題，比如常用元件，和原生如何通訊之類的，這些就有贊問的多，但是因為RN玩的不是很透徹，所以對於互動原理都不是很明白。

瀏覽器

• http三次握手後拿到HTML，瀏覽器怎麼載入

阿里的一面問的問題，這個我之前在環球做過相關技術分享，所以大概都知道，從過程到不同核心差異（差異部分簡單提了下）說了下dom、CSSDom以及paint等過程。然後面試官接著問如何防止repaint和reflow。大概從引起repaint和reflow等操作上說了下避免。網易的一面也問到了repaint和reflow。

• 前端優化一般都做哪些

這個之前總結過，雅虎的軍規啥的。以及首屏優化。然後面試跟了些預載入http head資訊相關的，這個沒怎麼看，回答的不是很好

• 瀏覽器快取

這個我也做了相關的技術分享，也看過《圖解http》大概從http 1.0和1.1都說了下，其中有一家公司問到200 From cache和200 ok區別（有贊），這個還真的忽略了，後來查了下大概瞭解了。其實也就是強快取

• http常見狀態碼

從100~500 大概也說了十幾種。其實也就是《圖解http》中的東西，當時還刻意背了下

• http2.0相關

網易一面問題，說了下2.0的採用二進位制格式、多路複用、報文頭壓縮、伺服器主動推送還扯了websocket的相關內容WebSocket：5分鐘從入門到精通。然後網易接著問，報文頭怎麼壓縮的？我。。。？？不知道。。。然後大概也問了下https的TLS/SSL,之前看過漫畫的htts的相關東西，大概說了下漫畫裡面的故事~

• post、get區別

這個回答的不是很好，也是一個大廠問的題目，我回答的都是表象。後來我看了一篇文章，大概知道了。99%的人都理解錯了HTTP中GET與POST的區別

• 別的我也不記得了，回頭想起來在來補充吧

構建工具

• 編寫過webpack的擴充套件嘛，Plugin或者loader

這個我看過一本書《深入淺出webpack》，所以基本都能回答上來。包括原理和編寫loader、Plugin注意事項。當然，我自己沒有寫過。。。《深入淺出webpack》

• babel 問的不多，但是我也準備了，包括每一個包的作用和內部轉換過程，不記得哪家公司問了，大概我也就說了下babel轉換的過程。

結束語

下週起阿里終面，網易等通知。別的公司基本offer也都拿到了，但是大廠畢竟大廠，基本拿到的offer都過期了。。。並沒有辦法，畢竟有個大廠夢。好吧，其實還是挺幸運的，阿里用人部門主管leader和一面面試官，加了微信都聊得挺開心的。還感謝主管GitHub follow了我。期望加入~

基本想到的就是就這麼些，後面如果想到再來補充吧。

ps：最近掘金 關注漲的有點多，也不知道為啥，最近也沒有怎麼學習，所以就匆匆忙忙整理這些不知道是不是幹活的幹活。如果整理的不好，還望見諒。後續結束求職經歷，在來細細雕琢。