BAT面試官：一文帶你讀懂前端面試套路

名詞解釋

程度副詞

對於不一樣程度的詞，個人理解以下：

精通：

• 瞭解背後的原理和規範
• 動手重寫過實現代碼
• 能夠以此爲基礎作二次開發

掌握：

• 曾在項目中大量使用過此技術
• 能夠自如的使用這項技術進行開發
• 參與技術社區討論或者寫過相關文章

熟悉：

• 曾在項目中使用過
• 通讀過相關文檔
• 能夠快速對相關問題定位到文檔內容中

瞭解：

• 未在開發中使用過但寫過Demo
• 閱讀過相關文檔
• 能夠用五分鐘時間向他人介紹這項技術的特色和應用場景

不瞭解：

• 只是聽過名字
• 只是看過文檔
• 沒有寫過關於這項技術的代碼
• 須要同時具有當前等級全部特性；

高等級描述包含低等級描述特性。

很是多簡歷中寫到的瞭解，實際上是不瞭解，熟悉和掌握可能每每只是瞭解的水平。

手寫代碼：

能夠藉助emmet或者編輯器的提醒，非複製粘貼整段代碼的方式書寫代碼。

記憶性考察：

須要背下來的內容，不能夠藉助搜索引擎。好比大多數關鍵字的拼寫，對於超長關鍵詞能夠藉助編輯器完成輸入。

一些經常使用的知識點也會要求記憶性考察，好比盒模型和選擇器規則，由於平常使用頻度較高，理應記住。

索引性考察：

能夠一次性在搜索引擎經過技術關鍵字找到解決方案。好比：

咱們但願作一個特殊效果的輪播圖，文字和背景圖不一樣步滾動，背景圖每次只是水平偏移一小截，文字則是整頁的滾動

面對這個描述可以識別出搜索關鍵詞爲「視差滾動」

理解性考察：

要求可以經過代碼的方式展示知識點以及和其餘知識點的對比。

可以在某應用場景內設計出該技術的使用方案。

可以講清其背後的數學原理或者邏輯關係。

面試意圖

正面

是否具備工做崗位所須要的最低能力 是否有過相似項目開發經歷 是否掌握工做崗位所需技能 現場編碼解決問題 正確使用搜索引擎 可以對以前項目中使用過的技術作出詳細解釋 是否對技術有熱情 有在線可訪問的代碼 有技術博客 在技術社區積極回答問題 關注新技術，而且作過官方demo之外的案例 平常使用技術解決生活中的問題 成長空間 計算機專業背景 良好的算法基礎 良好的表達能力 作過技術文章翻譯 有至少一項5年以上的愛好

反面

• 對冷門知識點作記憶性考察
• 對過期知識點作解釋型
• 以回答出問題的個數做爲錄用指標
• 面試應該像測視力同樣，一開始從最容易的問題入手，逐步深刻，直到沒法正確回答。

若是面試中面試者沒有回答對任何問題或者回答對了全部的問題，都不是一次成功的面試。

面試方式 （針對指望薪資8K~12K的候選人）

瞭解職業經歷，確認工做內容。

經過場景歸納出技術能力範圍。

面試前確認，模糊的地方在開始的時候確認。

參與了哪些項目，在項目中扮演什麼角色，完成了哪些編碼工做。

工做的流程是怎麼樣的，是否有規範（好比gitflow）工做的經驗。

按照簡歷的技能列表挑選比較鮮明的作提問。

對於基礎知識，好比HTTP協議，以記憶性考察爲主；對於正則\路由\promise等技術若是不是近期項目使用過，可是聲稱掌握，可放寬爲索引性考察。

我經常會進行一個額外的環節，就是讓面試人在簡歷中圈出真實技能，排除注水內容，而後只對圈出內容進行提問。由於在我看來，環境所迫帶來的簡歷注水也不應等同爲面試人的品質問題，另外一方面，是否可以正確評價本身是程序員的一項重要能力。

正則的索引性考察： 給出10個（合法或者非法的）郵箱地址，讓面試者經過正則找出，同時打開一份文檔供查閱參考。要求五分鐘內寫出。

