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