前端面試分享：兩年經驗社招-阿里巴巴（已經通過）

作者兩年經驗, 第一家任職的是個小公司, 第二家算是二線互聯網公司, 各待了一年吧...

能有機會去阿里面試很驚喜!

先來和大家分享一下面試經歷...

電話面試初探

因為還在職的緣故,電話面試從晚上8點鐘開始, 持續了半個小時左右,

一開始的時候特比緊張,甚至聲音略有些顫抖 = =!

1. 簡單自我介紹, 做過哪些項目, 使用哪些技術棧 ?
2. 這個就沒什麼好說的,因人而異,不要吹自己並不熟悉的技術,免得被深入問的時候答不上來如何看待前端框架選型 ?
3. 我比較熟悉vue和react 就主要提到了這兩款框架各自的優點和缺點以及性能對比, 以及上手難度, 社區生態, 團隊成員組成, 招聘難度啊 blabla...vue的如何實現雙向綁定的 ?
4. Object.defineProperty() 這個方法來追蹤依賴並來完成UI的更新react virsualDOM 是什麼? 如何實現? 說一下diff算法 ?
5. vm網上資料很多, 實現其實也只是解析JSX -> AST語法樹, diff算法主要是說了react如何將O(n3)的算法降低到O(n)級別的工作中最出色的點, 和你最頭疼的問題 如何解決的 ?
6. 還好提前準備到了, 現場想肯定就黃了... (捂臉)平時如何學習, 最近接觸瞭解了哪些新的知識 ?
7. 什麼github 各種論壇 書籍... 想到的都說了就成

結束之後,面試官不告訴我結果說讓我等通知, 然後掛了電話一分鐘後, 電話就來了...

約我第二天去辦公地點面試 ! (效率還挺高)...

技術一面

一面的面試官很和藹,彬彬有禮, 讓我頓時放鬆了許多

1. 簡單自我介紹, 介紹一下你的項目, 技術棧 ?react和vue的比較 ?React Diff 算法 ?
2. 和電話面試前三題基本一樣, 從你的回答中面試官來找問題, 可能我回答相似度高吧, 問題都相似觀察者模式實現 ?
3. 設計模式其實看的不多, 只是說了一下大體的思路http報文頭部有哪些字段? 有什麼意義 ?
4. 這個就很多了, cookie cache-control user-agent expires host refer 等等 挑你會的常用的說, 面試官也不會要求你都說全的移動端高清方案如何解決 ?
5. 這裡被卡住了, 沒有理解到是rem佈局+幾倍圖+1px問題, 只提到了flexible.js,並且說了一下原理,現在回頭看,說的還是有問題... 還是有點久了,忘記了webpack的原理, loader 和 plugin 是幹什麼的? 有自己手寫過麼 ?
6. 大致說了一下,webpack解析模塊, loader和plugin的作用, 沒有手寫過, 看過一部分代碼...簡述從網頁輸入url到網頁展示的過程發生了哪些事情 ?
7. 說的還是比較粗, 不過重點DNS解析,三次握手,數據請求,瀏覽器如何解析DOM樹,css樹應該都提到了, 還提到了瀏覽器的多進程多線程架構,js線程和渲染線程互斥
   細節問題: 我的項目中是一套代碼實現了PC h5兼容 ,組件耦合嚴重, 問有沒有什麼好的解決方案 ?
8. 只想到了把數據層抽象出來,但是其他的不知道該如何解決... 現在也不知道- . -SSR 和 客戶端渲染有什麼區別 , vue是如何實現綁定事件的 ?
9. 簡述服務端渲染大概經歷了哪些過程, 最後生成HTML文件,並且有flag讓框架知道這是已經由服務端渲染完畢, store中的數據一般會掛在在window.__inialState__下... vue綁定事件的實現, 不太明白考官的意思, 簡述了vue通過聲明的方式來書寫事件綁定代碼, 實現訂閱發佈的模式, 對DOM原生事件做了一層封裝 云云... 也不知道說的對不對簡述公司node架構中容災的實現 ?
10. 因為我提到了這個, 答的很模糊, 估計有不少漏洞... 實際上應該是cdn slb node三層容災瀏覽器事件有哪些過程? 為什麼一般在冒泡階段, 而不是在捕獲階段註冊監聽? addEventListener 參數分別是什麼 ?
11. 第一個很簡單, 捕獲,元素,冒泡 第二個當時沒回答出來, 後來查到可能是IE8以下沒有捕獲階段, 還有可能是冒泡比較符合一般控制事件影響的一般習慣
    面向對象如何實現? 需要複用的變量 怎麼處理 ?
12. ES5的構造函數+prototype ES6的class 複用的變量放在構造函數的原型上移動端300ms延時的原因? 如何處理?
13. 移動端雙擊的設置,導致會有300ms系統判斷的延時. fastclick, 或者touchEnd來代替主流框架的數據單向/雙向綁定實現原理 ?
14. vue defineProperty(), react setState() DOMdiff, 訂閱發佈模式 展開來說一下就可以了簡述轉行經歷, 如何學習 ?
15. 作者入坑之前,還做過兩年建築設計... 所以大概訴說了下辛酸史 (捂臉)你覺得自己在前端工作的最大的優點是什麼 拿實際工作的內容舉例?
16. 這裡實際上很丟臉, 吹了一波, 結果被問細節的時候, 愣是想不起來實際工作例子... 結果面試官看我很尷尬 就換了個話題= . =

