2年前端7～9月面試經歷總結
背景：本科畢業于宇宙工業大學計算機專業，2年前端開發經驗，分別就職于廣州、深圳的兩家小廠各一年。今年 7 月底裸辭回家準備 2 個月，中間大大小小面了十幾二十家公司，最終收獲了不錯的 offer。
前言
7 月底因為我在深圳租的房子剛好到期了，再加上中間有一些工作上以及非工作上不順心的事情，所以打算直接裸辭回家準備。
同時，在我的職業規劃中，我是比較希望能夠在職業生涯前期能夠進入大廠(不管是不是一線)工作，大廠提供的資源以及大廠本身的業務遠遠不是小廠能夠媲美的，能夠加入大廠對我以后的職業規劃會有非常多的幫助。同時，如果我今年選擇加入一家小廠，同時我仍保留 3 年內加入大廠的想法的話，那我明年就又要再次跳槽，算上今年相當于職業生涯前三年一年一跳，這在 hr 面的時候是一個非常大的減分項。
同時，我再次提醒各位：不到最后時刻，千萬不要選擇裸辭。因為一旦你選擇了裸辭，那么你將失去你的經濟來源，短時間內還好，但是一旦經歷比較長的面試流程的時候(比如騰訊動輒一個多月的面試流程)，整個人的精神壓力是非常大的，同時裸辭如果理由不充分的話，在 hr 面的時候也會是一個減分項。
截止到目前為止，我的所有流程大概如下：
- 大廠：
- 深圳shopee(finance)：offer;
- 金山辦公軟件(wps+)：offer;
- 獵豹移動：offer;
- 騰訊教育(IM Web)：三面掛，但不知道為啥簡歷還在流程中;
- 字節跳動(深圳飛書)：二面掛;
- 富途證券(架構組)：三面，被我推了;
- 深圳百度(安全部)：hr 面，被我推了;
- 中信信用卡研發中心：三面，被放了飛機，剛好不想去了;
- cvte(ES-Web)：一面技術面過了，hr面掛了。
- 小廠：
- 深圳兔展：offer;
- 明源云：offer;
- 銥云科技：offer。
大綱
整篇文章不會列出以上所有我面過的公司的面試題出來，因為面試過程大部分問的問題都緊貼簡歷上的項目經歷，所以很多問的問題并沒有普遍參考價值，我會將我在面試中經常遇到的一些問題羅列出來，并給出我心目中認為是比較好的答案供大家參考。
當然，我相信還是有很多人想去看我的完整面試題，我已經統統整理出來，存放在 i-want-offer / FE-Interview-questions[1] 這個倉庫里面，里面包含了我在整個準備過程中收集到的一些前端面試知識點，以及我自己經歷過的面試題、我身邊人經歷的面試題或者是我在掘金上看到的有參考價值的面試題，希望能夠幫助到各位。
前端八股文
js 基礎
- 原型鏈
- 繼承的實現
- 數據類型
- var、const、let 對比
- es next 最新規范
- new 的過程
- this 指向問題
- bind 實現方式
- 閉包
- 事件循環 【超高頻】
- 類型判斷
- 手寫 Promise
其中，關于 js 語法的資料這里不詳細贅述，可以去倉庫里面找對應的資料。
關于 事件循環(Event Loop) ，大小廠的問法是不同的。
小廠通常會直接讓你口述事件循環的機制，這時候比較標準的回答是說出事件循環分為瀏覽器的事件循環和 node 事件循環，并且分別說出瀏覽器中的事件循環機制以及 node 事件循環機制。其中加分點在于可以答出 v8 對于 async / await 的優化以及 node 11 版本前后 node 事件循環機制的區別(其實大多數面試官可能自己都不知道，面試題都是網上找的，你說的有道理能把他唬住基本就沒問題了)。具體的回答可以參考 事件循環機制滿分答案[2] 。
大廠又是另外一種問法，他通常不會直接讓你口述事件循環的原理，會給一道面試題給你做，里面包含了宏任務、微任務的各種坑，這種其實更簡單，做多了自然就會了。
另外關于 手寫 Promise ，目前我沒有被小廠問過這個，但是大廠有被問過幾次，分別是讓我手寫 Promise.finally 以及 Promise.all ，實現思路都非常簡單，可以參考一下我用 js 實現的 Promise A+[3] 。
前后端通信
作為一個前端工程師，知道那幾個基本的知識點足夠讓你應付初中級別的面試題，但是如果作為一個程序員的角度出發，還是需要豐富自己在這方面的知識。這里不展開討論，只說面試題。
- 輸入 URL 到頁面展示 【超高頻】
- 跨域 【超高頻】
- HTTP 各版本 (通常是由緩存帶出來的問題)【高頻】
- HTTPS 原理 【高頻】
- TCP 三次握手、四次揮手
- TCP 和 UDP 區別
- HTTP 常見狀態碼
- 鑒權
輸入 URL 到頁面展示 雖然是一個老生常談的問題，但是我認為這個問題基本涵蓋了整個前端的所有基礎知識點，可以回答得非常豐富。建議大家看我的這篇總結：瀏覽器輸入 URL 的全過程[4] ，里面分為了網絡篇、解析算法篇、渲染過程篇三個步驟，比較好的講述了整個過程到底經歷了什么。
由這個問題可以帶出 緩存、DNS 解析、TCP 連接、HTTP 請求、重排重繪 等等非常多的子問題，如果你掌控的好，甚至可以控制整個面試過程，非常有利于給面試官留下比較好的印象。
跨域 也是另一個非常高頻的問題，通常會問你跨域的原因以及解決方案，網上很多答案，這里不做解釋。
HTTP 各版本的區別 通常并不會干巴巴的讓你回答，在我遇到的所有情況下，通常都是在我答到緩存的時候，面試官會讓我停下來解釋緩存，這時候回答到一部分 HTTP 各版本中的區別;另外，一部分會在我回答性能優化的時候，答到 HTTP2 的時候會回答。
HTTPS 的問題也是比較簡單，問的也通常比較直接，一般會讓你直接說原理，然后再讓你總結一遍握手過程。偶爾會讓你對比一下 HTTP 之間的優缺點。
至于其他問題，可以到倉庫里面找答案，也可以網上自己查，都是非常基礎的問題。
安全
原本這個問題應該羅列在前后端通信中的，但是這個問題實在是太高頻了，幾乎每一次面試都有問到，所以我單獨羅列出來。
具體的回答可以參考一下我整理的這篇文章：前端安全[5] 。
通常在回答安全問題的時候，需要回答以下幾點：
- 有哪些安全問題?
- 解決的辦法。
XSS 和 CSRF 是一定要回答上的，剩下的你知道多少答多少，但是別瞎說。一旦你亂說，很容易就會讓人覺得你是在背書，沒有自己的理解(雖然確實是在背書)。
工程化
這方面通常會從一個項目上入手來說，一般會問一下問題：
- 頁面性能優化 【超高頻】
- webpack 性能優化
頁面性能優化 可以聊的東西其實挺多的，比如通常會從網絡、加載這兩個角度出發來解決性能問題。網絡角度上有可以聊到前面提到的緩存、CDN、HTTP2以及圖片格式上面的優化。從加載上來說的話，又可以聊到 webpack 的打包拆包、tree-shaking、懶加載和異步加載、多線程。除了這兩個角度以外，還可以從用戶體驗的角度上來進行優化，比如說骨架屏、動畫、虛擬滾動等。
除了這種常規的角度來說，現在我們開發一個 Web 應用通常都會使用框架，每一款框架一般都會有一些配套的性能優化的手段，比如 React 里面的 shouldComponentUpdate、PureComponent、memo 等優化 diff 算法的手段也需要回答。框架的優化問題通常會在你答完性能優化的問題之后跟著問你。
具體可以看下這兩篇：
- 性能優化[6]
- React 性能優化[7]
至于 webpack，以我目前的面試經歷，問的相對比較少，可以有選擇的去關心關注。
框架
框架對于目前現代的 Web 應用開發來說，基本就是必備技能。面試的時候，面試官通常會根據你自己簡歷上寫的技術棧來問，對于大小廠而言，問的方式可能也略有不同。對于小廠來說，如果你恰好技術棧和他們相一致，那么他們問的基本和大廠差不多;如果不相符，那就完全看面試官是否了解你當前的技術棧，了解的話大概會問一些，否則基本不問。對于大廠來說，那基本上是不可能不問的。
由于我的技術棧是 React + Angular，所以我的所有面試經歷基本都沒有被問到過 Vue 相關的問題(用 Vue 的同學不好意思了)。目前我被問到過的問題主要有：
- Angular 變更檢查的原理以及如何進行優化
- React 的 diff 算法工作過程
- Angular、React 的事件機制
- React 中的 setState 是同步還是異步
- React、Angular 的區別(如果你用過 Vue，問的問題會換成 Vue)
- React 中各種組件復用的優劣勢(mixin、render props、hoc、hook)
- React 的 Fiber 架構
- 老版本的 React 的某些生命周期被廢棄的理由
- React 性能優化
以上的問題都很大概率會被問到。
TypeScript
2020年，ts 基本是一個前端從業者必須掌握的一項技能，一旦你簡歷上寫了有 ts 的開發經驗，那么面試基本上都會問一兩道有關 ts 的題目。
ts 的一些普通知識在這里不進行贅述，這里挑選一些我在面試中遇到的題目。
另外，對于大小廠而言，他們對 ts 的掌握程度要求是不一樣的，對于小廠而言，他們希望來面試的人能夠熟練使用 ts 進行業務開發，所以 ts 的概念的熟練程度對他們來說最重要。而對于大廠而言，他們可能更加希望來面試的人能利用 ts 開發一些 ts 的周邊工具，所以比較少會直接問 ts 的一些概念，一般都會讓你手寫一個 ts 的工具函數。
目前我面過的所有小廠，基本都會問 ts 中 type 和 interface 的區別 ，也基本只問這一個問題。除此之外，偶爾還會問到 ts 中如何實現一個函數的重載 ，基本上也是從使用角度出發，考驗一個面試人的 ts 的熟練程度。
大廠里面，有兩題我是印象比較深刻的：
1.實現一個 ts 的工具函數 GetOnlyFnProps
- type GetOnlyFnKeys<T extends object> = {
- [Key in keyof T]: T[K] extends Function ? K : never
- }
- type GetOnlyFnProps<T extends object> = {
- [K in GetOnlyFnKeys<T>]: T[K]
- }
2.實現一個 ts 的工具函數 UnGenericPromise
- type UnGenericPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never
項目經歷
項目經歷千人千面，我的項目經歷對于大多數人來說都不太有參考價值。
但是整個面試過程，對于整個項目的講述其實是可以抽取出來，組合成一套公式來敘述：
- 項目的背景是什么;
- 當前項目的目的是什么;
- 在開發過程中，你的角色是什么;
- 在開發過程中有遇到過什么樣的難題;
- 遇到這些問題，你都是如何進行解決的;
- 項目完成之后，取得了哪些成果;
這套公式基本上可以完整地講清楚你參與的項目的整個過程，也有利于面試官去發掘你項目中的閃光點，便于面試官在你的敘述中找到可以深挖去問你的問題。
同時，在你準備寫上簡歷的項目中，你最好自己能夠自己過一遍上面的流程，這樣有利于你找到你可能還沒有掌握的知識，進行查缺補漏。
算法
我相信大多數人對于大廠面試的恐懼感主要來自于對算法的恐懼，因為在網上流傳出來的各種面試題都包含了很多在 leetcode 中難度為 mid 以上的算法題。我本身也是一樣，尤其是在我面字節跳動的時候，整個面試過程我都非常緊張，覺得字節的算法題會很難，很可能做不出來。但做完之后，其實也還好，難度基本控制在 leetcode mid 以下的級別，甚至我面的好幾家大廠過程中都沒有涉及算法。但是，我覺得作為一個程序員，算法水平一定程度上代表著你程序設計的好壞，所以提高自己的算法水平對于開發出高水平 Web 應用是有非常好的幫助的。
我在準備算法的時候，最開始比較盲目的刷 leetcode 的題目，整個過程我覺得進步非常緩慢，很多題目刷了一次兩次，第三次再看還是不知道該怎么做。后來我放棄了這種沒有目的性的刷題，我開始在網上找一些前端算法中比較常見的題目，我發現了這篇文章：前端算法渣的救贖之路[8] ，里面概括了一些前端面試中常見的題目，還給出了一些算法題型的經典解法，在整個學習過程中，對我的算法提升非常大，同時我也整理出了自己的一些 算法經驗[9] 。同時對于基礎不是很扎實的人來說，我非常推薦極客大學 9.9 的算法基礎訓練營，我在看完整個訓練營 4 節課后，對基礎有了一定的鞏固。
做算法的時候我自己有一個竅門：遇到一個問題，先嘗試用最暴力的方法進行解決，然后分析出暴力方法會有什么樣的問題，然后再去解決遇到的問題。這個方法對于大部分我遇到的算法問題來說，基本上都可以解決問題。
各大廠面試特點
因為今年的特殊原因，所以基本所有公司都會采用遠程面試的方式來進行面試。
在我整個面試過程中，其實各大廠的面試風格也是略有不同的，下面我一一細說。
CVTE
據我了解，CVTE 是會有很多輪 hr 面，基本上可以說是每一輪技術面試之后都會有一輪 hr 面來評估你。我當時一面的技術面已經過了，但是一面 hr 面沒過，hr 面問的問題也比較尖銳，不過技術面難度還好，基本按照我上面的模版一套組合拳下來也能答出個七七八八。
CVTE 的一面沒有涉及到算法題，后續的面試我就不是很清楚了。
中信信用卡中心
一面是前端面的，二面是后端面的，所以只有一面問了前端的知識問題，二面就是單純打電話聊天，主要是聊了一些開發流程上面的問題，過程非常快非常輕松，全程只有一題算法題，也出現在我上面整理的算法題庫里面。
百度
百度的技術面總共有4輪，基礎面(同級別員工)+基礎面(級別應該比你要一點)+leader面(整個研發部門的技術負責人)+boss面(整個研發部門的總負責人)
百度一面是需要你當場完成一套筆試題，難度的話也一般，基本上面的知識點你都過一遍問題不大，也有一題算法題，是百度的原創題目，但是題型是一樣的，問題也不大。前兩面都是前端開發面的，沒啥難度，涉及到的知識點不局限于前端吧，還包括網絡以及開發模式等等問題。
leader面還挺有意思的，當時他們強烈要求我到現場去參與面試，leader 是一個很年輕的小伙，因為不是專職前端，所以問的問題涉及到了整個計算機的所有知識點：數據結構、算法(原創題，一個很簡單的遞歸)、操作系統，以及問你除了 js 以外還掌握什么語言等等，整個過程非常輕松，也非常愉快，大家都有說有笑。
boss 面氣氛就比較嚴肅了，也可能是因為那個會議室空調有點冷的原因。基本上整個面試都是在讓我吹水，講自己的項目經歷，以及解決的辦法，答題模版也基本可以按照上面的來說，最后也通過了。
富途證券
富途證券是我面試到目前為止，面試時間最長的公司，每一輪面試都基本恰好一個半小時，不知道是不是有硬性規定，所以在面試的時候要預留好時間。
由于富途我只經歷了兩面，所以整個二面之后是怎樣的流程我也不是特別清楚，但是互聯網公司大都大同小異。
一面面試官是做前端的，問的非常細，不僅僅需要口述一些前端的基礎知識，還會有一些筆試題讓你完成，最后還有一道算法題，不過算法題沒讓我動手寫，只是讓我說出實現思路就讓我過了。
二面面試官似乎是我面試的那個組的開發負責人，所以整個過程沒有涉及到任何和前端知識相關的，一開始也是對項目進行吹水，后來之后給了 4 題筆試題，包含算法在內，難度的話大概是 leetcode mid 的水平，做過的話也就還好。
金山軟件
金山軟件的面試題我覺得比較有水平，全程沒有涉及到算法，一面的時候是一些很基本的前端問題，背過的話通過非常輕松。二面的話是有兩個面試官，其中一個是整個研發部門前端的leader，一開始可能會先問一些框架上面的知識，看下你對于框架的理解。然后會從實際開發角度出發，給出了幾道場景題，讓你去設計，非常考驗一個人的開發熟練度，更容易能夠通過這種方式找到熟練的前端開發。至于三面的話，就是全程在吹水了，還是按照上面項目的吹水公式吹水，整體也非常輕松。
騰訊
騰訊的面試風格和金山特別像，但是他問的基礎題會更加復雜一些，不會單純讓你說一些只是要靠背的沒啥用的 API，通常會通過一些手撕代碼的形式來進行考驗。然后每一面都會問你項目的一些情況，問的問題基本也差不多，所以準備一下基本都沒啥問題。
但值得注意的一點是，問項目的時候，千萬不要被面試官得到主導權，回答的時候一定要自信，千萬不要被面試官牽著鼻子走。我在三面的時候，因為是第一次三面，沒啥經驗，非常緊張，被面試官牽著鼻子走，因為這次面的是 c 端的部門，面試官可能沒有理解 c 端和 b 端之間的差異，用 c 端的思維去審視我 b 端的項目，導致整個面試過程我的表現都非常差。所以在面試時，一旦你發現面試官問的問題不太對勁的時候，一定要及時說出來。
字節跳動
字節跳動的問題問的非常細，在我參與的兩輪面試中，都是在問一些非常基礎的知識，面試的過程也不會很長，大概 45 分鐘左右。
一面的時候再做了一番自我介紹之后，給了 5 道筆試題，做完之后再聊一聊別的就過了。
二面的時候簡單介紹了一下自己做過的項目，然后主要是圍繞著你做的項目中用到的技術進行討論。他給了我一道場景題，然后讓我按照場景中的內容進行實現，最后給了一道應該是原創的算法題。
其實面字節之前我是非常緊張的，我個人對能通過字節的面試一點也不抱希望，但是面完之后，覺得很多時候大家都神話了字節的面試，難度也沒有想象中的高。
不過有一說一，我覺得面試我的兩位面試官態度都非常好，有一些我答不出來的問題，也會給我提示給我鼓勵。雖然我最后二面沒有過，但是二面面試官在教我做算法題的思路上給了我一定的幫助，也就是我上面算法總結最后一段話。
總結
其實面試也就那么一回事，被問的多了，自然就能夠總結出一套自己的方法論。但是，對于廣大程序員同胞來說，大家必須記住面試是面試，工作是工作，面試面的不好的人，工作能力未必比你差。歸根到底，大家做了開發這一行，還是技術水平說話，誰的水平高，誰的聲音就大，大家不要覺得加入了大廠之后就一輩子安穩，一定要不斷提升自己的技術水平。
后記
在我準備面試的過程中，我通過閱讀了很多掘金等網上的文章，收獲了非常多以前不懂的知識，在這里非常感謝：
- LinDaiDai_霖呆呆[10] 大佬，他寫的幾篇文章，都讓我獲益匪淺;
- luciferzero[11] 大佬，他的 前端算法渣的救贖之路[12] 在算法上對我幫助非常大;
- 冴羽[13] 大佬，他的 冴羽的博客[14] 懂得都懂，是我入門之作;
非常感謝以上的所有作者無私的奉獻。最后，希望大家都能找到滿意的工作。
參考資料
[1]i-want-offer / FE-Interview-questions: https://github.com/i-want-offer/FE-Interview-questions
[2]事件循環機制滿分答案: https://github.com/i-want-offer/FE-Interview-questions/blob/master/JS/事件循環.md
[3]Promise A+: https://github.com/LaamGinghong/Promise-A-Plus
[4]瀏覽器輸入 URL 的全過程: https://github.com/i-want-offer/FE-Interview-questions/blob/master/瀏覽器渲染/瀏覽器輸入URL的全過程.md
[5]前端安全: https://github.com/i-want-offer/FE-Interview-questions/blob/master/安全/前端安全.md
[6]性能優化: https://github.com/i-want-offer/FE-Interview-questions/blob/master/性能優化/性能優化.md
[7]React 性能優化: https://github.com/i-want-offer/FE-Interview-questions/blob/master/性能優化/React性能優化.md
[8]前端算法渣的救贖之路: https://juejin.im/post/6844904175562653710
[9]算法經驗: https://github.com/i-want-offer/FE-Interview-questions/tree/master/算法
[10]LinDaiDai_霖呆呆: https://juejin.im/user/360295513463912
[11]luciferzero: https://juejin.im/user/888061128607662/posts
[12]前端算法渣的救贖之路: https://juejin.im/post/6844904175562653710
[13]冴羽: https://juejin.im/user/712139234359182
[14]冴羽的博客: https://github.com/mqyqingfeng/Blog
