一年半經驗前端社招7家大廠&獨角獸全過經歷 | 掘金技術徵文

時間 2020-04-26

原文原文鏈接

前言

在鵝廠也呆了一年多了，業務通常，主要是太忙，沒有時間喘氣，沒有時間規劃人生。但願能換個更輕鬆的工做，因此出來看機會了。我的選擇的原則：至少知足工做生活平衡（硬性條件）、付出收益平衡、業務將來可觀html

此次近3個星期，面了7家（拼多多、字節跳動、蝦皮、做業幫、猿輔導、商湯科技、快手），全都是線上視頻面試的，通常是晚上回家面試或者週末。過程仍是挺順利的，全都過了。時間很緊湊，幾乎沒什麼時間準備和覆盤，一環接着一環的，因此就所有湊到一塊兒一次性總結了前端

下面的面試題，會給出一些參考思路，也會標明每一題的性質，以下：vue

描述：對概念、過程的描述，純理論性問答題爲主
舉例：說出應用場景，或者是本身團隊實踐的狀況
僞代碼：寫代碼，但不須要跑起來，能夠隨便寫，主要目的是描述思路
編程：真正的寫代碼，須要跑起來，有測試用例，要看到效果

拼多多

公司面試難度評估：✭✭✭✩✩node

1面

pdd用的是他們本身家的面試系統，該有的功能都有，和牛客相似，web-ide體驗稍微差一些。react

react16新生命週期，有什麼變化【描述】

兩個static、一個didcatch捕獲錯誤的、一個getsnapshotnginx

react16以前的那些很差的生命週期怎麼過分到react16的新生命週期【描述】【舉例】

getDriverStateFromProps替代componentWillReceiveProps，加上邏輯對比上次state和props來決定state。willupdate換成getSnapshotBeforeUpdate，willmount直接寫成初始state（react16的state不先寫出來是null，你須要先在class組件裏面寫一下state = {...}）git

componentWillReceiveProps用到了this，getDriverStateFromProps也要用，怎麼辦【僞代碼】

把this.xxx存到state裏面，第二個參數是state，裏面有xxx（有點挫，懂的人應該都有一樣的感覺吧，若是是函數組件，一個useRef保存一下便可）。另外的方法，若是和內部變量無關，把它摳到class組件外面去es6

