面試官心得

一場好的面試我認為以挖掘候選人的各項能力值深淺為目的，而不是為了“難倒”候選人，所以作為面試官，更多的是去引導、平滑展開考察範圍，而不是本著為了面掛候選人的心態去面試。

我認為較差面試體驗的情況：

• 去問一些特別偏門或者犄角旮旯的問題，完全不看候選人的過往專案經驗或擅長的部分，除非這個崗位真的要求這些非常規技能，否則儘量不要問
• 面試過程很生硬，跳躍性的提問，一會問前端基礎，一會突然插了一個毫不相干的問題，前後毫無聯絡
• “自以為是”，因為即使是面試官也存在知識上的盲區和誤區，儘量不要遇到候選人擅長的自己不擅長的就避開了，完全可以是以“請教”的姿態讓候選人自己去把一件事情表述清楚，讓你都能聽懂，也不要過於偏好問自己擅長的但是候選人不擅長的，如果候選人這方面的一些基礎問題都沒回答出來，就可以換別的了，繼續深入沒有意義

實際上上面的情況我自己在剛做面試官的時候都犯過，不過人都是會成長的，不斷的面試官經歷讓我知道如何在較短的時間內判斷候選人的能力值。其他廠的面試我不太清楚，但一般每一輪的面試考察方向是有區別的，當然也存在一些重疊的部分，我在酷家樂主要負責電話一面、二面筆試、三面，後面可能還會有 1~2 輪的 mgr 面，最後是 hr 面

• 電話面試：主要考察一些基礎知識，一些比較容易遇到的實際問題，一些專案經驗，可以稍微深挖他擅長的領域，過程中留意一下理解能力、溝通能力，初步判斷這個候選人和我們的匹配度，是否可以約到現場面試，不浪費彼此的時間
• 筆試：開場不要直接做題，簡短的噓寒問暖和自我介紹之後，挑一些專案中深度使用、研究的技術，並深入考察，直到他不清楚或達到你考察的目的為止，這時候就可以換一些其他的問題了。然後開始做題，主要考察前端基礎、簡單的資料結構與演算法等，留意一下候選人答題的速度，時間如果太長了建議打斷，詢問碰到了什麼困難，卡在什麼地方了，必要時可以做一些提示，如果還是卡住了，那就開始下一個核對答案的環節，這個環節不是僅僅為了一個答案的正確和錯誤，每道題要詢問候選人的解題思路，如果回答比較模糊或過於輕鬆，建議引申一些相似問題，加大難度考察，直到候選人不清楚或達到你的考察目的
• 三面：能到這一面證明基礎能力還是及格的，這一面主要考察專案經驗和技術深度、廣度、部分的軟實力。這一面主要深挖專案的複雜程度和亮眼的地方，考察技術的廣度和深度，對業務的理解和思考，對一些實際問題的處理方式和過程，留意溝通協作能力，判斷這個人是否有能力 cover 一整個專案並對現有團隊起到正向作用，可以考察一些架構、物件導向、設計模式方面的問題，必要時考察一些智力題來判斷候選人的聰明程度和反應能力
• mgr 面：省略...主要是結合前面的面試結果綜合判斷是否可以補位目前團隊的人才缺口
• hr 面：談薪資，軟性技能，沒有太大毛病一般不會掛掉

以下主要是我在酷家樂作為 web 前端面試官會關心和考察的知識點

js、nodejs 基礎

重點考察的部分，基礎不好的建議直接拒了，這塊沒有太大商量餘地

• 閉包
• 作用域
• 原型鏈
• 變數提升
• 函式引數值傳遞
• this 指向問題
• 函式提升以及優先順序問題
• new 操作符做了什麼？
• 用 ES5 實現一個繼承（有哪些方式）
• 0.2+0.1不等於0.3問題（浮點數精度）
• 堆、棧、佇列是什麼？都有什麼區別？有什麼應用？
• 深拷貝、淺拷貝問題（immutable是怎麼實現的？）
• typed array 問題
• es6 箭頭函式問題
• let 會提升嗎？宣告、初始化、賦值等概念。什麼是暫時性死區？
• 什麼是 iterator？for of 用過嗎？
• call、apply、bind 區別，bind 怎麼實現的？
• caller、callee 瞭解嗎？什麼時候會用到？建議用嗎？
• es6 其他特性用過嗎？（Class、Map、Set、Decorator 等分別考察）
• promise 實現原理（怎麼實現取消？怎麼實現 promise all、race 等？）
• async await 知識點（await 的作用，async 返回的是什麼）
• generator 又是什麼？
• v8 執行緒模型、event loop（async、promise、nextTick、setTimeout、setImmediate 經典問題變著花樣考）
• 程式和執行緒是什麼？有什麼區別？
• v8 垃圾回收機制
• 輸入 URL，瀏覽器的執行過程又是怎麼樣的？（瀏覽器解析方式、順序，async、defer等）
• 瞭解前端模組化嗎？有幾種規範？（commonjs 和 es module 都是怎麼實現的？有啥區別？）

css、html、dom、瀏覽器相關基礎

沒什麼好說的，前端必修課，樣式、html、瀏覽器相關的不過關建議直接拒了