大約5~10個問題，主要引導面試者講述技術的原理，以及技術的使用形式，以及使用過程當中遇到的問題（參看附錄）。

好比面試者聲稱熟悉AJAX，我可能會問他AJAX使用了js的什麼對象（原理），什麼是異步函數（使用形式），跨域問題有沒有遇到過（問題），JSONP爲何能解決跨域問題（原理），jsonp返回的內容和json有什麼不一樣（使用），jsonp使用遇到過哪些侷限性（問題）...

按照這個層次遞進深刻，直到面試者回答吃力或者沒法回答。

通常不打斷面試者的敘述，哪怕說的是錯誤的，也會在整段講完以後再進行糾正，而後開始下一個話題。

作實際編碼的測試，主要考察編程能力。 選用基本的js題目作測試，好比

在聚會中常玩數七的遊戲，七的倍數和帶有七的數字都不能說，好比14,27,28。請找出1~100的不能說的數字。

考察的點有：

• 編輯器的使用
• 輸入習慣
• 快捷鍵使用
• 變量定義
• 循環
• 循環語法
• 循環的使用理解
• 取餘運算
• 條件判斷
• 字符串查找

儘可能選擇面試者有能力完成的問題，經過觀察編程習慣，好比是否使用快捷鍵（快捷鍵是判斷合格程序員的重要標準），是否過分緊張（意味着面對簡單的算法問題也很吃力），是否可以先輸入括號再輸入內容（10K的候選人真的不少都是從左往右寫代碼）。

舉例的題目是難度很是低的，實際考察的時候能夠適當提升難度，但不宜使用偏難怪的題目（由於可能更依賴靈感或者是否作過原題）。重點在於解決問題的過程當中體現的思惟方式，以及代碼的完成度（功能覆蓋，健壯性）。

一我的的平常編碼能力是又隨手寫下代碼的質量決定的，因此我不能接受無心義的命名，或者低效的循環，這意味着面試者沒有良好的編碼習慣，在之後的工做中可能也會寫出低質量的代碼。

總結

內容部分知識舉例說明了一些常見的技能列表，實際上會根據面試者的簡歷狀況設置問題。

記憶性內容做爲底線要求，若是不能達標，意味着基礎不牢，在往後的工做中會在不少基本的問題上搞不清。

編碼環節主要作搜索性考察，由於這是工做的常態形式。使用搜索引擎的能力決定了程序員的平常水平。

理解性考察對應的是知識點的理解和應用，是否可以把知識點運用到開發中，而且對平常開發中遇到的問題有本身的思考，反應的是面試者的潛力和發展。

附錄：簡歷技能點

如下是一些不推薦寫上的技能點

精通DIV+CSS

儘可能不要寫着一條，由於這是一個很過期的說法。

Dreamweaver

不是主流的開發工具，也不方便配合目前流行的前端工程化解決方案。

如下是一些常見的技能點，但願你們也可以幫忙補充。

精通HTML

這意味着可以正確理解語義化，瞭解新老標籤的特色和實用場景。

• 能夠經過觀察網頁，推測出背後的標籤結構
• 精通HTML標籤的嵌套規則
• 精通瀏覽器對較新標籤的兼容狀況及兼容解決方案

精通CSS

會細分一些方向，好比我對於兼容沒有很高的要求，不過若是你簡歷中提到以前作了不少兼容方面的工做，我會問這方面的問題，以確認你是否紮實的掌握了平常所需的知識。

原則上我會挑簡歷上提到的內容來提問，好比你沒有寫過掌握了flex，我幾乎不會主動去問。畢竟寫在簡歷上的內容就足夠問很長時間了。

事實上，至今我尚未遇到一個面試者能夠把簡歷上聲稱掌握的內容都完美回答出來，也根本沒時間去問一些（面試官）引覺得豪的知識點。

基礎方面

一些CSS中最基礎的概念，只要寫CSS就必定須要掌握的知識，好比盒模型結構，給出一段浮動代碼畫出顯示效果，可以對行內或者塊級元素在垂直和水平方向完成居中。

• 盒模型
• 浮動
• 居中
• 背景
• 字號字體
• 行內元素和塊級元素

