作前端 2 年就這麼強 - 7～9 月面試經歷總結

做者：LaamGinghong，原文連接：https://juejin.im/post/6876327630212169735前端

背景：本科畢業於宇宙工業大學計算機專業，2年前端開發經驗，分別就任於廣州、深圳的兩家小廠各一年。今年 7 月底裸辭回家準備 2 個月，中間大大小小面了十幾二十家公司，最終收穫了不錯的 offer。node

前言

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

同時，在個人職業規劃中，我是比較但願可以在職業生涯前期可以進入大廠（無論是否是一線）工做，大廠提供的資源以及大廠自己的業務遠遠不是小廠可以媲美的，可以加入大廠對我之後的職業規劃會有很是多的幫助。同時，若是我今年選擇加入一家小廠，同時我仍保留 3 年內加入大廠的想法的話，那我明年就又要再次跳槽，算上今年至關於職業生涯前三年一年一跳，這在 hr 面的時候是一個很是大的減分項。git

同時，我再次提醒各位：不到最後時刻，千萬不要選擇裸辭。由於一旦你選擇了裸辭，那麼你將失去你的經濟來源，短期內還好，可是一旦經歷比較長的面試流程的時候（好比騰訊動輒一個多月的面試流程），整我的的精神壓力是很是大的，同時裸辭若是理由不充分的話，在 hr 面的時候也會是一個減分項。程序員

截止到目前爲止，個人全部流程大概以下：github

大廠：

深圳shopee（finance）：offer；
金山辦公軟件（wps+）：offer；
獵豹移動：offer；
騰訊教育（IM Web）：三面掛，但不知道爲啥簡歷還在流程中；
字節跳動（深圳飛書）：二面掛；
富途證券（架構組）：三面，被我推了；
深圳百度（安所有）：hr 面，被我推了；
中信信用卡研發中心：三面，被放了飛機，恰好不想去了；
cvte（ES-Web）：一面技術面過了，hr面掛了。

小廠：

深圳兔展：offer；
明源雲：offer；
銥雲科技：offer。

大綱

整篇文章不會列出以上全部我面過的公司的面試題出來，由於面試過程大部分問的問題都緊貼簡歷上的項目經歷，因此不少問的問題並無廣泛參考價值，我會將我在面試中常常遇到的一些問題羅列出來，並給出我心目中認爲是比較好的答案供你們參考。web

固然，我相信仍是有不少人想去看個人完整面試題，我已經通通整理出來，存放在 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 的熟練程度。

大廠裏面，有兩題我是印象比較深入的：

實現一個 ts 的工具函數 GetOnlyFnProps<T> ，提取泛型類型 T 中字段類型是函數的工具函數，其中 T 屬於一個對象。

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]
}

實現一個 ts 的工具函數 UnGenericPromise<T> ，提取 Promise 中的泛型類型

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

點個『在看』支持下

本文分享自微信公衆號 - 前端技術江湖（bigerfe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。