壹 ❀ 引

從深圳離職回武漢也一週多了，上週不慌不忙的安排了兩場面試，到本週一為止兩家都收到了offer，考慮到某些原因還是把兩個offer都拒了。其實說實話也沒想到面試能有這麼順利，不過清楚自己在市場上的定位後，還是想之後花時間再搏一搏。

說在前面，這兩家均非大廠，第一家主要做海外SaaS服務，公司技術氛圍與我上家很相似，比較看好。前後一共經歷了五輪面試，一路過關斬將面了4天最後薪資還是沒談攏，實屬遺憾。第二家為國內某知名網遊加速器，這一家只有一輪面試（2個人一起），相對簡單輕鬆。那麼接下來就分別羅列面試中遇到的問題，部分問題都比較開放，所以我也不好給答案，你可以將自己代入到面試者的角色中，想想如果是自己會如何回答。

貳 ❀ 某SaaS公司

貳 ❀ 壹 編碼能力與風格檢驗

正式面試前，HR給我說了有題目需要先做，線下完成，題目是三選一：

• 實現一個無限下拉的功能，對方有提供介面，加分項是考慮到DOM節點比較多時該如何優化，可Google，但是不能借助第三方庫。
• 實現一個全域性Toast元件，單例，一次註冊全域性呼叫，樣式自定義。
• 實現一個Tree元件，有提供模擬資料，需要將資料展示出來且支援展開收攏，樣式自定義。

要求是三天內完成，支援codeSandBox或者github，隨口問了下HR說如果做的多有加分，本來打算三題全做，但是耐不住現在租的房子的網路太差了，存取codeSandbox最終只做了兩個元件，實現也不是非常好，就當交作業了 元件連結。

第一題雖然沒做，但是加分項很明顯考察了虛擬列表，我想大家應該都知道，這裡就不過多介紹了。第二天就提交了連結給HR，很快得到了答覆，評價還算不錯，程式碼整潔，結構目錄清晰，整體實現沒有太大缺陷。所以緊接著就在當天中午十一點約了二面。

貳 ❀ 貳 基礎面

這一面是入職後的同事負責，主要考察基礎知識，問題大致如下：

談下react 15前後的渲染差異？

這裡很顯然考察了fiber引入前後的渲染差異，從這個問題我主動引出了fiber，大概講了fiber帶來的渲染提升。

你剛提到了fiber，能具體說說你的理解嗎？

我之前專門有讀原始碼寫部落格....正和我胃口，根據文章思路講了講我的理解。

你覺得fiber解決了什麼問題？

我覺得問題有點重複，不過還是單獨擰出了fiber之前的渲染掉幀原因，以及fiber的任務優先順序，排程讓出等等，強調了fiber是如何提升渲染體驗。

加入了fiber，你覺得渲染時長變少了嗎？

並沒有，fiber並沒有優化演演算法，只是通過排程讓出，以及優先保證渲染，給了使用者一種渲染變快的假象。

關於fiber具體可以見這篇文章 【react】什麼是fiber？fiber解決了什麼問題？從原始碼角度深入瞭解fiber執行機制與diff執行，我覺得能耐心看完上述所有問題都能解答...

瞭解diff嗎？說下vue和react diff差異。

vue的diff我確實沒看，所以結合虛擬dom講了下react是如何進行diff對比。

diff單節點和多節點更新有什麼差異？

其實就是是否是list的差異，每次diff原始碼中都會判斷此次是不是一個陣列，如果是陣列就會走key的特殊處理，畢竟key日常我們只在list時需要提供。於是我又拓展講解了key的核心作用。

關於虛擬dom與key有疑問可以閱讀這兩篇文章，我感覺說的也很詳細：

[react] 什麼是虛擬dom？虛擬dom比操作原生dom要快嗎？虛擬dom是如何轉變成真實dom並渲染到頁面的?

React key究竟有什麼作用？深入原始碼不背概念，五個問題重新整理你對於key的認知

你覺得component element jsx三者關係是什麼？

這個問題其實我沒太get到面試官的意思，不過還是從渲染過程以及結構解釋了下我的理解。

react是單向還是雙向資料繫結？

寫react都知道是單向，如同瀑布的水自上而下流動。每個元件都可以接收上層傳遞的props，同樣自身的state也能構成下層元件的props。

雙向繫結和單向資料流有什麼優缺點？說說你的看法

雙向在某些場景開發更便捷，畢竟在vue底層已經幫我們做了view與modle的關聯，但在react不同，很多事件監聽以及資料跟蹤處理需要人為關注，程式碼量會更大。而站在元件設計的角度，保證資料的唯一性（唯一進出口）有利於元件的維護，各有優勢。

