前端面試忽悠師入門，教你如何從容面試。
去年回杭後，除了在新的公司沉迷業務開發、業餘吹水之外，趁著人手不足順便做了些電話和現場面試的工作（ 當然主要是面向初級前端崗候選人 ）
從兩年前初入行的校招生，到如今扮豬吃老虎的面試官，感覺可以寫篇文章介紹下自己的面試心得和套路、
充實下一年未更新的“技術部落格”
列了個大綱:
- 前端面試忽悠師的戰略目標及基本功
- 如何正確地
尬聊 - 常用題庫及使用姿勢
- 一些常見情況的應對方式
前端面試忽悠師的戰略目標及基本功
戰略目標
用“簡要”的話來說，是在較短的時間內儘可能地瞭解候選人的技術能力、成長空間、過往經歷及未來規劃等資訊，為團隊招到靠譜的夥伴；同時作為公司的門面，展示團隊的技術實力和工作態度。
基本功
面試本身上是一次雙向選擇的過程。電話、視訊和現場面試對候選人來說一般是比較難得的通過在職工程師瞭解團隊的機會，良好的工作習慣和態度會顯著提高雙方的體驗，可以說是一門基本功。
比如:
- 提前約好時間、告知可能需要佔用的時長並且如約而至
- 提前閱讀簡歷，做簡單的筆記（比如上面寫的哪些專案想展開了解、哪些技術能力需要用什麼問題考察）
- 營造認真、開放的探討氛圍，提升候選人對團隊的認可度
- 用簡明高效的表述降低的溝通成本，節省面試時間
- 過程中做筆記或錄音，採集更多的資訊從而輔助後續對面試結果的決策 等等
如何正確地 尬聊
很多剛開始做面試官的同學很容易把天聊死，或者進入空氣突然安靜的環節。在面試前提前準備一個 “劇本”，或者用一個固定的、慣用的 “套路” 會好很多。
個人的面試習慣（套路）是，無論是什麼型別的候選人（校招 / 社招），起手是讓對方來段簡單的自我介紹，而後按照入行的原因 / 契機、上一份工作或實習的情況、為什麼想換團隊以及對未來工作的期望這個順序聊下來。 “前戲” 一般不超過6分鐘，遇到比較會聊的候選人應該及時拉回來或者開啟下一個話題。
有了上面的無壓力的溝通做鋪墊，基本可以稍微瞭解對方的情況、交流的風格甚至個人的水平和視野。
而後可以直接進入正式的環節，如果對方有前端的工作經驗，我會更傾向於按照簡歷的內容做面試，既然是寫在簡歷上的，應該是候選人真實經歷過的業務場景、技術需求，相當於給予對方主場作戰的機會。比如詢問在之前團隊做了哪些專案，然後抓住專案中的一些問題和需求點展開去問解決思路、技術細節、實際成果、反饋等資訊。把每一個專案經歷當成一棵樹遍歷下去，很快就能探到這些內容是否真實和候選人的技術層次。不過常常會有專案技術深度不足的情況（畢竟我遇到的初級崗比較多……），那麼就在下文歸納的題庫中臨時找幾個相關的問題提問。
另一種情況，如果工作經驗不足或者幾乎沒有（比如校招生、實習生），建議加一個小問題，比如是怎麼學習前端的，瞭解下對方的學習能力和方式。而後便讓 TA 走隨機題庫的模式，開始客場作戰吧~ 下一章中會介紹個人常用題庫。
面試過程中比較應該避免問較大的、 “務虛” 的場景，比如設定一個專案場景，讓對方設計前端架構、工作流程、專案規範什麼的…… 以及要避免諸如“如果讓你來做xxxx，你會怎麼做”這種提問（這點是看到其他人分享的面試經驗中很認同的一點）。上述“務虛”的場景很容易帶來的結果是，只考察了對方的吹水能力。
還有種情況是提的問題卡住面試者，一來是先要確保不是問題的表述問題（歧義之類的，如果是題庫問題有歧義，這個應該及時修正避免復現），而後可以提醒對方講講自己的想法，如果已經有一定思考的話建議作出一些提示，看看是否能在幫助下開拓思路。實在是無頭緒，可以直接用 “沒關係，我們先聊下一個問題” 這樣的臺階切題。正常情況不適合給對方作出解答，可能面試官自身理解有偏差誤導候選人（笑），可能候選人會鑽牛角尖甚至對問題有比較大的意見，主要還是時間成本。（有遇到過比較迷茫但潛力挺大的新人，還是會稍微講完整的思路和我自己的理解 ^ ^）
按照這個流程走，基本不會很尬。溝通的過程中最主要的還是要掌握主動權，不要被帶著走 (:з」∠) ，當然感覺把控不住只能用比較 low 的強行打斷……
結束提問後，可以讓候選人提幾個自己關心的問題、表達TA覺得沒有被關注到的點。可以給自己一個反饋，也算是提升面試能力。
目前我們團隊的面試最佳實踐是，coding 是簡單粗暴地考察候選人能力和技術素質的方式。在視訊和現場中，我們會傾向於留出較多時間給對方做題，上面 尬聊 技術和專案的環節往往會推到這後面。
常用題庫及使用姿勢
注：本章出現的題庫只收錄了部分常用題
使用題庫的原則是儘量不要太看重候選人對 API 或者語法糖的熟悉程度，主要還是綜合能力與素質。
題庫的話我是按幾個方向去分類的：
- 必修型：
CSS/HTML/Javascript/HTTP & 瀏覽器/工具 & 工程化 - 選修型 (optional)：
框架 (vue react angular)/Node - 跨界型 (optional)：
Hybrid & JsBridge/React Native & Weex/Electron & NW/微信小程式
我的一個實踐是按類歸納問題，從上到下按複雜程度或者難度羅列知識點，從左到右按深度羅列該知識點的問題及擴充套件。
（不過不可避免的是，問題涉及多個類，html經常和css相關什麼的……）
先講使用姿勢吧：
- 不全問，隨機挑選，適當深入（比如能力強的候選人直接開靠後的、靠右的題）
- 題庫是籠統的知識點，最好做拆分，包成具體、清晰的問題給到面試者
- 部分題只適合筆試、程式設計
比如我的部分 CSS 題庫：
- css 是大小寫敏感的麼 （無關痛癢、純屬調戲候選人）
- css 常用的長度單位有哪些 （
px pt em rem vw vh vmin vmax ex ch% 等等 ）→ rem 具體定義？ → vw vh 具體定義，為什麼沒廣泛使用，相容程度？ position定位取值、預設值 （這個能刷不少人） → absolute 定位規則 → sticky 定位規則 → 三個同級 div 給第二個 div 只設置position: absolute會發生什麼 → 文件流 → 不脫離文件流的 fixed 定位方式有想法嗎- 選擇器優先順序及計算方式 → 屬性選擇器 （ 如何高亮跳往特定 domain 的 a 標籤 ）
- 垂直居中 （爛大街問題，略）
- 設定元素隱藏的
visibility: hidden / display:none / opacity: 0有什麼區別、具體使用場景 box-sizing是個啥 → 設定背景顏色會影響 margin padding border 的哪些區域？- 偽元素，
::after / ::before什麼用 - 移動端 1px border 怎麼畫 → 那 1px 帶圓角的邊框呢 → 多重邊框怎麼畫
flex佈局有了解麼？ → 主軸副軸 →Grid佈局呢@import載入樣式有什麼缺點 → 怎麼避開這個缺點@media媒體查詢有用過麼 → 如何用這個做響應式 → max-xxx & min-xxx 是開區間麼？（這個是調戲）- 哪些樣式會觸發迴流、重繪？→ font-size 會不會觸發迴流 → 容易迴流的樣式修改如何優化
BFC的概念及生成 哪些樣式會新建composite layer→ BFC 與 composite layer 的關係 → composite layer 過多的優化icon-font有了解麼 → 怎麼使用自定義的中文字型 → 怎麼減少開銷Data URI Scheme可以表示哪些型別的資料 → 效能有了解麼
個人體驗是前十題挑著問幾個就差不多了。
HTML 題庫：
- html5 新增了哪些標籤 → 怎麼做相容？ polyfill ? → 過氣了的 “語義化” 是個啥
- 為什麼樣式會放在
<head>裡 →<style>標籤放在一個 dom 節點裡會發生什麼 - html 裡面 src 和 href 有什麼區別 → img 的 alt 和 title 有什麼區別
- meta 標籤中 viewport 能控制什麼 → 設定成
width=device-width, initial-scale=2.0會怎樣 - dom 中間嵌了一段阻塞的指令碼，比如說
alert(0)會怎麼顯示 → 加了defer / async呢？ - 怎麼判斷一個 dom 元素在頁面上的真實顯示效果？比如說顏色、那麼字型呢？
- 如何擴大一個元素的事件響應區域 → 優缺點
- iframe 怎麼設定 → 有哪些安全性的設定 → 怎麼和父文件互動
- 巢狀 a 標籤會發生什麼 → 如何解決解析問題？ （ 內部的套
<object>標籤 ）
html 和 css 都是比較基礎的、所以實際用的時候問的題都不多。
HTTP & 瀏覽器 題庫：
- 瀏覽器載入頁面發生了什麼
- http 狀態碼有哪些 (不推薦問生僻的) → 什麼時候會出現 304 → 協商快取，介紹下
Cache-Control / Last-Modified / Etag ...的具體規則 - 頁面資源載入的併發限制怎麼來的 → 怎麼突破
cookie一般用來做什麼 → 資料格式、如何設定、有效時間、安全性？ → 寫一段解析和設定程式碼（可選） → 沒有 cookie 及其他瀏覽器儲存做登入態的情況下，如何定位同一個匿名使用者（瀏覽器指紋）localStorage sessionStorage是什麼，區別在哪裡 → 什麼情況下會失效？- CDN有哪些作用 → 為什麼會不同域名
- http 1.0 和 http 1.1 的區別 →
http 2.0和http 1.x的區別 → 多路複用、https、服務端推送如何實現？ - 如何除錯效能，看哪些指標 → 首屏載入優化怎麼做，能做到什麼數量級 →
SSR相關細節 →QPS相比於客戶端渲染會下降麼 → 主要瓶頸在哪裡，怎麼解決？ DOMContentLoaded和loaded有什麼區別 → 監聽這兩個事件有什麼實際應用- 迴流重繪的優化
- PWA 有了解麼
Javascript 題庫：
- js 基本型別和引用型別，區別 → 如何判斷兩個變數全等 → 三個等號判斷全等的例外情況 （
NaN) →'123' / new String('123')的區別 →Symbol的實際使用場景 - js 如何建立塊級作用域
- js 只有詞法作用域 怎麼理解這句話 → 閉包是什麼 → 怎麼做模組化管理
正則表示式→ 貪婪匹配與非貪婪 → 怎麼寫郵箱的正則匹配- 如何判斷陣列 → 常用陣列原生方法有哪些 → 哪些會修改陣列 →
map reduce forEach第二個引數是幹啥的 (不推薦API細節) → 原生sort使用的是哪種排序演算法 - 原生事件繫結 → 第三個引數如果是布林值表示什麼 （
事件模型）→ 第三個引數如果是物件呢，passive事件是否有了解 - ES6 是否有使用，常用哪些語法 → 監聽函式和普通函式的區別 （
arguments什麼的 ） →Promise相關 Proxy能做什麼async await解決了什麼問題，和generator yield那套的異同點- 跨域請求怎麼寫 →
jsonp最主要的原理 / cors 怎麼做 /iframe跨域 / 標籤 src 跨域…… 細節 Event LoopJS 事件迴圈描述一下 → Node 中的事件迴圈 →timers / microTaskQueue / nextTickQueue / poll等概念有了解麼
Ps. js相關問題在面試中吹水容易 “務虛”，建議少問，更多依賴筆試題、程式設計題情況。
工具 & 工程化
git→revert / reset / rebase的區別 →cherrypick什麼用 →git flow是怎麼協作的- 正向代理和反向代理的區別 →
nginx如何配置，可以根據哪些規則轉發（ 域名，埠，協議等 ）→ 如何做負載均衡 lint是否有使用babel是否有使用 → 踩過哪些坑webpack做了哪些工程化的事情、有哪些好用的功能 → 打包慢怎麼優化- 理想的前端釋出方式是怎麼樣，機器打包，內容分發，版本管理，快速回滾，快取問題
框架類
angular的髒檢查為什麼“髒”，對比其他兩框架- vue 怎麼做雙向繫結 → 元件生命週期 →
created和mounted對比 → 父子元件巢狀的情況下生命週期觸發順序 →$nextTickapi具體是滿足了什麼需求 → 為什麼使用vuex react元件生命週期 → 元件更新前後分別發生了什麼 → 為什麼會有純函式元件、高階元件的概念 → 元件設計的時候有沒有考慮元件的邊界在哪裡？（ 哪些應該state內部維護，哪些應該props傳入，哪些應該有回撥函式 ） →redux原始碼有了解麼，更新狀態樹的時候內部還執行了那些操作 →react經過打包出來的程式碼結構是怎麼樣的，和vue打出來的有哪些異同react / vue / angular如何做效能調優- 使用了
ssr的如何做效能調優 - 前端框架中使用的前端路由是怎麼實現的，
hash / history兩種模式的區別，相容性
Node
- 怎麼脫離回撥地獄
Koa相關 →MVC相關 → 怎麼設計一個日誌框架- 怎麼部署 node 應用 → 如何監控 node 應用正常執行
- Node 事件迴圈
- 其他都是偏後端的了，略……
跨界型大雜燴
jsbridge怎麼實現的 → 限制在哪裡 → 和RN / Weex / 小程式這些的區別RN怎麼實現的 → 如何用原生封裝的模組給 js 呼叫 → 踩過哪些坑 → 效能優化怎麼做 → 如何做多端複用小程式踩過哪些坑，現有的問題你覺得是什麼 → 五層頁面跳轉的限制怎麼做 → 頁面多計時器如何維護（即秒級setData的情況下如何做優化）→ 如何做元件化，自定義元件有哪些問題Weex沒寫過也沒接觸過，不會問相關題目 (:з」∠)Electron和NW的區別 → 應用架構是怎麼樣的 → 相比於 web 前端還能使用哪些 native 資源 → 怎麼做視窗間通訊 → 怎麼科學打包
其實題目基本源於自己的工作經驗、學習內容，還是要多提升自己~~
然後建議是無論電話、視訊、現場，都控制時間在 30——40min，有程式設計題的適當延長。
（有空再補充一些程式設計題）
一些常見情況的應對方式
Ps.在目前公司是這麼做的，不同公司、團隊流程不一樣
-
面試者問印象或者結果
婉拒，如果清楚流程的話最好反饋一下能給到結果的時間點。
-
面試者水平比較差
20min 結束面試，並記錄好細節。
-
電話面試覺得很ok
直接約現場或者遠端程式設計。
總結
如果你覺得不錯，或者發現文章中的錯誤，或者有更好的建議，歡迎評論或進前端全棧群交流討論，866109386。 （PS：內有大牛分享 css webpack node vue angular react 面試 等等的相關內容。）