最後聊了一會兒,問了一下團隊情況,換個人繼續二面

技術二面

1. 和一面前3問基本一致,簡述項目,React vue區別 virsualDOM實現DIFF算法為什麼是O(n)複雜度而不是O(n^3)http code碼? 200 302 304等等移動端rem佈局如何實現? 簡述原理?
2. 這個網上有很多,簡單說就是rem可以通過控制html的字體大小來統一作為標杆,其他的rem寬度可以跟隨調整, 只需要將html根字體和移動端寬度大小做關聯計算就可以JSbridge原理, js和native是如何通信的?
3. 問的比較深,我也是一知半解... 就說了一些schema和native方法注入webview來執行代碼,ios使用iframe來通信Rollup和webpack區別, treeshaking是什麼? 為什麼可以實現TCP三次握手的過程, get post請求的區別 ?靜態文件的瀏覽器緩存如何實現?
4. 其實還是考察http相關的緩存只是,答出來cache-control expires Etag 304 瀏覽器如何識別相同文件等等就可以了前端跨域方案
5. JSONP CORS document.domain nginx/nodejs代理 等等http 請求包含哪些字段 分別是什麼意思js 有哪些數據類型 如何判斷? null 和 undefined區別 應用場景?
6. 基本類型和複雜類型, typeof instanceof Object.prototype.toString 第二個答出來, 平時工作中很少注意到
   new String('a') 和 'a' 是一樣的麼?
7. 一個是字符串對象,一個是基本類型移動端如何實現下拉到底部 跟隨移動 結束後回彈的動畫?
8. 瞭解iScroll的話,應該不難移動端如何優化首頁白屏時間過長 ?
9. 雅虎軍規,還有一些其他的移動端優化,還有離線包或者serviceworker之類的,還趁機問了下團隊是採用哪種方案,也是離線包ES6 generator函數簡述數組去重實現?
10. 網上很多, 說了new Set([...array]) 循環遍歷indexOf 最快的對象鍵值對的方法js浮點數運算不精確 如何解決?
11. 這個真不會, 回來看了下才知道工作中最得意和出色的點, 頭疼的點, 問題如何解決的為何換工作?

哈哈, 回答--- 大廠夢~聊了下阿里的壓力,文化

技術三面

這一面據說是p8大佬,面的時候並不知道,聊的時候挺晚的了,沒之前緊張,輕鬆了很多

1. 公司的前端工程化實踐轉行之後是如何自學前端的, 學習途徑 有沒有一些自己的代碼DOM基礎知識,添加元素,刪除元素等等...DOM節點類型
2. 這就屬於給自己挖坑, 提到了... 結果太久沒看了,忘了正則表達式如何匹配一段url ?在正則表達式中有哪幾種作用?
3. 正則平時寫的比較多,同事經常會讓我幫忙寫正則, 這個倒是沒啥問題移動端優化方式? 離線包是如何實現的?最後聊了一下項目,聊了一下目前公司

最後跟我說技術面試通過了(很爽快~), 後面會有HR來面我...

後面就是很緊張的通過了HR面試, 定級P6

目前還在最後的流程中, 還在等待offer, 祝我一切順利吧! ^ - ^

前端必備面試資料

1. 分析源碼學架構-那些源碼教我們的事
2. 打開全棧工匠技能包-1小時輕鬆掌握SSR
3. 兩小時精通jq+bs插件開發
4. 生產環境下如歌部署Node.js
5. 網易內部VUE自定義插件庫NPM集成
6. 誰說前端不用懂安全，XSS跨站腳本的危害
7. webpack的loader到底是什麼樣的？兩小時帶你寫一個自己loader
8. 全網獨播-價值千萬金融項目前端架構實戰
9. 從兩道網易面試題-分析JavaScript底層機制
10. RESTful架構在Nodejs下的最佳實踐
11. 一線互聯網企業如何初始化項目-做一個自己的vue-cli
12. 思維無價，看我用Nodejs實現MVC
13. 代碼優雅的秘訣-用觀察者模式深度解耦模塊
14. 前端高級實戰，如何封裝屬於自己的JS庫
15. VUE組件庫級組件封裝-高複用彈窗組件
16. 深度解析spa前端路由原理與實現方式
17. 通過jquery源碼閱讀突破技術大瓶頸
18. 我們也能寫出vue,vue源碼的實現
19. 網易雲課堂前端性能優化最佳實踐方案
20. 前端架構師入門第一課-架構師的工作內容
21. 高度定製化的框架下-vue的設計架構之道
22. 深究js底層原理--90分鐘帶你瞭解js內存管理機制
23. 深度解密如何基於nodejs打造Web架構中間層
24. 脫離業務走向高薪-製作一個vue插件

以上資料都有錄播，需要獲取以上資料錄播視頻，可以私信我“前端資源”需要的話給我點個贊，轉發下噢