佈局方面

對於主要從事頁面重構的同窗，會側重問佈局相關方面的問題。好比一些設計理論和這些理論的應用；PSD設計稿的規範也應該有所瞭解，也會稍微問一些PS的基本操做。

• 經常使用的IE Hack
• 常見的屏幕分辨率
• 響應式設計和自適應設計
• 柵格系統
• rem工做原理
• flex
• 動效方面
• transform
• transition
• 緩動曲線（貝塞爾曲線）
• animate（幀動畫，補間動畫）
• setTimeout

經驗方面

針對工做年限3+的應聘者，會提問一些CSS技巧問題，以鑑別是確有豐富的前端工做經驗，仍是一段經驗反覆用了多年。

• 浮動清除
• 怪異盒模型
• 文字基線
• 精靈圖和iconfont
• 陰影和邊框
• 精通原生JS

說實話，15K- 的簡歷上寫了這一條，基本上是要被虐翻的，老老實實的拆開寫，擅長哪部分就寫那部分。

另外我覺的好比DOM操做用JQuery也不算丟人，或者在理解HTTP協議的基礎上，不知道AJAX背後用的原生方法也不影響平常工做。有些部分不用刻意強調原生知識點。

會側重考察對於一個實際案例，如何設計技術方案。好比帶有遮罩的彈窗，有可能遇到按鈕響應多個函數的狀況，面試者可否意識到這是事件冒泡致使的問題，而且經過多個方法進行解決。

DOM

掌握原生的DOM操做

• 增刪查改
• 熟悉node和element對象

事件 關於事件的機制

• 冒泡和捕獲
• 事件委託
• 自定義事件
• Event對象

面向對象

瞭解面向對象的思想，可以以面向對象的思想構建應用。好比封裝一個日曆組件，設計對象所需的屬性值和方法。

• new方法
• 繼承，派生
• 原型和原型鏈

函數

• 熟悉Array，String等的方法
• call和apply方法的使用
• 鏈式調用
• this

熟練使用AJAX

• $.ajax方法
• HTTP協議方法
• 跨域
• restful API
• JSONP原理

熟練使用JQuery jquery最重要的是簡化DOM操做，以及適配瀏覽器兼容

• 增刪查改
• 修改屬性和樣式
• 編寫JQuery插件
• 事件隊列

類庫專題

bootstrap

做爲最爲知名的前端樣式框架，不管是在應用上，仍是學習中，都能給咱們帶來不少的價值。

• 柵格系統
• less/sass
• 頁面組件劃分
• 索引行考察組件的使用，要求手寫代碼

掌握swiper

• 通讀過swiper的API
• 索引行考察API的使用，要求手寫代碼

掌握underscore

• 通讀過underscore的API
• 理解鏈式調用背後的原理
• 最好閱讀過underscore的源碼
• 能夠手寫實現underscore的方法

框架專題

通用

• MVC
• 雙向數據綁定
• 單項數據流
• 組件化
• 生命期
• 路由

前端模板

• 橫向對比，所用模板的優勢
• 至少使用過兩種以上的前端模板

工程化

掌握gulp

• 索引行考察手寫gulp任務

掌握模塊化

• CMD標準
• commonjs
• ES6模塊
• babel如何使用
• webpack打包方案
• 異步加載
• 打包多個文件

掌握webpack

• 閱讀webpack文檔
• 理解配置文件結構
• 合併，注入生效代碼部分
• 熱更新

CSS

• 命名策略
• 嵌套
• 變量
• 函數

瞭解nodeJS 對於前端崗位，nodejs的使用主要集中在自動化和搭建簡單的數據服務器兩個方面。

• 是否上傳過npm包
• 斷點調試法
• express
• 插件
• 中間件
• 路由原理
• HTTP協議
• 數據庫查詢
• HTML模板（ejs，pug）

瞭解ES6

• promise
• Generator
• 花括號做用域
• class
• 數組遍歷（ES5）
• 嚴格模式（ES5）
• 模塊系統

開發工具 Sublime,Atom,Webstorm,Hbuilder等

• 平常使用什麼插件
• 使用什麼快捷鍵
• 應用哪些snippet