說下class和函陣列件的區別？

1. 底層渲染不同，元件在渲染時會判元件型別，假設是class元件會先new一個範例，再通過範例.render()拿到node節點，而函陣列件則是直接呼叫通過return得到渲染節點。
2. 編碼方式不同，class更多依賴生命週期勾點，而後者早期並沒有state的概念，在引入hooks後更傾向於函數語言程式設計。
3. 有沒有this的區別，對於this理解薄弱的同學而言，函陣列件確實更清晰易懂。

高階元件用過嗎？什麼場景用，有什麼問題？

元件之間存在共同的資料加工時常用，問題就是巢狀地獄，在資料溯源時非常痛苦。

你覺得hooks給你帶來了什麼？

更少的程式碼量，更清晰的編碼方式，以前要共用部分邏輯常見就得hoc，但現在能封裝成一個自定義的hooks。其次，在部分減少無效渲染上，hooks確實更方便。

你覺得hooks效能更好嗎？你是怎麼做效能優化的？

並不覺得，畢竟走同一套diff，這要看什麼場景，畢竟相同的功能不同的開發，不同的實現方式都會導致不同的結果。就比如useMemo雖然能快取，減少重複渲染，但是不會用可能只是徒增記憶體，並沒有很好的提升體驗。

關於效能優化，我從簡歷裡挑了兩個方面拓展來講了，一個如何減少無效渲染，一個單點效能問題排查。

關於如何減少無效渲染，可以看看這篇文章：React效能優化，六個小技巧教你減少元件無效渲染

遇到過閉包陷阱嗎？

每個hooks新手可能早期都遇到過，比如useEffect第二引數時空陣列，或者監聽了一個不變的值，會導致內部邏輯永遠不會重複觸發，內部變數始終存取之前的快取值。

你覺得useContext能取代redux嗎？說說你的看法

不能，我一開始說的是專案複雜度的問題，但是面試官不滿意，追問了更深的原因，他期待的答覆應該更傾向於如下幾點：

1. 功能耦合度問題，redux從來就不是必須的，但它能更專注於狀態管理，讓研發從狀態監聽以及響應中解脫出來。
2. context存在reRender問題，在效能方面不是很好。
3. context在層級過高的情況下存在無法更新的情況。

讓你設計一個成員搜尋元件，每次搜尋後都會發起請求，怎麼設計，簡單說下思路？

因為更傾向於業務，簡單說了下思路，分為搜尋和list兩部分，核心聚焦在搜尋上，需要關注防抖以及cancelToken的問題，避免介面並行的問題。

你覺得你在上家公司最出彩的地方是什麼？

因人而異，可以說自己在公司做出的成就，可以說自己在公司的成長，沒固定答案。

為什麼離職？

因人而異，如實說就好了。

到這裡基礎面差不多就結束了，對方問我有沒有什麼問題想問他，我就直接問了面試評價，畢竟行就行不行就下一家，節約彼此的時間。對方就說讓我自己給自己打個分，我結合問題的回答說70多吧，因為大部分問題自我感覺回答的都不錯，然後對方也說我基礎不錯，整體挺不錯的，之後HR給的面試反饋也差不多這個意思。

貳 ❀ 叄 專案經歷面

在面完基礎後，又約了第二天的專案經歷面試，但我是沒想到是兩輪，直接變車輪戰了，第一面的面試官相當於未來的同事面，第二面是CTO，先說第一輪。

你是怎麼做效能優化的，思路是什麼？簡單說下。

因為我簡歷裡有專門做效能優化的經驗，所以這裡我挑了兩個案例說了我當時的分析過程，（寫部落格記錄的好習慣，到現在也非常清晰）。

前端如何把控以及減少效能問題的出現呢？說下你的想法。

方案評審，code review相關扯了一下。

說下你在ONES最出彩的地方。

最出彩，最出色，印象最深...都很愛問這個問題，然後我還是又講了自己的成長，算一個重複問題。

你提到了Wiki，那假設現在讓你做一個複製貼上功能，你如何設計？

我只參與了wiki海量的bug修復，並未參與過多業務，貼上API雖然知道，但是關於相容相關其實沒有過多瞭解，如實回答就好了。

你們的迭代流程是怎麼樣的？

BA需求拆分--產品出原型--需求評審會同步相關資訊--UI出設計稿--研發出方案--方案評審--進入開發--研發自測--dev環境部署與測試參與--整合測試--版本上線。當了挺久的小組迭代負責人，所以對於發版這塊算是滾瓜爛熟了。

為什麼離職？

重複問題。

