2 年前端 7~9 月面試經(jīng)歷總結(jié)

作者：LaamGinghong，原文鏈接：https://juejin.im/post/6876327630212169735

背景：本科畢業(yè)于宇宙工業(yè)大學(xué)計算機專業(yè)，2年前端開發(fā)經(jīng)驗，分別就職于廣州、深圳的兩家小廠各一年。今年 7 月底裸辭回家準備 2 個月，中間大大小小面了十幾二十家公司，最終收獲了不錯的 offer。

前言

7 月底因為我在深圳租的房子剛好到期了，再加上中間有一些工作上以及非工作上不順心的事情，所以打算直接裸辭回家準備。

同時，在我的職業(yè)規(guī)劃中，我是比較希望能夠在職業(yè)生涯前期能夠進入大廠（不管是不是一線）工作，大廠提供的資源以及大廠本身的業(yè)務(wù)遠遠不是小廠能夠媲美的，能夠加入大廠對我以后的職業(yè)規(guī)劃會有非常多的幫助。同時，如果我今年選擇加入一家小廠，同時我仍保留 3 年內(nèi)加入大廠的想法的話，那我明年就又要再次跳槽，算上今年相當于職業(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)常遇到的一些問題羅列出來，并給出我心目中認為是比較好的答案供大家參考。

