來杭州也有一兩個星期了，這個周末下雨，是在沒地去，還是習慣性的打開電腦逛技術論壇，想想也是好久沒有更新博文了。。。 因為曾經看過一篇文章面試分享：一年經驗初探阿裡巴巴前端社招所以來杭州也是帶有目標的，網易！如果能有幸加入阿裡，也是非常榮幸的。所以面試總是懶懶散散的，大概一天也就面試一家。 然後我的技 ...
來杭州也有一兩個星期了，這個周末下雨，是在沒地去，還是習慣性的打開電腦逛技術論壇，想想也是好久沒有更新博文了。。。
背景
因為曾經看過一篇文章面試分享：一年經驗初探阿裡巴巴前端社招所以來杭州也是帶有目標的，網易！如果能有幸加入阿裡，也是非常榮幸的。所以面試總是懶懶散散的，大概一天也就面試一家。
然後我的技術棧大概是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了我。期望加入~
基本想到的就是就這麼些，後面如果想到再來補充吧。
我有一個前端學習交流QQ群：328058344 如果你在學習前端的過程中遇到什麼問題，歡迎來我的QQ群提問，群里每天還會更新一些學習資源。禁止閑聊，非喜勿進。
