前端面試忽悠師入門，教你如何從容面試。

時間 2019-11-17

標籤前端面試忽悠入門如何從容欄目快樂工作简体版

原文原文鏈接

去年回杭後，除了在新的公司沉迷業務開發、業餘吹水以外，趁着人手不足順便作了些電話和現場面試的工做（固然主要是面向初級前端崗候選人）css

從兩年前初入行的校招生，到現在扮豬吃老虎的面試官，感受能夠寫篇文章介紹下本身的面試心得和套路、html

~~充實下一年未更新的「技術博客」~~前端

列了個大綱:

前端面試忽悠師的戰略目標及基本功
如何正確地 尬聊
經常使用題庫及使用姿式
一些常見狀況的應對方式

前端面試忽悠師的戰略目標及基本功

戰略目標

用「簡要」的話來講，是在較短的時間內儘量地瞭解候選人的技術能力、成長空間、過往經歷及將來規劃等信息，爲團隊招到靠譜的夥伴；同時做爲公司的門面，展現團隊的技術實力和工做態度。vue

基本功

面試自己上是一次雙向選擇的過程。電話、視頻和現場面試對候選人來講通常是比較可貴的經過在職工程師瞭解團隊的機會，良好的工做習慣和態度會顯著提升雙方的體驗，能夠說是一門基本功。html5

好比:node

提早約好時間、告知可能須要佔用的時長而且如約而至
提早閱讀簡歷，作簡單的筆記（好比上面寫的哪些項目想展開了解、哪些技術能力須要用什麼問題考察）
營造認真、開放的探討氛圍，提高候選人對團隊的承認度
用簡明高效的表述下降的溝通成本，節省面試時間
過程當中作筆記或錄音，採集更多的信息從而輔助後續對面試結果的決策等等

如何正確地 `尬聊`

不少剛開始作面試官的同窗很容易把天聊死，或者進入空氣忽然安靜的環節。在面試前提早準備一個「劇本」，或者用一個固定的、慣用的「套路」會好不少。react

我的的面試習慣（套路）是，不管是什麼類型的候選人（校招 / 社招），起手是讓對方來段簡單的自我介紹，然後按照入行的緣由 / 契機、上一份工做或實習的狀況、爲何想換團隊以及對將來工做的指望這個順序聊下來。 「前戲」 通常不超過6分鐘，遇到比較會聊的候選人應該及時拉回來或者開啓下一個話題。webpack

有了上面的無壓力的溝通作鋪墊，基本能夠稍微瞭解對方的狀況、交流的風格甚至我的的水平和視野。nginx

然後能夠直接進入正式的環節，若是對方有前端的工做經驗，我會更傾向於按照簡歷的內容作面試，既然是寫在簡歷上的，應該是候選人真實經歷過的業務場景、技術需求，至關於給予對方主場做戰的機會。好比詢問在以前團隊作了哪些項目，而後抓住項目中的一些問題和需求點展開去問解決思路、技術細節、實際成果、反饋等信息。把每個項目經歷當成一棵樹遍歷下去，很快就能探到這些內容是否真實和候選人的技術層次。不過經常會有項目技術深度不足的狀況（畢竟我遇到的初級崗比較多……），那麼就在下文概括的題庫中臨時找幾個相關的問題提問。git

另外一種狀況，若是工做經驗不足或者幾乎沒有（好比校招生、實習生），建議加一個小問題，好比是怎麼學習前端的，瞭解下對方的學習能力和方式。然後便讓 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 Loop JS 事件循環描述一下 → Node 中的事件循環 → timers / microTaskQueue / nextTickQueue / poll 等概念有了解麼

Ps. js相關問題在面試中吹水容易「務虛」，建議少問，更多依賴筆試題、編程題狀況。

工具 & 工程化

git → revert / reset / rebase 的區別 → cherrypick 什麼用 → git flow 是怎麼協做的
正向代理和反向代理的區別 → nginx 如何配置，能夠根據哪些規則轉發（域名，端口，協議等）→ 如何作負載均衡
lint 是否有使用
babel 是否有使用 → 踩過哪些坑
webpack 作了哪些工程化的事情、有哪些好用的功能 → 打包慢怎麼優化
理想的前端發佈方式是怎麼樣，機器打包，內容分發，版本管理，快速回滾，緩存問題

框架類

angular 的髒檢查爲何「髒」，對比其餘兩框架
vue 怎麼作雙向綁定 → 組件生命週期 → created 和 mounted 對比 → 父子組件嵌套的狀況下生命週期觸發順序 → $nextTick api具體是知足了什麼需求 → 爲何使用 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 資源 → 怎麼作窗口間通訊 → 怎麼科學打包