這一面比較簡單，對方也說能面試的時間其實不多，給我的感覺比較倉促，然後讓我在騰訊會議等會，CTO會來進行第二面。

貳 ❀ 肆 CTO面

面試一開始，對方直接開了視訊，出於視訊禮儀我也開啟了視訊（還好提前洗了頭），但由於我表弟的網真是太爛了，視訊直接給我卡成PPT，無奈我說要不還是語音溝通吧，於是轉成了語音。面試前也聊了下家常，得知CTO是荊州人，我說我高中經常去荊州補習，一下子拉近了關係。

看你不是計算機專業的，怎麼想到做前端開發？

大學有網頁設計的課程，大學畢業就思考要走什麼路，最終選擇了這條路。

你覺得ONES產品中最亮眼的功能是什麼，說說你的看法？

短暫的思索，講了下 ONES Project部分功能，但大部分功能其實也不是我做的，只是平時有讀過部分程式碼，寬鬆的問題放開說就好了，畢竟也沒有固定答案。

說下你在ONES最出彩的地方

重複問題，因為對方是CTO，我覺得這一關比較重要，就詳細講了下自己的成長，如何從一個修bug的菜狗成長到在ONES處理問題小有名氣，直到離職最後一天，國際化團隊還拉著我幫忙分析問題。又不滿於現狀臨時加入效能優化小組做效能優化，以及平時自己留意一些體驗不好的地方用愛發電做優化，最後做某個需求因為元件庫也需要提供支援，但是他們沒資源，無奈我又臨時加入元件庫，先開發元件再做業務，也因此做完後被元件庫小組專案經理一頓誇，三次收到元件庫小組轉崗邀請（離職期間一直希望我能別走調過去）。其實說這麼說，都是想突出自己對於技術成長的渴望。

你是如何看到前端未來發展的？

從JQ聊到angularjs，再到vue和React，扯到了低程式碼，開發成本降低，研發關注分離，更聚焦於業務層，類似的話術網上一大堆，大膽說就好了。之後以react為例，又聊到hooks相對於class元件的部分優勢等等，比如不用考慮this等等。

既然你提到了this，閉包這些的底層模型是怎麼樣的嗎？比如閉包不會釋放，那為什麼不會釋放，底層是因為什麼？

這個問題說實話我答不上來，雖然之前有看執行上下文原理，瞭解過上下文建立的一些原理，但是對於底層模型說實話沒看過，如實回答了。大家如果有了解的可以在評論區留言，我也學習下。

你們有做APP嗎？有了解RN與flutter的差異嗎？

有，不過APP是行動端小組專門負責，使用的技術是Flutter，因為沒用過所以區別答不上來。

你上家的研發流程是怎麼樣的？

重複問題，見上。

看你處理了這麼多bug，有通過反饋來提升前端程式碼質量嗎？

有，平時會蒐集研發同學出現bug的原因，對於踩坑，或者使用不當的地方會蒐集到一定數量後在月會同步，離職前最後一次前端月會還分享瞭如何減少元件渲染，內容我也整理成了部落格，見部落格最新一篇文章。

說下你處理的印象最深的問題。

太多了，在ONES處理了上千個問題，總有幾十個屬於疑難問題，挑了三個講了下我是如何分析以及一步步得出真相的過程。

你覺得了解前端業務對於前端開發有幫助嗎？

有，還是以ONES為例，在處理許可權問題時，如果你對於許可權設計比較陌生，你可能都區分不出一個問題時客戶不會用，還是真的時一個bug，我又結合了一些案例講了我是如何分析，以及一些處理bug比較的同學是如何分析的區別。瞭解業務也能便於你重構改善這部分的功能，反正很重要。

你剛提到許可權系統，如果讓你來設計一套許可權，你會如何做？

答不上來，只修過部分問題，沒完整了解過，反正不知道的如實回答就好了，不需要支支吾吾。

有了解前端安全嗎？

雖然我想說xss攻擊，但是想了下全是理論，也沒真的處理過，所以就沒講。但是在職期間也幫銀行客戶處理過嚴重的安全漏洞，所以就挑這個說了下。

最近在學什麼？

演演算法，比較感興趣，node和go，想轉全棧。

那你覺得全棧需要具備哪些技能？

我說我理解的比較淺，前後端運維吧，對方說好的全棧還需要懂設計，有好的審美之類的，這個我覺得也不算一個問題吧，隨便聊聊。

為什麼離職？

重複問題。

期望薪資。

到這就聊的差不多了，然後問我有沒有什麼問題，老規矩，直接問面試評價。結果對方說在研發裡，像有我這樣溝通能力的確實很少見（可能我賊能聊吧），而且結合我處理問題的能力能耐心讀很多人的程式碼，真的很不錯。最後聊完，CTO又把視訊開啟了，說再看看我，我就知道這一面穩了。