• 盒模型
• 樣式覆蓋優先順序問題
• 選擇器相關問題
• 怎麼解決邊距重疊？（什麼是 BFC？怎麼建立 BFC？）
• flex 彈性佈局瞭解嗎？用過哪些？（問一些實際問題）
• 移動端的一些坑
• css modules 瞭解嗎？
• sass、less 用過嗎？用到了什麼特性？實踐情況
• 移動端用什麼距離單位？（px、百分比、vw、vh、rem 等）
• 什麼是邏輯畫素，什麼是物理畫素，裝置畫素比又是什麼？
• 事件捕獲冒泡
• 哪些操作導致 reflow、repaint、composite
• 什麼時候用 css 動畫，什麼時候用 transition？選擇標準是什麼？（如何知道動畫執行結束了？）
• dom api 相關
• cookie、localStorage、sessionStorage 區別和使用場景
• 跨域相關問題，怎麼解決？幾種方式？
• 快取相關（強快取、協商快取，由此引申 http 相關快取知識）

計算機基礎

前端對於協議這塊必須是要清晰的，如果是 nodejs 團隊建議加大難度

• 前端相關網路知識（tcp，dns，cdn，http，https，http2）
• 安全相關（xss、csrf）
• 怎麼實現登入的？（cookie based、session based、jwt）
• https 怎麼做到防止資料包被攔截的？
• 證書是什麼？
• 幾種常見加密演算法，對稱加密、非對稱加密

設計模式、架構、程式設計思想

主要考察架構設計能力，軟體工程等基本素質，對於資深前端這塊有要求

• 用過什麼設計模式？怎麼實現的？應用場景？
• 專案是怎麼做架構設計的？談談你的理解
• mvvm 和 mvc 是什麼？有啥區別啊
• 函式式和響應式的理解
• 什麼是柯里化，怎麼實現柯里化？純函式是啥？
• defineProperty 用過嗎？有什麼問題？descriptor 是什麼？有哪些屬性幹嘛用的？initializr 是啥？
• 裝飾模式瞭解嗎？裝飾器用過嗎？哪些場景？（高階元件、es6 decorator）
• 繼承和組合用過嗎？什麼時候用繼承什麼時候用組合？（mixin 是什麼東西？js 是多繼承還是單繼承？為什麼是單繼承？）
• 什麼是開閉原則？
• 什麼是控制反轉？什麼是依賴注入？
• 什麼是面向切面程式設計
• 你瞭解的反模式是什麼
• 瞭解尾呼叫優化嗎？通常用在什麼場景？js 引擎有做這層優化嗎？什麼是尾遞迴？

資料結構、演算法相關（easy 難度）

對於前端來說考到 easy 難度差不多了（我自己也是個弱雞~）

資料結構比如樹、連結串列相關的在前端應用界是常用的，建議考察

圖論、動歸、線段樹、蓄水池抽樣等這種根據自己的業務領域來決定是否有必要考察（=. =，web 前端我感覺不需要）

• 大 O 表示法，怎麼計算時間複雜度和空間複雜度
• 貪心演算法是什麼？動態規劃是什麼？（揹包、爬樓梯、金礦問題）
• 實現一個記憶化的斐波那契數列
• 求並集、交集
• 連結串列相關（排序、合併、去重）
• 樹相關（對稱二叉樹、翻轉二叉樹、前中後序遍歷、深度廣度優先遍歷、遞迴非遞迴實現）

智力題

主要考察反應速度、邏輯思維、推理能力，達到正常以上水平即可

• 25 匹馬
• 燒繩子
• 推理題

應用框架原理

考察是不是隻會用，只是技術棧的羅列，而不清楚內部的原理機制，更沒有借鑑落地的場景，這塊也是重點考察

• react、angular、vue 實現原理（三個選一個候選人最擅長的，針對某個流程詳細考察，比如 dom diff、dom patch、髒檢查、雙向繫結、依賴收集等）
• setState 相關問題，dirty component 是啥
• forceUpdate() 用過嗎？是什麼幹嘛用的？與 setState 有啥區別？
• props 和 state
• 元件設計相關（怎麼設計？受控和非受控是什麼？）
• children.map 是什麼，和普通的 map 有什麼區別？使用場景
• cloneElement 幹嘛用的，使用場景，和 createElement 區別
• 生命週期相關
• react 16 新特性，react 17 前瞻，fiber，hooks，suspense，非同步渲染等
• redux、mobx、vuex、dva 等狀態管理框架實現原理，針對幾個點詳細考察
• redux 或 mobx 怎麼處理 side effect？
• redux 中介軟體模型，thunk 怎麼實現？saga 怎麼實現的？
• koa、express 用過嗎？中介軟體模型瞭解嗎？有啥區別？
• router 用過嗎？核心流程怎麼實現的？
• 用過什麼 xhr 封裝庫？（axios、fetch，各家長短？有啥坑嗎？）
• babel 原理（有哪些東西，分別幹嘛用的，怎麼實現的，runtime，polyfill，register）
• webpack 核心流程原理，怎麼實現模組化的，treeshaking 怎麼做的？

其他

隨便問點一些業務上的思考，技術加分項，或技術視野、分享、選型方面的考慮

• 使用 typescript 嗎？如何看待的，什麼情況下用，型別宣告檔案怎麼寫的
• 單元測試（jest、mocha、ava）
• 如何釋出一個二方或三方包，有哪些考量
• 技術選型的考量指標、維度
• mongo、es、redis 方面相關知識
• 工程化、ci、docker、k8s 相關知識

大概就這些，持續更新......

如果有興趣來酷家樂，可以找我內推，我的郵箱：feifan@qunhemail.com