編程題：求最大公共前綴，如['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'(ide沒有調試功能，也不能打開控制檯，我只能寫好了讓面試官去運行。無調試，靠想象)【編程】web
編程題：求最大公共路徑前綴，['aa/bb/sd', 'aa/bb/wwewer', 'aa/bb/ddfff'] => 'aa/bb'(無調試，靠想象)【編程】接上題改一下，不用一分鐘便可解決面試
怎麼理解ts【描述】

類型檢查、ide友好提示、文檔、利於維護

ts的type和interface什麼區別【描述】

經典問題，網上可搜，主要是列舉出二者的特色，對比一下

ssr怎麼實現，大家怎麼作【描述】【舉例】

將動態渲染邏輯作到後端去，並把最終html結果直接返回。咱們這邊是數據動靜分離+部分ssr直出，重要的數據ssr，比較慢的接口仍是放前端

大家有沒有統一構建的cli，怎麼實現【描述】【舉例】

基於react全家桶，ts、eslint、埋點上報、sw均可配置，根據配置生成代碼模版，開箱即用

大家項目有ci嗎，怎麼作，提交的時候會作什麼事情【描述】【舉例】

經過接入公司內部某ci，配置yaml文件，每次監聽git hook，並做出對應的行爲如安裝、lint、部署、搬運、生成change log等等。提交的時候，檢查lint、修復autofixable的問題，存在修不了的問題報錯，提交失敗

e2e測試、自動化測試【描述】

概念性問題，網上容易搜到。端對端測試，模擬用戶行爲對網頁進行全流程測試；自動化測試，包含不少了，範圍更高一個維度

git rebase什麼做用【描述】

概念性問題

一面的面試官很友好，雖然戴口罩，但也能夠感受到滿滿的笑容。面試過程當中，個人問題還沒問夠，他說你能夠問2面面試官

2面

面試官說系統有問題，開不了攝像頭，因而加了微信，微信電話+系統在線寫代碼結合。不得不說，pdd這個系統很嚴格，我拖一下窗口就說做弊警告，而後接了一下面試官微信電話又做弊警告，面試官說問題不大，不慌。面試官很嚴格，全程一本正經，雖然沒看見人，但強大的氣場讓我有一點心涼的感受

項目介紹【描述】
項目難點【描述】【舉例】

必定要拿出最熟悉最自信最能體現本身的項目，這一塊是肯定面試表現的關鍵環節。面試中這裏能夠問個半小時以上。包裝假項目的、吹牛的，到這裏基本就能夠區分出來了。還有項目比較淺的，到這裏若是進入尬聊或者冷場，極可能就掛了的。反正我是能夠保證本身掌控主動權的，讓面試官跟我思路走

實現一個redux【編程】

仍是那10幾行經典redux，途中會順便問一下函數式編程、純函數、反作用這些，網上搜「函數式編程」便可知道這些概念了

若是是用ts寫，怎麼寫【編程】

改爲ts版本，若是比較熟悉redux+ts的，很快寫出來。若是不太熟，熟悉泛型也能夠根據表現，很快寫出近似的。我說我沒有ide提示，不能保證裸寫沒問題。面試官說沒事，只是看看你ts熟悉程度

小結

pdd錢給的不少，算是top水平的了，base低的能夠去pdd搞一波，快速提高base和pkg。可是pdd單休，平時加班很晚，項目節奏很快很緊湊，因此仍是看我的取捨吧。

字節跳動

公司面試難度評估：✭✭✭✭✭

1面

面試官以前也是騰訊的，面試過程像聊天同樣，互相交流技術，後面也扯了一些在騰訊的舊事

項目難點【描述】
如何設計權限系統，如何維護和定義、表的數據結構是怎樣的【舉例】【描述】

咱們的項目是rbac1類型的權限系統。展現是樹形結構，但權限是扁平化的，只須要勾選權限，能夠達到靈活修改權限。好比角色includes權限[1, 2, 3]，某操做須要權限1，只須要判斷1是否在角色全部的權限數組裏面便可

中間人劫持，怎麼防止。x-frame-option?白屏的喔，怎麼辦？也不必定嵌入iframe啊，能夠嵌入腳本、圖片，怎麼阻止【描述】

x-frame-option、重定向、https，請求前加密（https、加密代理）、請求中規避（請求拆包）、請求後彌補（前端作一些邏輯）。嵌入非iframe的，若是已經突破了前面兩關，走前端邏輯：觸發DOMNodeInserted、DOMContentLoaded、DOMAttrModified事件。或者是給能src的標籤加上本身的data-xx屬性標記區分

class組件和function組件對比。寫過安卓嗎，那對class組件有什麼見解【描述】

各自特色對比羅列一下。我也不知道有什麼很好的，問題都放在這裏，說明對方傾向於class組件的，因此必定不能說太多class組件很差，吹捧hook

hook缺點，hook代碼難維護怎麼解決【描述】

這種開放性和經驗積累的題目真的是最難的，平時你們知道標準答案的題目和這種對比起來，沒得比的。這個須要團隊的積累，咱們這邊暫時沒什麼很大問題，因此感覺不到。最基本的，eslint必定要開啓，否則會莫名其妙的dep致使更新。其次是根據狀況來講一下，function的場景。經驗之談，這裏能夠講一篇文章

redux爲何每次reducer要返回一個新對象，面對大量節點如何優化【描述】

新的props致使更新。大量節點使用immutable

immuatable和shouldupdate配合、immuatable數據一些對比問題【描述】

這是黃金搭配的方案了，用過的人應該能理解到。中途還問幾個看代碼判斷 === 是不是true的問答題，原則：只要一個節點變了，那麼從他開始回溯的全部的父節點全都是新的

http緩存、離線包原理、移動端首屏幕加載速度優化【描述】

http緩存很基礎的了，送分題。關鍵詞：強制緩存、協商緩存、304。離線包是騰訊內部app的一種優化方案，將文件緩存到本地，顧名思義離線包。每隔一段時間有拉取新版本機制，會對比一波看看要不要更新。移動端首屏幕加載速度優化：客戶端通常就是webview冷啓動、預熱，內嵌web就不少了，盡力輸出吧，ssr、緩存、請求拆分、預加載（對於我來講，全部的優化無非就是緩存、提早拉、分開拉、跳過複雜鏈路這些手段的變種）

一個很牛逼不少功能的class組件，裏面有業務生命週期（獲取數據先後、彈出窗口先後...），怎麼在函數組件裏面直接複用它【舉例】

先注入到函數組件的props，再到useeffect關鍵節點裏面執行業務生命週期

給定一個整數數組 a，其中1 ≤ a[i] ≤ n （n爲數組長度）, 其中有些元素出現兩次而其餘元素出現一次。【編程】找到全部出現兩次的元素。你能夠不用到任何額外空間並在O(n)時間複雜度內解決這個問題嗎？(限時5分鐘) 輸入: [4,3,2,7,8,2,3,1] 輸出: [2,3]

這種題，其實看見不用空間、o(n)時間，一般潛臺詞就是，用原地哈希來作。作過這題的確定是秒殺，沒作過的慌得一逼，我當時就是沒作過的。遍歷的時候把數字放到index下（好比數字4放在數組的第4個位置），若是發現後面的數的n,arr[n]已經知足了arr[n] === n那就結果算一個。lc標準答案：和我交換位置不同，lc的是讓那個數變成負數，若是後面發現arr[n]是負數那就算一個，比個人交換index簡單不少

一面的面試官很友好，雖然戴口罩，但也能夠感受到滿滿的笑容。面試過程當中，個人問題還沒問夠，他說你能夠問2面面試官

2面

收穫很大，瞭解到了一些很強的技術和全球化相關的技術。途中暴露了一些計算機基礎不行的缺點了，面試官也給了我一些提示才答出來。由於我非科班出身，因此計算機基礎方面就明顯不行了，他也建議我回去補一下

cdn原理【描述】

概念性問題。在先後端之間增長的一層緩存層，經過接管DNS實現，將用戶的請求轉到緩存層上得到源服務器的數據，所以達到優化目的

爲何多域名部署【描述】

http1和瀏覽器的緣由，同一時間同一個域名最多6個鏈接

單元測試、e2e測試【描述】

概念性問題，容易baidu、Google到。高頻考點

event loop【描述】

高頻考點&送分題。瀏覽器和node的都分別說一下，列出什麼是宏任務什麼是微任務

項目介紹一下【描述】
客戶端mock怎麼支持【描述】【舉例】

客戶端 => 協議轉換服務 => 中轉服務 => mock服務（接入mockjs）

怎麼mock真數據，我須要真的id怎麼辦，除了寫死【描述】

反向抓包，無需本身填充數據。或者全鏈路監控裏面撈出一個id

什麼狀況用ts、何時不用【描述】

公共組件、庫必定要，不重要的業務代碼、節奏快的業務代碼不用

單元測試和ts結合【描述】【舉例】

有ts的話，輸入參數很容易能夠知道有沒有問題

全球遠程調度機器實現自動化測試【描述】

請求 => 分發 => 海外機器 => 調起當地機器 => 自動化腳本(如puppeteer) => 跑ui流程 => 上報結果 => 系統展現

cjs實現esm【僞代碼】

// esm

export const a = "test";

export default function(){

    console.log(123)

}

// cjs實現的esm

Object.defineProperty(exports, "__esModule", {

    value: true

});

exports.default = function () {

    console.log(123);

};

var a = exports.a = "test";
複製代碼

3面

是北京那邊的人面的，感受到很老練的氣質，氣場很強

項目介紹。權限系統業界內怎麼設計，常見的幾種【描述】

rbac0～三、前端簡單判斷、後端按需返回。這裏能夠講好久，分別舉例和說明他們的特色

工做量體現到什麼地方，如今工做量大嗎【描述】

重構、樹結構組件、各平臺數據適配、技術輪子的推廣

最困難的環節【舉例】

一個能光速開發內部系統的公共組件設計、推廣本身作的平臺給公司其餘團隊用

優勢缺點、將來規劃
怕被人挑戰嗎，怎麼應對【描述】

我的是有點慫，事情沒作到150%或者200%不敢拿出去交付。但作到150%的時候，面對別人挑戰也是遊刃有餘

加面

hr後加了一面。很親切，以前也是騰訊的，在二、3面被虐和巨大壓力後，加面忽然像是如沐春風的感受，很輕鬆愜意

通過前面對了解，你知道咱們這邊作什麼了嗎，描述一下【描述】

身爲問題少年，前面瞭解足夠多了。每次面試結束我問的問題會不少，涉及到技術、團隊、業務、公司方向、還有一些閒聊八卦...

咱們的技術棧差很少，若是你來上班，如何快速過渡和上手適應【描述】

內部系統 => todev系統，針對人羣不同，技術棧相似，容易解決。

對b和c端業務對理解【描述】

簡單來講，b端ui要求低、架構複雜；c端ui要求高、架構簡單。詳細的點，引伸出去還有不少不少

tob業務架構設計、技術選型【舉例】

先出結構圖、流程圖，再給出表結構設計，肯定了方案，組件、模塊劃分。技術選型通常就是三大框架+配套的標準ui了，如vue與ele-ui，react與antd，加上狀態管理、路由等。若是複雜的混雜多項目多系統，使用微前端，spa或者iframe兩種取其一，若是沒有歷史包袱可選spa、若是有歷史包袱使用iframe嵌入，但須要和其餘前端進行對協議（前端和前端聯調😊）這裏能夠講20分鐘

項目開發流程、生命週期【舉例】

按照平時的項目流程講了一通

自動化測試設計思路【描述】

用例、斷言、輸出結果

小結

18年校招的時候我也面過了，可是最後沒選擇字節跳動。兩次面試，面試體驗很好，收穫很大。可是他們流程過快，若是說但願去字節跳動的，建議放最後，由於其餘公司都很慢，你等不了其餘公司的offer來argue了。其次，面多幾家你底氣和經驗會更充足，狀態更好，那個時候再過來和字節剛一波。

蝦皮

公司面試難度評估：✭✭✭✩✩

1面

項目突出點，挖項目細節問題【描述】
各類狀況下的proto指向，多道問答題【描述】有一個class A {},問他的實例a的__proto__和A.prototype的關係，a.__proto__.__proto__是什麼，a.__proto__.__proto__.__proto__是什麼。而後再問普通對象、function的。這裏須要注意一下Function.prototype === Function.__proto__和a的三次proto是null。一開始就問三次取a的proto，其實潛意識是null的，但剛剛下班趕車回家，心跳都沒有恢復正常就進入面試，沒什麼狀態，「em～」了10秒鐘，面試官說：哎，你別打開控制檯喔，別偷偷的運行哦。我說這確定是原型鏈終點了，我想一想，確認一下——null！猶豫就會敗北，開門一波丟臉
頁面10張img，http1是怎樣的加載表現，怎麼解決。那多域名又爲何能夠解決呢【描述】這個是重點問題之一，http1下，瀏覽器對一個域名下最大tcp鏈接數爲6，因此10張圖片表現爲6+4。因此能夠用多域名部署解決。5個a域名，5個b域名就能夠實現一瞬間所有出來了(或者6個a，4個b，融會貫通)。若是是1個a域名，9個多域名，會表現爲(6 + 1) + 3
http緩存是怎樣的。etag和last modify分別什麼優勢缺點，適合什麼場景【描述】【舉例】緩存、304基本問題。etag適合重要量小的資源，last modify適合不重要的量大的資源。注意last modify須要保證服務器時間準確
接上題，10張img，http2是怎樣表現【描述】一瞬間所有
http2爲何快，多了什麼特性，頭部壓縮算法是怎樣【描述】背書，搜http2答案都有了。頭部壓縮是HPACK算法
react性能優化【描述】【舉例】 scu生命週期、memo；usememo & usecallback記住一些值不用從新計算；虛擬列表；immutable+scu/memo；原生js；（這塊聊了好久了）
長列表優化，多種方案及對比【舉例】虛擬列表、intersectionobserver、監聽滾動長列表+raf（經驗之談，聊了好久）
diff算法、key做用，不要key會怎樣【描述】樹diff、組件diff、元素diff；key能夠原地複用，沒有key無腦會更新（此時你能夠發現，index作key其實會形同虛設）
react的usememo原理【描述】閉包、緩存、memorize
編程題：對象扁平化【編程】(30min)

{
  "a": {
    "b": {
      "c": {
        "d": 1
      }
    }
  },
  "aa": 2,
  "c": [
    1,
    2
  ]
} =>
{ 'a.b.c.d': 1, aa: 2, 'c[0]': 1, 'c[1]': 2 }
複製代碼

我一聽到30分鐘，內心暗暗的想，給30分鐘是否是以爲我很菜啊。無論他，先擼爲敬。reduce遞歸+ ...，寫+debug總共4分鐘就秒殺了，面試官說你怎麼不寫了，我說已經ok了。他看了一下，嗯，ok

主要是一開始問proto冷場了10秒，這麼基礎的題都猶豫了，有點丟臉了，還好後面力挽狂瀾把局面拉回來了。後面由於提早作完題目，和麪試官聊了好久其餘事情了，業務、技術、團隊、公司方向之類的，到了7點了，他說後面其餘的你問hr吧(潛臺詞:你過了)。總的來講，面試官是那種逗比類型的，面試過程當中和一我的閒聊同樣，有說有笑，挺爽的

2面

項目相關，細問【描述】【舉例】

這裏仍是問項目。對方之前也是騰訊的，咱們也聊了不少騰訊內部相關的事情，挺多共同話題的

若是我接入你作的平臺，怎麼接入【舉例】項目繼續挖。咱們互相之間說了不少騰訊人特有黑話，拉近感情
jsbridge瞭解麼，說一下【舉例】沒作過，就我以前作少許內嵌webview的經驗，我猜一下吧，大概就是兩種：注入全局方法通訊、監聽url協議(如abc://，而後觸發請求的地方能夠作攔截如img、iframe、xhr、fetch等)。回去查了一下，發現我猜的的確是差很少，只是專業名詞沒到位，口頭話不少
addeventlistener第三個參數做用【描述】【舉例】控制冒泡/捕獲階段執行。或者是一個對象{ passive: true }，針對的是Safari的，禁止/開啓使用滾動的時候要用到
cjs和esm區別【描述】概念性問題
爲何瀏覽器不用cjs而用了esm【舉例】我的觀點類問題。cjs都是require系統本地文件，時間不用考慮。若是在瀏覽器使用相似cjs的require，實現過程無非就是建立script標籤、發請求。這個發請求的過程就沒法保證同步了，你要寫成callback/promise/async-await，這樣子寫頁面門檻又高了
es6瞭解不，說一下let、const的暫時性死區【描述】概念性問題。沒變量提高了，提早用會報錯
set、map有什麼好處，map和通常的對象有什麼不同【描述】概念性問題。map能夠用複雜數據類型作key
跨端的方案【描述】內嵌webview、客戶端內嵌js引擎、將js編譯爲客戶端語言運行
編程題：字符串相乘【編程】實際上你能夠理解爲大數相乘。整體很快寫出來，可是本身debug的時候，花了很長很長時間，由於在debug的時候console了一下index，發現index竟然錯位，瘋狂懷疑人生，尷尬。最終找到了緣由（啼笑皆非）——每次面試牛客網編輯器有一個console.log('hello world')的，我通常不會刪掉。此次我竟然刪了，致使什麼現象呢，就是這樣：

輸出結果: 0
1
複製代碼

而我指望的是

輸出結果: 
0
1
複製代碼

若是你不刪掉系統默認的一句hello world，用的時候0在第二行開始，不會以爲有什麼問題

輸出結果: hello world
0
1
複製代碼

忽然刪掉console.log('hello world')，目光直接到第二行，第一個index是1！那種心情。。。寫代碼幾分鐘，傻乎乎debug20分鐘。面試官說，看你coding挺歡樂的，不錯。我說看錯這個console了，害得我白搞那麼久。他說沒事，問題不大

二面面試官，每次我說完一個問題，他都會說「謝謝」，挺有意思的。後面閒聊了好久，到7點了，我說蝦皮下班時間到了，差很少了吧。他說陪你繼續聊聊，沒事的(暗示：你過了)。而後又多聊了20分鐘，最後他再次重複了他們的業務，而後我也問了一下語言、app國際化方案怎麼作，收穫挺大的

小結

蝦皮是畢業一兩年內性價比最高的了，工資高，福利好，天天7點下班，並且在海外電商方面頗有潛力。目前我所看見的蝦皮，在你們口中幾乎是沒有差評的

做業幫

公司面試難度評估：✭✭✩✩✩

1面

一堆看代碼說輸出的題【描述】就是this、變量提高、閉包、event loop說輸出的那些基礎題。這些必須秒答出來且答對，基礎必定不能有差錯。到了這個階段，這些題應該是送溫暖的
項目介紹【描述】
cache-loader有什麼坑，緩存錯誤怎麼解決【描述】【舉例】面試官提到，他們作一個可視化編輯頁面的系統，對組件使用了cache-loader，開發中有時候出現緩存錯誤的文件的問題。他說他們遇到了這個問題，暫時沒有解決，叫我猜測一下，多是什麼緣由致使的。我說應該是開發過程當中，修改了被引用模塊/引用模塊、或者切換git分支，須要本身刪除掉node_modules/.cache或者重啓dev server。
編程題，9選3（15min）【編程】

實現bind(送分)
防抖&節流(送分)
settimeout實現interval(注意和普通的要無差異體驗)

;(() => {
  const list = new Set();
  function myInterval(fn, ms) {
    const ref = {};
    const exec = () => {
      return setTimeout(() => {
        fn.apply(null);
        const timer = exec();
        ref.current = timer;
      }, ms);
    };
    ref.current = exec();
    list.add(ref);
    return ref;
  }

  function myClearInterval(ref) {
    clearTimeout(ref.current);
    list.delete(ref);
  }
  window.myInterval = myInterval;
  window.myClearInterval = myClearInterval;
})()
複製代碼

字符串大小寫反轉(送分) 節點是否是屬於某個節點下(當時我寫了一個不帶parentid的版本，要本身一層層搜。若是帶parentid的，就簡單不少了，測試用例你本身寫，他們也沒有給出)
反轉鏈表(常規題)
合併數組['a', 'b'], [1, 2, 3] => ['a', 1, 'b', 2, 3] (送分)
合併有序數組 [1, 5], [2, 5, 6, 8] => [1, 2, 5, 5, 6, 8] (常規題，並且比合並有序鏈表還要簡單一些)
一堆數字字符串組成最大數是多少[50, 2, 5, 9] => 95502 (字典序+貪心)

function getMaxNumber(arr) {
  return arr.sort().reduce((acc = '', cur) => Math.max(+`${acc}${cur}`, +`${cur}${acc}`));
}
複製代碼

都屬於比較簡單的且經典的，能夠看成練練手。絕不誇張的說，實現interval和最後一題稍微能扛多一陣，其餘的那些經典的題，若是你們平時瞭解過的均可以秒殺的。

編程題說9選3，可是做爲有追求的人，除了面試過了拿offer，還應該追求高評價，拿到更多的薪水和更高的定級。那麼，15分鐘內甚至10分鐘內，把它們所有寫了吧。平均每題不用1分鐘，單鏈表和判斷節點祖先花了一點時間寫測試用例。我是從最後一題開始倒着作的，面試官看着都呵呵笑了，說繼續幹，有時間就繼續，能夠能夠！最後口頭問了一下如何判斷鏈表有沒有環，我說快慢指針。

2面

說項目，深挖【描述】
react生命週期和diff算法【描述】新的、舊的，hook替代的。樹、組件、列表三種diff(故意引話題，等他問key)
key的做用【描述】複用元素，描述一下有key的列表diff過程(果真問了key)
內部系統配置頁面不寫或少寫代碼的實現思路【描述】【舉例】新建頁面 => 設置配置、db => 新頁面onload => 拉配置，根據db的字段和配置渲染表格 => 配置不能知足的使用裝飾器劫持實現個性化 => 業務代碼&框架代碼分離(微前端架構)
多框架、歷史頁面怎麼解決【舉例】舊頁面iframe、新頁面走上面的流程，多框架使用external + 動態引入

後面我問問題的時候，發現他們的基礎設施、開發流程有一些能夠優化的地方，我說了一些本身的見解，面試官挺開心的樣子，說回去看一下

小結

此次社招面試中最簡單的一家了，全程很輕鬆，而且掌握了主動權把控面試節奏。cache-loader有什麼坑，緩存錯誤怎麼解決，這個問題我也沒遇到過，面試的回答只是根據做用來猜測的，路過的有人知道或者遇到的話能夠分享一下。

猿輔導

公司面試難度評估：✭✭✭✭✭

1面

react生命週期介紹，怎麼執行。說一下下面的組件生命週期執行順序【描述】有<A> <B /> </A>這樣的組件：

a.willMount 3
b.willMount 1
a.didMount 4
b.didMount 2
複製代碼

react16前是遞歸的，是這個順序。react16後改爲fiber架構，是反過來的了，沒有像棧那樣fifo

redux vs context，爲何不用context【描述】隨意修改，莫名其妙的bug。redux將這個過程規範化，單向數據流
react 17要作什麼規劃，concurrent mode【描述】 concurrent mode、去掉危險的生命週期。concurrent mode是react重點面試題了，基於requestidlecallback實現(考慮兼容性，官方本身實現了一個)——瀏覽器空閒的時候作事情
SSR，打開大家的SSR頁面看看，具體邏輯、實現方式【描述】發了一個咱們的連接給他，並描述了流程
promise.then(f1, f2)``和promise.then(f1).catch(f2)區別【描述】捕獲所有上游和捕獲本次then
() => {} vs function () {}【描述】送分。無argument、this是定義那一層、箭頭能夠指向返回值
說輸出【描述】

const obj = {
  f1: () => console.log(this),
  f2() { console.log(this) },
};
obj.f1() // global
obj.f2() // obj
new obj.f1; // instance
new obj.f2; // instance
複製代碼

Map/Set、WeakMap，什麼做用【描述】 map能夠用對象作key，set作集合使用。WeakMap弱引用，防止內存泄露
用setTimeout實現setInterval【編程】

又問到了，頻率有點高

Node { value: number; children: Node[] }，算出樹每一層節點和，輸出數組【編程】

2         => 2

2      3      5  => 10

1   2  3   4   7 8 => 25

// 每一層的和 [2, 10, 25]；
複製代碼

使用bfs可秒殺

1面中規中矩，面試官語速比較慢，聽起來無壓力，很輕鬆。後面問問題發現我作的一些東西和他們的差很少，感受也是無縫銜接。而後瞭解到了公司下班時間也很早，福利也很好

2面

1.節流、和防抖的區別，均勻的節流怎麼實現【編程】

一會兒寫了最簡單的出來，而後他要各類改需求，加功能。要支持配置立刻執行、要防抖節流兩個結合起來、要均勻

http緩存、強制緩存裏面expire和cache-control做用，什麼坑【描述】重點題，頻率很高。expire須要保證時間準確
前端路由實現。history什麼坑，怎麼解決【描述】哈希和history，監聽事件、切換元素。history會致使一些新路徑404，nginx重定向到首頁走js邏輯
var、let、const區別，() => {} vs function () {}【描述】基礎送分題
一副撲克牌，隨機抽 5 張，判斷是不是順子，大小王能夠替代任意牌。【編程】 ['A', '2', '3', 'S', 'B'] => true 先把AJQK映射成數字，而後把大小王S、B換成其餘(我直接用symbol代替了)。排序去掉大小王的數組。遍歷排序後數組，前一個數和後一個數字差距大於1，減小大小王數量來補。臨界條件：前一個數和後一個數字差距大於1且大小王不夠補，return false；成功遍歷全部的元素，return true

（這裏有點尷尬，忘記轉數字類型了，很快寫完了，但一直有問題，傻乎乎的debug，牛客網打印出來的結果也不知道是什麼類型，都是黑色字。後面猜想是類型問題，typeof一看，哦果真是類型問題，加一個+號轉數字，解決）

ES5 實現 B 繼承 A【編程】爲了表現，確定是直接寫寄生組合繼承啦

2面面試官喜歡挖問題繼續問，防抖節流硬生生寫成了一個幾十行的輪子了，不過我挺喜歡這種面試模式，臨時造輪子改需求，隨意天馬行空地發揮，很好玩

3面

項目難點，畫一下架構【舉例】

臨時給了一個在線文檔地址，而後手繪了架構圖

有了解其餘權限系統嗎，對比下【描述】糾結了一陣我作的權限系統到底是rbac幾。前端控制、後端按需返回
http請求的整個過程【描述】經典題url到頁面過程當中的一部分——發請求到響應那段
怎麼知道一個tcp請求數據已經完了呢【描述】

本身知道的，沒有長度了

微博的@的下面出現一個提示怎麼實現(pc上，相似羣裏講話按下@，旁邊有一個名字下拉框的那個功能)。不是editable喔，基於textarea怎麼實現【僞代碼】【描述】一會兒說了editable，他說你看看，他是textarea。接着有兩種方式，隱藏元素+getboundingclientrect和canvas的mesuretext量長度。他後面說量長度不太行，並且很麻煩
怎麼知道客戶端是局域網下哪個ip【描述】客戶端鏈接服務端的時候會攜帶本身的ip，服務器接收
爲何是tcp而不是udp。tcp丟包怎麼辦，怎麼知道丟包，怎麼知道已經重傳成功了【描述】 TCP三次握手保證可靠性，而UDP就沒有了，信息發出後,不驗證是否到達，不可靠。丟包就重傳。有seq，是連續的，若是收到的是不連續，說明中間缺了包；或者是超時了還沒收到。由於有seq吧，因此多一個少一個也是知道的
瞭解http3的quic嗎【描述】 udp快而不可靠，因此衍生quic。對比http2+tcp+tls，quic減小了tcp、tls握手，改進了擁塞控制，前向冗餘糾錯
quic怎麼解決了tcp的問題【描述】使用udp做爲基礎，瞎講一通擁塞控制、前向冗餘糾錯、bbr，所知道的概念都甩出去了
quic用udp怎麼保證了可靠性【描述】用rudp來優化資源的佔用率和響應時間，提升系統的併發能力。seq、超時重傳、fec前向糾錯
quic的udp若是不握手，人家隨便發請求怎麼辦【描述】滑動窗口、bbr 擁塞算法
函數式編程、純函數【描述】

先喘一口氣，終於不問網絡協議了。純函數無反作用，一樣的輸入一樣的輸出。那我在裏面定義變量和函數，裏面作一些事情作一些修改這些變量的操做，還純嗎？同樣的。

狀態管理系統設計，怎麼和函數式編程結合【描述】【舉例】常規react+redux項目舉例
rxjs介紹一下【描述】之前玩過，異步流程控制，流、管道操做符概念
數組和鏈表的區別【描述】數組易讀取，鏈表只能一個個讀或者須要額外空間才能易讀取；數組增刪元素須要照顧index，鏈表不用
數組和鏈表優勢缺點，應用場景【舉例】數組增刪的時候須要維護index，鏈表不須要考慮，但鏈表讀取某一項就比較麻煩。不少狀況下，簡單的列表遍歷用哪一個都同樣。數組的優點在於須要index的時候，隨時讀取某一個。鏈表能夠模擬任何流程，並能夠隨時中斷/繼續，好比react的fiber使用鏈表能夠隨時回到當前狀態

這是部門前端老大了，也是最難的一面了，被虐到狗血淋頭。面試官人挺溫柔的，前面的題答出來的時候也感受很舒暢。後面各類被虐，由於不是科班出身，這些知識細節漏了太多，我只能盡本身所瞭解的都吐出去了，可能說了不少含含糊糊的、沒有系統性的東西，知道什麼和那個點相關的都講了。我看見他在旁邊笑了(感受是"你仍是太年輕了"的那種笑)，突然感受局面很涼，第一次完全的慌了，而後到了完全的崩潰。回去我也默認本身三面掛了，也和朋友說我三面掛了，人家晚上還安慰了我一波。結果過了幾天，說offer到了。。。

小結

遇到了本次出去社招最難一面，也充分暴露出野生前端的不足，計算機網絡知識不繫統，零零散散。這一塊後面得補回來了

他們部門用的是ng全家桶，自動化測試也作得很到位。至於爲何用ng，他們老大說：「由於react生態太豐富了，咱們作技術選型或者開發到後面會常常要考慮對比各類方案、要調研，不想花太多時間糾結生態，直接上ng一了百了」。這個理由，挺有道理的，我在咱們團隊也作過一些系統的前端架構設計、作過技術選型、帶頭作過升級react，也取得讓我引覺得傲的效果，但就沒有往這個方面去思考過，面試官這個思考角度讓我豁然開朗——原來事情能夠這樣思考。另外，如今ng的ivy也挺出彩的，你們有時間能夠去了解一下

猿輔導是個很不錯的公司，技術也挺強的，並且通常78點下班。還有，別忘了猿輔導是傳說中開發實習生800一天的公司，除了這個，福利也挺多、挺到位的，員工關懷像騰訊同樣到位

商湯科技

公司面試難度評估：✭✭✭✭✩

1面

看見你寫的文章，還很深的，說一下這幾篇【描述】

挺surprise的，竟然有人那麼用心看我文章，還看細節。因而帶着興奮的心情火燒眉毛和他介紹了

react的class組件和函數組件有什麼不一樣【描述】

class組件有生命週期有狀態、函數組件就看返回值無狀態(如今有hook了)

class組件存在問題，函數組件的問題【舉例】

又是經典問題，class組件隨着項目變大生命週期邏輯過於耦合、龐大，函數組件能夠更細粒。class組件須要走實例化流程，但能夠使用裝飾器。函數組件就不能使用裝飾器了，函數組件ref須要forwardRef，不用糾結this。若是代碼量都不少，函數組件可讀性高一些

class組件和函數組件diff、渲染、掛載過程差別【描述】

實際上是同樣的，最終結果有點不同，能夠看打包後代碼

em、px、rem【描述】
rxjs在複雜異步管理的做用【舉例】

沒有在項目用過，他們那邊是挺須要rxjs這種異步管理的，把流程視爲時間軸，使用管道操做符操做異步數據流。一切異步流程你均可以畫在彈珠圖上清晰看見

websocket和http協議區別【描述】

http無狀態、被動；ws一次握手，知道狀態，能夠雙向通訊

徹底不一樣的域名共享localstorage的方案【描述】

公共服務器雙工通訊(比較簡單暴力)、嵌套iframe並雙向通訊(只要一個變了，立刻通知另外一方，保證他們的localstorage如出一轍)

若是react項目要接入redux，每一步要怎麼作【舉例】

從api的使用到源碼的實現。源碼流程：provider傳入store，connect要return一個組件，使用mapstatetoprops和mapdispatchtoprops擴展props，而後subscribe一下store，每次變化更新組件

對象、引用類型、immutable、...、Object.assign【描述】

放鬆一下，咱們聊些簡單的......

寫一個你熟悉的吧，antd的tree渲染這個數據結構【僞代碼】在面試的頁面上直接寫jsx，高亮看得難受，也沒代碼提示。真的是放鬆題了，一個遞歸，tree包一下treenode，完事

一面仍是挺輕鬆的，一種和人家交流技術的感受。後面聊了好久他們的業務，作ai編程的，提交程序放到一個平臺上跑，全程websocket雙向通訊，此時頁面上有各類程序和圖表，各類異步混雜起來，大概能夠理解爲何用rxjs了

2面

項目深挖，反問一些問題【描述】

這裏問了作數據mock的時候，若是有鑑權邏輯怎麼辦。可能有的人就立刻動手了：作一個鑑權服務。其實不須要，你要清楚你的目的是什麼，你只須要mock鑑權失敗的時候返回的內容就行，到時候你能夠隨意切換mock數據

settimeout(a, 3000); ...同步代碼執行好久 settimeout(b, 1000)多少種狀況，臨界值【描述】【舉例】

同步代碼執行時間 <= 3000，順序。> 3000先b再a

爲何會這樣，說一下event loop【描述】

背書

瀏覽器底層對線程衝突的實現【描述】

不知道了。對方說由於有一個watcher，你能夠看一下Chrome底層實現，比死記硬背宏任務微任務更好

一個頁面，有圖片、文字等各類內容，要求不能打亂排版和比例，如何兼容全部端【舉例】

rem方案。但仍是要看狀況，通常狀況下，手機是豎着的，電腦是橫着的，總要對其中一個補白，否則很難看

瀏覽器緩存在spa的應用。html要不要緩存，爲何？其餘資源呢，爲何【舉例】

html不緩存，都是引用js，要保證最新。其餘能夠緩存，每次發佈文件名都有md5保證不同，並且也是增量部署的

react性能優化【舉例】

又是老問題了。scu生命週期、memo；usememo & usecallback記住一些值不用從新計算；虛擬列表；immutable+scu/memo；原生js；

100條香蕉，猴子離家50米，猴子每走一米要吃一根香蕉，猴子最大負重是50條香蕉。問猴子怎麼作，能夠作到拿回家香蕉最大化，最大能夠拿到多少條回家【僞代碼】

結果是啥不重要了，主要是思路。他問用dp仍是貪心，我說都行吧，dp確定是能夠，貪心也算得上是。寫了一段僞代碼，在離家n米處有s條香蕉，每次選擇回頭或者前進，回頭的話會損失2 * (50 - n) + 1，並補全到50條(庫存能支持的狀況下，至關於新增量減去損失量);選擇前進，只會減小1。每一步選擇最多剩餘的，等於下一步的s值。臨界點：離家0米，s就是答案; 離家50米，s就是50

2面是有一點挑戰的，由於setimeout那道題，面試官建議我看一下瀏覽器底層和v8，這樣子深刻能夠看到更多的東西。他說，只抱着一個mdn能學好前端嗎？他們的業務是有作底層的，作直播+wasm的，技術仍是挺牛逼的。國內作這方面的人也很是少。還有我問了一下如何經過wasm讓瀏覽器支持h265，他說只要你看視頻編碼解碼，加上wasm基礎，一個月內就能夠了，這些東西外行人以爲牛逼，其實只要你深刻看一下瀏覽器底層一些東西，看一下Chrome底層是怎麼運行的，就一目瞭然了。面試官在聽我項目的時候，說我產品sense很好。由於在個人一些項目中，除了身爲開發，還要作項目規劃、定方案、架構設計，還要作一名技術產品經理提需求並爭取一些人力。後面還聊了不少其餘的，他最後還介紹了一些國外優秀的文檔資源給我，惋惜因爲面試討論得太興奮，忘記加面試官微信了，有點虧

3面

項目深挖、提問【描述】
你項目怎麼接入ci的，整個流水線是怎樣【描述】

git提交 => lint執行 => 觸發hook => 讀取yml文件執行命令 => 部署 => 調用機器人接口發佈企業微信羣周知

設計一個短連接系統【描述】

頁面連接映射 => 關鍵字符串 => 映射到時間戳 + 數字序號轉高進制 => 得到短連接。第一次映射是爲了知足多對一，第二次映射是一對一，進制轉換爲了簡化字符串

應該是技術老大了，知識面很廣，和他交流我只回答我懂的那些，他也沒有刁難，專門找我熟悉的來問。最後再次重複了一下他們的業務，ai編程、提交到一個平臺運行、異步數據流很複雜

小結

知道了須要學一下底層，能夠看到一些事情的本質，也瞭解了一些冷門領域和其餘領域的東西。技術仍是玩得挺深的，可能比一些大廠的部門還要深

快手

公司面試難度評估：✭✭✭✩✩

1面

react升到16，有什麼坑須要解決【描述】
16後性能好多少，測過嗎，你怎麼測的。順便問一下各類測速上報【描述】
爲何16的性能好，fiber流程是怎樣的【描述】
爲何兩個will生命週期要被標記爲danger【描述】
用了react的哪些新特性，帶來什麼收益【舉例】
瀏覽器http緩存那一套【描述】
from memory cache、from dist cache什麼區別，性能對比【描述】
根據什麼而選from memory cache、from dist cache這兩種緩存方案【描述】
service worker怎麼理解【舉例】
輸出一個字符串全排列【編程】

2面

項目深挖，反問一些問題【描述】【舉例】
react的setstate過程【描述】
說一下幾種狀況的setstate的輸出，爲何【描述】
react的合成事件【描述】
收到新state怎麼更新，發生了什麼事情【描述】
ssr過久，你以爲什麼緣由致使【舉例】
ssr優化措施【舉例】
react的ssr和傳統的模版引擎渲染對比【描述】
ssr兜底容災措施、降級措施【舉例】
如何選擇csr仍是ssr，設計一套方案切換，讓儘可能多的用戶獲得最好的體驗【舉例】
有一個請求函數request，封裝一下這個函數，使得多個相同的請求過來的時候不發請求，直接讀取第一個的結果【編程】
有一個排序數組，返回第一個比目標數字小的數，要求log(n)【編程】

3面

4個砝碼，一個天平，問能稱出多少種重量（砝碼能夠兩邊都放，砝碼重量本身隨便定）【寫出運算過程】

砝碼重量本身隨便定，就定一個理想化的狀況，四個不同的、且加起來也不存在重複的就行。若是你要考慮存在重量同樣的兩個砝碼或者某些組合的和有相等的過程，那分類討論夠你折騰幾個小時的。但面試只有20分鐘，因此直接看理想狀態的就行

小結

技術棧比較搭，基本用過的東西都是如出一轍的。快手終面喜歡問智力題、數學題，以前校招也是終面問智力題，你們要準備一下一些經典智力題和數學題。若是排列組合、機率論這些基礎忘了，建議回去補一下

最後

面試過程總結

自我介紹

穩定一套臺詞，介紹我的基本信息，作了什麼業務和什麼技術棧，言簡意賅最好控制20秒內

問項目

自我介紹完了，通常就是介紹項目。有時候是默認自我介紹帶項目詳情，此時要看面試官是否是這個意思。時間很少，因此必定要講一個具備表明性的、能最好的突出本身的項目

正式問題

熟悉的領域，必定要爭取機會表現，而不是僅僅爲了講出答案。你甚至能夠臨時換位思考，這我的要怎麼回答你才以爲他和其餘人不同。若是是本身不怎麼會的不熟悉的，要根據表現來猜想過程，這個是靠積累的。面試比之前考試好多了，起碼不會的能夠靠猜，由於不少東西都是相通的、相似的。反正我屢次都是猜的，回頭查答案發現仍是蒙對了

你有什麼想問個人嗎

首先問對方業務、技術棧、團隊是必須的，你也能夠放到二面去問也行。其次是能夠看成一個和你閒聊的人，聊一下其餘的事情，好比一些其餘技術、爲何這樣這樣、公司方向、晉升、kpi、okr怎麼定、考覈之類的，或者加個微信。固然，必須根據對方性格來問，不能亂來說、亂來問。要時刻記得一個事情，這個過程，除了面試以外，應該是要有一些其餘收穫的。若是這半小時甚至兩三小時，你只有面試沒有收穫，那就虧了

hr面

若是hr還問你項目，技術方面的能夠簡單跳過。若是是問人生規劃、爲何離職、怎麼選擇、怎麼評價領導之類的，必定要說好話、說正能量的。背景都老實說吧，若是造假了，後面入職誰尷尬？背景調查查到了怎麼辦？你撒謊一句，那就須要再撒多幾句慌來圓第一句。建議把本身想去的公司放最後去面，到時候問你你有其餘offer嗎，此時你就能夠拿來擡價了。通常公司還會讓你提供流水的，會根據上家的價和麪試表現來定最終offer開多少價錢

雞湯

只要一件事情能給你成長，不管過程，都是賺的了，最怕的就是一無所得，這樣子只會浪費時間。看見不滿意的、很差的，不要只看他很差的一面並沒有限吐槽，而是盡力挖掘它的價值，並吸取爲本身的經驗。我作的一些項目也是和你們同樣，搬磚，普普統統，但我不但願普普統統，總會找機會搞點事情，嘗試一下新的技術、新的方案、新的設計，並普及給團隊其餘小夥伴，這樣子既能表現本身又能互利雙贏。

不管作什麼，不止前端，都應該要有本身的想法和思考，這樣子才能把事情作好，作得更深。不然這就像一場夢，醒來仍是很感動。但願各位讀者，看上面的題目並非背答案，而是理解它，並能活用，之後作相似的事情，有參考的思路。若是遇到和我同一個面試官，題目固然是不徹底同樣的，此時須要臨場發揮本身的積累和靈活運用了。

最後再補充一點，若是你見過了廣泛狀況，瞭解到了廣泛現象，那要是什麼都和人家同樣，最後不就是也成爲廣泛水平了嗎？若是想脫離當前現狀，實現突破，那麼目標應該是成爲有個性、有特點的、有區分度的人，成爲一名不同的前端，不同的人。