面完之後兩小時，HR給我同步了面試反饋，大家都覺得我很優秀，雖然有偏科，業務能力稍有薄弱（結合前面一些讓我給方案，因為我沒做過，所以說不出來），但是解決問題的能力正好是他們所需要的，而且溝通大家都覺得很棒，也問了我有沒有興趣帶團隊，講了武漢分部的一些情況等等，我當時講道理都樂開花了。

貳 ❀ 伍 CEO綜合面

這一面已經是第二週的週一了，好傢伙前前後後給我面了4天。這一面也是視訊面，因為網路問題，無奈我跑我表弟房間面，身後就是一整排我表弟掛著的衣服，第一眼對方也許以為我是直播帶貨的。

關於聊的問題其實都比較寬泛，我個人反而不太喜歡回答這類問題，大致如下，部分問題存在重複，我就不再重複解釋了。

自我介紹

離職原因？

說下你未來五年的規劃？

你覺得一個優先的開發應該具備哪些能力？

說下你在ONES最出彩的經歷？

如果讓身邊同事評價你，你覺得自己的優缺點分別是什麼？

最近有學什麼？

有什麼問題問我？

整個過程比較輕鬆，最後我還是問了面試評價，CEO直接說YES，那麼這家公司五面就算全部結束了，順利通過。

叄 ❀ 某加速器公司

相對於第一家，這一家面試其實可以說就1面，1面聊技術問了一些問題，2面直接談薪資準備發offer了，其實仔細一想，應該是簡歷高度符合，所以只是簡單的聊聊情況確認簡歷可信度，先說一面說。

因為我簡歷有寫管理經驗，所以前十幾分鍾一直在聊管理相關的問題，部分問題如下：

你之前公司研發流程是怎麼樣？

公司產品支援客製化嗎？如何滿足客製化需求？

SaaS存在多個版本，你們是如何管理不同版本的？

做過哪些效能優化？能不能說下思路？

能聊聊對於fiber的理解嗎？

瞭解高階元件嗎？說說常見場景？

諸如此類，然後說差不多了，我當時一愣，這才半小時啊，這就沒了？對方說技術肯定沒問題的，直接約了二面。同樣也是第二週週一，我以為是技術複試，沒想到直接進入薪資確認以及入職後工作負責範圍，問我是否願意，願意的話現在就發offer，因為我第一家投入了很大的經歷，對方也覺得我的最終選擇可能不是他們，所以說我可以先考慮下，第二家大概這樣了。

肆 ❀ 一個教訓

我在第二家二面時，對面技術總監聽到我說面的另一家居然有五面表示很驚訝，他說如果這一家聊到最後不給我一個合適的薪資，那就確實很對不起我了。戲劇的是第一家最終薪資確實時，在對方已知我已有offer的情況下，還是給我開了一個尾數比第二家更低的薪資。我仔細反思了自己第一家的面試過程，由於這一家跟ONES的技術團隊以及技術氛圍非常相近，很有技術追求，所以我比較看好，整個過程都表現的非常想去，所以薪資上實屬把我拿捏了。HR可能也聽出了我的失望，一直在強調平臺氛圍等等，我說這也不能怪你，畢竟薪資不是你來給，我還是得考慮一下。

通過這件事，我確實學到了一個教訓，在面試中體現技術就好了，沒必要透露自己太多喜悅以及很想去的神情，越這樣對方越容易拿捏你，感覺你很想來很好壓價，所以今後要做一個高冷的人！

兩家公司都給我考慮時間，期間第二季還是很希望過去，不過結局我還是把兩家offer都拒絕了，薪資範圍都是2開頭但尾數不高，其次兩家的公積金都不高，因為短期內要買房，所以還是很看重公積金繳存比例。

伍 ❀ 未來

通過這次面試，主要還是弄清自己在市場的定價，有個一個範圍後才好決定下一步怎麼走。粗略統計了下武漢部分公司，小紅書、位元組、紅杉資本、鬥魚、小米、作業幫、聯想等，後續打算一家家內推面，大概率進不去，畢竟學歷渣，但萬一成了那不得笑醒。本來去年想著是回來讓同事推我去金山...結果今年金山直接裁員，鎖社招HC到現在，直接沒戲。

今年整體行情確實不咋地，不過只要實力OK，簡歷出色還是可以殺出來，不過如果當前薪資已經差不多，跳槽薪資漲幅不大的話還是建議先穩一波。那麼這篇面試大概就這樣了，也希望後續面試順利，本文完。