說在前頭
所有的面試官、技術主管都是從應聘者的身份過來的，相信大家都有非常豐富的面試經驗，裏面有發展中的創業公司，有達到一定規模的上市公司，也分獨資的、合企的，有開發團隊百人以上的，也有少數精英團體的。但在應聘者角度下以下幾種情況常有發生：
1、筆試題太偏太難或不符合當前應聘者的水準導致刷掉。
2、太久沒接觸一個框架（例Vue）導致面試答不上來。
3、面試官問冷門知識導致只瞭解了應聘者局部技術從而被刷掉。
4、……
但這些 ——
都是面試官的問題！
不服？讓我們擺正姿態，重新瞭解下作爲考官該如何面試
一、迴歸初心
當我們還是應聘者時，什麼是最不想被問到的？
1、用不到的東西（例如：JQ的triggerHandler）
Excuse me ? 用JQ庫的情況下真的有用到過這玩意嗎?
2、冷門知識（例如：console如何查看調用棧以及table格式輸出？）
我選擇console.log()
3、概念性題（例如：盒子模型的構成）
當時做了2年前端，問了面試官一個問題 " 啥是盒子? "
4、沒意義的提問（例如：undefined == null 輸出啥？）
wtf ?
5、……
以上只舉例了幾點，諸如此類還有很多。同樣，這些題目
面試官最好也不要問
爲什麼說是最好不要問，而不是不要問，舉例概念性題目：
什麼是閉包？
這也是前端面試官較爲常見的問題，但事實上有些人答得好，矇混過關了，其實他並未寫過，也不瞭解其中作用域的關係。而有些人其實會寫並瞭解其中的要害，卻不瞭解其名詞導致答不好（多指向1 ~ 3年開發人員）。所以概念性的問題並不能真正瞭解使用者的水平，考官必須書寫代碼徐徐問之或舉例說明（3 年以上除外）。
二、到底什麼是面試？
/* --- 百度百科 ---
在特定場景下，以考官對考生的面對面交談與觀察爲主要手段，
由表及裏測評考生的知識、能力、經驗等有關素質的考試活動。
*/ ----- END -----鏈接：百度百科 - 面試
這是百度百科出來的結果，比較常規也比較籠統，但如何做到由表及裏，如何做到等有關素質呢？請看以下乾貨。
三、什麼樣的開發經驗請問什麼樣的問題（不定時更新）
勿作高深，勿示輕浮
這裏分四個階段
1）應屆小萌新
2）1 ~ 3 年的前端小生
3）3 ~ 5 年的前端老油條
4）5年以上的前端資深開發
5）通用的面試問題
1）應屆小萌新
/*
應屆生還是多問些基礎的，難度應由低至高層層推進
並且着重觀察他的言行舉止，語言表達能力
（水平低沒事，必須要有好RP、好學、吃苦耐勞的精神）。
*/1 - css：css的命名規範（非less、sass的情況下）
考察樣式語義化,是否有駝峯式、bem的思想，順便了解結構上樣式的寫法。
2 - css：佈局上左DIV寬固定，右DIV寬度自適應的css樣式寫法 || 佈局上中間DIV寬度固定，左右邊寬度自適應的css樣式寫法 等
考察佈局的具體實現。
3 - css：舉例說明能實現動畫的css3屬性
4 - css：css中定位的種類，以及具體用處
答得少沒關係，但必須要了解定位的作用，以及絕對定位與相對定位的搭配用法情景。
5 - css：css中實現垂直居中，水平居中的方法（不分行內以及塊級元素）
考察常用的情景。
6 - html：詢問標籤規範（例DIV）
考察標籤嵌套規範，ul > li > a 等，拒絕 dl > div 之類的，以及語義化等。
7 - html：對H5的認知
考察廣度。
8 - js：獲取節點並修改樣式（例如修改color = ‘red’）
基礎題必須對。
9 - js：如何獲取數據並輸出節點
這裏要用Star追問法。
1) createElement創建節點獲取數據後配合for遍歷輸出
2) JQ的append輸出
> 如何使用字符串拼接
> 換行該怎麼處理
> 單雙引號存在該如何?如果說ES6，繼續追問。
> ES6瞭解多少 ...（到這裏其實已經滿分了）
> 考察下JQ的函數使用的熟練度（常用的節點操作）
10 - js：如何將字符串‘ABCDEFG’處理爲CDE
考察常用JS函數（indexOf、substring、slice等）以及length的使用方法
如果提到replace則加分。
11 - js：輪播圖的具體實現
考察left、transform、定時器以及功能實現上的邏輯問題。
12 - js：滾動刷新的具體實現
考察滾動條事件，js獲取數據渲染輸出的邏輯問題。
13 - js：多個頁面中，他們都含有相同的頂部以及尾部，你該如何處理?
根據Star追問
1) 多個頁面複製粘貼相同的dom代碼片段
> 如果在此處發現一樣式bug，豈不是全部要批量操作?
2) 封裝JS函數並輸出
> 考察封裝的質量
3) 以iframe加載代碼片段
> 父子間如何交互
> 跨域的問題以及劣處
4) 監聽hash路由的變化，JS對其進行獲取數據重載節點
> 路由如何監聽（基本上滿分）
14 - js：描述下前端的趨勢以及框架的瞭解
考察廣度。
2）1 ~ 3 年的前端小生
/*
1 ~ 3 年是最吃香的年限，是機遇最多的年限，也是龍蛇混雜的年限。
在這裏有培訓出來造假3年工作經驗的，也有3年經驗卻真實水平不足2年的，
還有1年經驗頂人家2年的人才。
對於考官來說，此處應以“壓迫式” + “隨意式” 配合Star追問。
*/1 - css：css的命名規範
考察樣式語義化,是否有駝峯式、bem的思想。
2 - css：左右邊寬度自適應的css樣式寫法、定位的運用情景以及垂直居中的具體實現
這裏是開始懷疑應聘者真實水平的情況下才開始問的，如果不行則中止。
3 - css：舉例說明能實現動畫的css3屬性
也可問
4 - css：響應式以及自適應的具體實現
考察em、rem、vh、vw以及媒體查詢。
5 - html：對H5的認知
對公司相應的崗位進行Star追問，這裏舉例：canvas
1) canvas的原點座標在哪開始
1) 瞭解貝塞爾曲線嗎?
> 如何實現花瓣順時針中心旋轉動畫的具體實現
（從如何做花瓣開始，考察邏輯）
2) 實現可拖拽的兩個dom節點之間連線並在兩線之間顯示數據
（考察算法）
鏈接：花瓣順時針中心旋轉動畫
6 - js：封裝一個JQ函數（例如：$(‘#demo’).css(‘width’)）
考察函數庫的封裝質量
7 - js：跨域的實現以及解決方案
考察是否有跨域的經驗以及處理方案，解決方案不下5種，這裏就不一一簡述
8 - js：什麼情況下會形成閉包
這比“描述閉包的概念”會好很多。
9 - js：JS實際運用題目一
var a = {
b: 123
}
var b = a
b.b = 321
// 描述下執行經過以及導致的問題> 考察地址指向性問題，答對則拋出如何實現對象深淺copy
> JSON.stringify深copy時會有什麼問題
10 - js：JS實際運用題目二
var a = function () {
return function () {
alert(3)
}
}
// 如何執行到alert(3)考察函數理解。
11 - js：JS實際運用題目三
var a = {
c: 123,
b: function () {
console.log(this.c)
}
}
var b = a.b
b()
// 輸出什麼結果考察作用域鏈。
12 - js：多個頁面中，他們都含有相同的頂部以及尾部，你該如何處理?
這個也可問，不過這兒除了考察路由方面也考察是否運用模板引擎以及模塊化加載，組件引入等。
13 - js：熟練運用哪個框架（這裏舉例：Vue）
根據公司熟練的前沿框架進行相應的提問，例如：
1) 組件間交互
2) 如何封裝自己的組件並外部傳參
3) 用什麼UI庫（例如：iview，btn組件上添加什麼屬性可實現寬100%）
4) Vuex的功能描述以及運用場景
5) Vuex的數據是儲存在哪兒的（考察作用域鏈以及spa的理解）
14 - js：熟練運用哪個UI庫（非定製框架的庫，舉例：layui）
根據公司熟練的UI庫進行提問，瞭解熟知的深淺，例如：
1) select下拉選擇框的功能樣式實現
2) table模塊的寬度自適應BUG
15 - js：es6的瞭解程度
1) let與var的區別
2) 繼承中的super實現了什麼
3) promise解決了什麼問題
> 如回答非嵌套問題，則以其他能實現的方案進行逼問（例如：callback）
> promise返回的對象是什麼對象，能返回一個值並賦於其他對象嗎?
> promise.all中的請求其中一個掛掉，其餘會如何?
16 - js：node如何封裝模塊以及對其調用
考察commonJS規範與es6是否混淆。
17 - js：webpack中import導入如何自定義前綴路徑
考察resolve.alias的實際運用。
18 - js：package中如何設置自定義指令
基礎題。
19 - js：webpack構建的項目中包含多個入口，如何設置服務器起始頁
HtmlWebpackPlugin插件實現、package修改server指令實現、配置devServer實現等。
20 - js：webpack中有什麼方法可讓目錄下的所有文件原封不動的打包至dist下
考察基礎插件CopyWebpackPlugin。
21 - js：以jq的方式獲取該頁面中含此屬性值的所有節點（例如：a標籤下有data-id = ‘F’去獲取）
考察jq基礎。
22 - js：jq節點的操縱
考察find、closest常用函數。
23 - js：js監聽滾動條的情況下，滾動一次觸發多次該如何優化
考察應聘者思路以及節流的思想。
24 - js：=== 與 == 差異
考察基礎。
25 - js：如何執行一個匿名函數自調用
考察基礎。
26 - js：描述下JS代碼書寫是否有統一的規範
考察beautiful.js、格式化、eslint等。
27 - Browser：谷歌控制檯的快捷鍵（斷點F8、F10以及ctrl+p、ctrl+g、ctrl+shift+f等）
這個尤爲重要，側面考察出控制檯的熟練程度，對問題的快速定位，斷點以及需求變更的整改效率。
28 - Browser：如何查看網站的性能以及提出優化方案
如涉及到服務器性能要好，後臺代碼規範並進行壓力測試則說明他的知識面很全。
29 - other：描述一下上一家公司的產業鏈
如缺少UI、測試等環節，可進行壓迫式逼問，各個組員間所扮演的角色，他所扮演的角色以及項目成果收益。
30 - other：你所遇到的最麻煩的技術砍是如何解決的
必考題，考察技術砍以及瓶頸，大致三類即可摸清應聘者技術水平：
1) 數據交互問題，頁面佈局問題（低）
2) 具體功能的實現，例如：上傳圖片前進行canvas剪裁併居中處理（中）
3) 複雜的算法優化、架構考量以及百度難以查到的問題（例如：廠家硬件對接的b/s控件問題）等（高）
31 - js：_proto_ 與 prototype 的差異
3）3 ~ 5 年的前端老油條
/*
3 ~ 5 的前端市場並沒有前者廣，但說是人生的巔峯也不爲過
不光薪資比前幾者高出很多，並很有可能從PC端到Mobile做了個遍
項目盈利以及架構方面也有自己的見解
所以這裏應以 “情景式” + “問題試” 發問。
*/1 - other：你所遇到的最麻煩的技術砍是如何解決的
必問題，先探底。
2 - other：某一項目中你所扮演的角色
審查應聘者能力，以及在需求無法達到時的做法。
3 - other：github上是否有開源的項目以及star、fork量
考察貢獻量，一般不得少於20，以及Star追問
1) 開源的是項目
> 是什麼類型的項目，是否可迭代，頁面的維護成本等
2) 插件
> 是什麼類型的插件，是否模塊化依賴，如何封裝的等
4 - other：逛過哪些社區，是否發表過文章，關注度是多少?
考察社區活躍度，例如：掘金（收藏不得低於500，閱讀量不得低於5k）並Star追問
1) 什麼類型的文章
> 爲什麼發表該文章，以及解決了什麼問題等
5 - js：對框架實現上的理解（例如：Vue）
1) 以原生的角度去探討Vue單向數據綁定是如何實現的，雙向呢。
2) v-for v-if 的模板語法是如何實現的。
6 - js：是否搭建過原生框架
考察框架的理解，這裏有大幅篇章可Star追問
1) 技術棧是什麼，爲什麼採用該架構（例如：webpack+layui+jq+artTemplate等）
1) 目錄結構的詳解
2) 路由的原生實現以及與組件間的關係（比如參照了Vue思想）
1) 是否採取路由中心化管理（考察路由的複雜性）
2) 框架上手的難易程度以及如何進行開發（比如路由懶加載JS進行添加配置項模塊化添加組件/模塊）
> 框架是否提供創建過程化控制（組件/模塊是否含有創建週期，頁面是否含有生命週期）
3) 是否爲多頁面，是否有迭代的關係
> 業務與框架間的關係（考察業務的擴展性是否會所導致框架不滿足）
1) 迭代項目與腳手架的關係（考察是否以node.fs寫插件）
2) require的解析機制（一般迭代框架都爲動態添加的組件，這裏涉及到require預解析以及正則的坑）
4) 架構後期升級的空間（考察框架擴展性以及維護成本）
5) 框架的技術維護層級（一般爲三級，一級能快速開發，二級修改項目需求的繼承擴展，三級修改底層，插件等）
> 三級底層組件/插件間的耦合關係（考察遷移、複用性）
> 二級的擴展思路
> 一級開發流程
......
7 - js：描述下cli腳手架、less預編譯等的實現原理
考察node文件系統
8 - js：請講下beautifulJS格式化的實現思路
考察JS水平深度，對節點<>的解析過程。
9 - js：講述下你對微軟的ts與flow的理解
考察廣度以及自身理解。
10 - js：描述下對js柯里化的理解以及偏函數的應用場景
考察對底層搭建以及封裝插件的思想，面向過程化的極致。
11 - js：對重構的理解，爲何要重構
對簡化結構、可讀性、性能優化等的理解從而進行相應的Star追問。
12 - js：描述下你理想中最好的框架以及具體功能的實現
沒有最好的框架，只有最合適的框架。
13 - other：你理想中完善成熟的產品應是如何的，前後端，產品經理將扮演什麼角色?
示例：完善的產品應是由產品經理在可視化選擇界面進行頭部、內容、尾部等組合，生成相應的網站
以示予客戶演示觀看，對未有滿足的模塊派發於UI製作至前端開發，進行模塊創建、上傳，審覈等模塊迭代
對應的模塊也應有對接數據的API與後臺接口配對，真假數據一鍵對接等。
（這裏舉例echarts可視化定製下載）
14 - js：瀏覽器渲染的過程以及對迴流與重繪的理解
這裏答個大概即可，如果一板一眼的符合多半是死記的。
15 - other：談下你對前端的趨勢
最近有掀起對PSD進行解析的智能書寫代碼的AI，亦可談談你的想法。
16 - js：對前端IDE的選擇以及趨勢
17 - js：對webpack以及gulp混合使用的理解
18 - js：如何實現對代碼規範的統一
19 - js：如何對前端代碼異常日誌的收集以及監控
20 - js：this指向問題（重點考察es6與es5函數作用域）
21 - js：談談react / vue / ang對SPA與SSR的理解
4）5年以上的前端資深開發
/*
普遍3年以上的開發人員都面臨着市場逐步降低，更別說5年以上的了
爲什麼5年以上的前端應聘者來面試的那麼少
一來是因爲轉行管理或產品層，尋求更高的發展空間
二來是因爲隨着時間的沉澱，人也不願整天跳槽，開始尋求穩定了
這裏如還有來面試的，則進行前端的討論，想法的交換即可。
*/這裏給不了太多意見了，大牛僅面試過p6、p8的兩位，順便來分享分享，前者是因爲工作壓力太大，出來找尋一起研發的技術團隊並他不願當技術主管，後者技術超前，流行es6時，他便開始ts開發，但要求項目分紅，近年來上市等這樣的情況。
那這邊只需要查看對方的技能是否對口，是否有重構以及掌握整個研發部門，撐起技術leader的心即可。
5）通用的面試問題
1 - other：簡單的自我介紹一下
快速瞭解對方姓名、開發經驗以及技術崗位。
2 - other：介紹一下該項目的上線流程
從原型設計至測試上線，少一環就壓迫式逼問。
3 - other：如何看待前端開發的趨勢
考察你眼中的前端開發。
4 - other：平時是如何學習前端開發的?
考察學習途徑。
5 - other：未來幾年你是如何規劃的
考察是否有人生規劃。
6 - other：你遇到過最難的技術砍是什麼，並如何解決的?
可給考慮時間，摸底題。
7 - other：該功能實現不了時，該如何解決?
能想到‘砍需求’的示爲正解。
8 - other：產品一而再，再而三的改需求時該如何應對?
要麼個人問題，則投訴，要麼公司制度問題，則跑路。
9 - other：你有什麼要問的?
要麼沒話聊了，要麼通過了。
三、公司的優缺點不可不談
不能只光談我司怎麼怎麼好，缺點一樣要給應聘者指出，要足夠尊重應聘者，給予考慮空間。舉例：
1、公司流動性略大
2、加班多且不規律
3、可能出差（省內外）
……
四、態度端正
這不光是考官態度要端正，應聘者也必須端正，埋頭玩手機的，表達不清晰的，有一句答一句精神狀態不佳的以及裝大手，撒謊的 ——
通通不要
面試必須遵循態度第一，技能第二的原則，如反之，則會爲未來的協作開放埋下深深的大坑。
結束語
每條路都是一座大山，
每個人都是一隻螞蟻，
只有在不斷的交織與錯過中，
逆流而上，
才能識的本心，
才能茁壯成長。
直至變成 ——
一隻大螞蟻
關於
make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）