當然，我相信還是有很多人想去看我的完整面試題，我已經(jīng)統(tǒng)統(tǒng)整理出來，存放在 i-want-offer / FE-Interview-questions[1] 這個倉庫里面，里面包含了我在整個準備過程中收集到的一些前端面試知識點，以及我自己經(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 語法的資料這里不詳細贅述，可以去倉庫里面找對應(yīng)的資料。

關(guān)于 事件循環(huán)（Event Loop） ，大小廠的問法是不同的。

小廠通常會直接讓你口述事件循環(huá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 到頁面展示 雖然是一個老生常談的問題，但是我認為這個問題基本涵蓋了整個前端的所有基礎(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)上自己查，都是非常基礎(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ù)棧和他們相一致，那么他們問的基本和大廠差不多；如果不相符，那就完全看面試官是否了解你當前的技術(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 ，提取泛型類型 T 中字段類型是函數(shù)的工具函數(shù)，其中 T 屬于一個對象。

type?GetOnlyFnKeysextends?object>?=?{
?[Key?in?keyof?T]:?T[K]?extends?Function???K?:?never
}

type?GetOnlyFnPropsextends?object>?=?{
?[K?in?GetOnlyFnKeys]:?T[K]
}

1. 實現(xiàn)一個 ts 的工具函數(shù) UnGenericPromise ，提取 Promise 中的泛型類型

type?UnGenericPromiseextends?Promise<any>>?=?T?extends?Promise???U?:?never

項目經(jīng)歷

項目經(jīng)歷千人千面，我的項目經(jīng)歷對于大多數(shù)人來說都不太有參考價值。

但是整個面試過程，對于整個項目的講述其實是可以抽取出來，組合成一套公式來敘述：

1. 項目的背景是什么；
2. 當前項目的目的是什么；
3. 在開發(fā)過程中，你的角色是什么；
4. 在開發(fā)過程中有遇到過什么樣的難題；
5. 遇到這些問題，你都是如何進行解決的；
6. 項目完成之后，取得了哪些成果；

這套公式基本上可以完整地講清楚你參與的項目的整個過程，也有利于面試官去發(fā)掘你項目中的閃光點，便于面試官在你的敘述中找到可以深挖去問你的問題。

同時，在你準備寫上簡歷的項目中，你最好自己能夠自己過一遍上面的流程，這樣有利于你找到你可能還沒有掌握的知識，進行查缺補漏。

算法

我相信大多數(shù)人對于大廠面試的恐懼感主要來自于對算法的恐懼，因為在網(wǎng)上流傳出來的各種面試題都包含了很多在 leetcode 中難度為 mid 以上的算法題。我本身也是一樣，尤其是在我面字節(jié)跳動的時候，整個面試過程我都非常緊張，覺得字節(jié)的算法題會很難，很可能做不出來。但做完之后，其實也還好，難度基本控制在 leetcode mid 以下的級別，甚至我面的好幾家大廠過程中都沒有涉及算法。但是，我覺得作為一個程序員，算法水平一定程度上代表著你程序設(shè)計的好壞，所以提高自己的算法水平對于開發(fā)出高水平 Web 應(yīng)用是有非常好的幫助的。

我在準備算法的時候，最開始比較盲目的刷 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ǔ)有了一定的鞏固。

做算法的時候我自己有一個竅門：遇到一個問題，先嘗試用最暴力的方法進行解決，然后分析出暴力方法會有什么樣的問題，然后再去解決遇到的問題。這個方法對于大部分我遇到的算法問題來說，基本上都可以解決問題。

各大廠面試特點

因為今年的特殊原因，所以基本所有公司都會采用遠程面試的方式來進行面試。

在我整個面試過程中，其實各大廠的面試風(fēng)格也是略有不同的，下面我一一細說。

CVTE

據(jù)我了解，CVTE 是會有很多輪 hr 面，基本上可以說是每一輪技術(shù)面試之后都會有一輪 hr 面來評估你。我當時一面的技術(shù)面已經(jīng)過了，但是一面 hr 面沒過，hr 面問的問題也比較尖銳，不過技術(shù)面難度還好，基本按照我上面的模版一套組合拳下來也能答出個七七八八。

CVTE 的一面沒有涉及到算法題，后續(xù)的面試我就不是很清楚了。

中信信用卡中心

一面是前端面的，二面是后端面的，所以只有一面問了前端的知識問題，二面就是單純打電話聊天，主要是聊了一些開發(fā)流程上面的問題，過程非常快非常輕松，全程只有一題算法題，也出現(xiàn)在我上面整理的算法題庫里面。

百度

百度的技術(shù)面總共有4輪，基礎(chǔ)面（同級別員工）+基礎(chǔ)面（級別應(yīng)該比你要一點）+leader面（整個研發(fā)部門的技術(shù)負責(zé)人）+boss面（整個研發(fā)部門的總負責(zé)人）

百度一面是需要你當場完成一套筆試題，難度的話也一般，基本上面的知識點你都過一遍問題不大，也有一題算法題，是百度的原創(chuàng)題目，但是題型是一樣的，問題也不大。前兩面都是前端開發(fā)面的，沒啥難度，涉及到的知識點不局限于前端吧，還包括網(wǎng)絡(luò)以及開發(fā)模式等等問題。

leader面還挺有意思的，當時他們強烈要求我到現(xiàn)場去參與面試，leader 是一個很年輕的小伙，因為不是專職前端，所以問的問題涉及到了整個計算機的所有知識點：數(shù)據(jù)結(jié)構(gòu)、算法（原創(chuàng)題，一個很簡單的遞歸）、操作系統(tǒng)，以及問你除了 js 以外還掌握什么語言等等，整個過程非常輕松，也非常愉快，大家都有說有笑。

boss 面氣氛就比較嚴肅了，也可能是因為那個會議室空調(diào)有點冷的原因。基本上整個面試都是在讓我吹水，講自己的項目經(jīng)歷，以及解決的辦法，答題模版也基本可以按照上面的來說，最后也通過了。

富途證券

富途證券是我面試到目前為止，面試時間最長的公司，每一輪面試都基本恰好一個半小時，不知道是不是有硬性規(guī)定，所以在面試的時候要預(yù)留好時間。

由于富途我只經(jīng)歷了兩面，所以整個二面之后是怎樣的流程我也不是特別清楚，但是互聯(lián)網(wǎng)公司大都大同小異。

一面面試官是做前端的，問的非常細，不僅僅需要口述一些前端的基礎(chǔ)知識，還會有一些筆試題讓你完成，最后還有一道算法題，不過算法題沒讓我動手寫，只是讓我說出實現(xiàn)思路就讓我過了。

二面面試官似乎是我面試的那個組的開發(fā)負責(zé)人，所以整個過程沒有涉及到任何和前端知識相關(guān)的，一開始也是對項目進行吹水，后來之后給了 4 題筆試題，包含算法在內(nèi)，難度的話大概是 leetcode mid 的水平，做過的話也就還好。

金山軟件

金山軟件的面試題我覺得比較有水平，全程沒有涉及到算法，一面的時候是一些很基本的前端問題，背過的話通過非常輕松。二面的話是有兩個面試官，其中一個是整個研發(fā)部門前端的leader，一開始可能會先問一些框架上面的知識，看下你對于框架的理解。然后會從實際開發(fā)角度出發(fā)，給出了幾道場景題，讓你去設(shè)計，非常考驗一個人的開發(fā)熟練度，更容易能夠通過這種方式找到熟練的前端開發(fā)。至于三面的話，就是全程在吹水了，還是按照上面項目的吹水公式吹水，整體也非常輕松。

騰訊

騰訊的面試風(fēng)格和金山特別像，但是他問的基礎(chǔ)題會更加復(fù)雜一些，不會單純讓你說一些只是要靠背的沒啥用的 API，通常會通過一些手撕代碼的形式來進行考驗。然后每一面都會問你項目的一些情況，問的問題基本也差不多，所以準備一下基本都沒啥問題。

但值得注意的一點是，問項目的時候，千萬不要被面試官得到主導(dǎo)權(quán)，回答的時候一定要自信，千萬不要被面試官牽著鼻子走。我在三面的時候，因為是第一次三面，沒啥經(jīng)驗，非常緊張，被面試官牽著鼻子走，因為這次面的是 c 端的部門，面試官可能沒有理解 c 端和 b 端之間的差異，用 c 端的思維去審視我 b 端的項目，導(dǎo)致整個面試過程我的表現(xiàn)都非常差。所以在面試時，一旦你發(fā)現(xiàn)面試官問的問題不太對勁的時候，一定要及時說出來。

字節(jié)跳動

字節(jié)跳動的問題問的非常細，在我參與的兩輪面試中，都是在問一些非常基礎(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ù)水平。

后記

在我準備面試的過程中，我通過閱讀了很多掘金等網(wǎng)上的文章，收獲了非常多以前不懂的知識，在這里非常感謝：

• LinDaiDai_霖呆呆[10] 大佬，他寫的幾篇文章，都讓我獲益匪淺；
• luciferzero[11] 大佬，他的 前端算法渣的救贖之路[12] 在算法上對我?guī)椭浅４螅?/li>
• 冴羽[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

??愛心三連擊

1.看到這里了就點個在看支持下吧，你的「點贊，在看」是我創(chuàng)作的動力。

2.關(guān)注公眾號程序員成長指北，回復(fù)「1」加入Node進階交流群！「在這里有好多 Node 開發(fā)者，會討論 Node 知識，互相學(xué)習(xí)」！

3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持