前端校招該考察什麼？一個面試官的思考

前言

我是團隊的一個老校招面試官，這幾年陸陸續續虐過很多校招學生，遇到過很優秀聊得很開心的，遇到過讓我直皺眉頭的，遇到過很懂套路的，也遇到過不善表達的。講真，面試前我還常感到緊張，我怕一個好苗子由於個人笨問題沒獲得充分挖掘而錯過。

因而我常常在想：什麼纔是好問題，前端校招該考察些什麼？

現又是一年校招季，想和你們分享下個人心得。

聲明：

1. 我一直都是一面面試官，因此個人思考看法是針對一面的，或者說知識面；
2. 每一個面試官都有本身的面試風格，好比咱們團隊就有一位一樣負責一面的，特別喜歡問圖形算法。因此你看了個人文章，以爲準備好了，結果被面試官問懵逼了，別怪我哈，我可不負責。我跟你們聊些通用部分；
3. 比我更有經驗的面試官比比皆是，本文僅表明我的拙見，不足之處望你們斧正。

核心思路

校招面試和社招面試會有什麼不一樣？我用一張圖說明：

校招面試應側重潛力考察。在前端這條路上，學習能力看你可否走得快，學習慾望看你可否走得遠。

那校招時前端知識就不重要了？

也很重要。只是說實話，當你工做後學校學到的知識可能都用不上了，由於工做場景跟你自學場景關注點不一樣。舉個例子，你在學校作前端開發，通常是單打獨鬥，但工做以後你就常常要跟別人合做開發，此時統一代碼規範、代碼要怎麼組織才能減小耦合適合多人協做，就要列入考慮中。又好比，你本身作前端可能會想着怎麼用新技術怎麼作更酷炫，而工做業務中則關注怎麼處理兼容性，怎麼監控並減小腳本錯誤保持項目穩定等等。更別提你在學校中怎麼學到如海量用戶場景的開發經驗？

因此對於校招生，相比不完善的前端知識積累，咱們更關注潛力。前端基礎是你得到面試機會的資本，而從前端知識掌握狀況折射出來的潛力特質，纔是你脫穎而出的亮點。

怎麼考察這些虛的能力？下文將作展開。

而做爲校招生的你，要思考的是怎麼把本身的學習能力和學習慾望證實出來，這比簡歷上你寫了多少行React代碼有份量的多。特別是面試大公司。

面試流程

這個就百花齊放了，我本身在不斷面試中總結出一套面試流程：

基本上這樣一套下來，面試者的總體水平也就很清楚了。不一樣公司團隊的一面流程不一樣，但上面幾點都是很通用的考察點。

通常咱們會面試超過一個小時，這樣才能作到全面瞭解，也是一種負責。若是實在太差，提早結束。

接下來我會重點說說前端基礎和項目經歷，我會考察些什麼。

前端基礎

你們常說前端開發易學難精，由於前端開發涉及的知識項實在不少，下面這張經典的圖應該很多人看過：

那校招學生該掌握哪些知識呢？因爲我在公司裏面負責講授《Web開發基礎概論》這門課，慢慢的我總結了前端開發的六項基礎知識：HTML、CSS、JavaScript、移動Web開發、調試、HTTP網絡知識。

這六項是我以爲校招學生的必備知識，面試時我會一一問到。若是你在這些前端基礎上都表現很差，那你就只能在學習能力上特別突出才行了。

HTML

前端編程語言基礎。我會考察：

1. 經常使用的meta頭；
2. 經過你對標籤語義化的理解來判斷你可否寫出更規範的HTML代碼；
3. HTML5新增的能力；
4. HTML的渲染解析知識，好比爲何CSS放前面JS放後面，怎麼理解並行加載串行執行（頗有趣的一塊知識，這裏不作展開）；
5. ……

CSS

前端編程語言基礎。像CSS Expression這種古董不作考察，IE六、IE7這種被時代拋棄的瀏覽器考察怎麼兼容它們有啥意義。我會考察：

1. 怎樣寫出更好的CSS，如層級不宜過深，如什麼時候用ID和什麼時候用class，如怎麼拆分組織CSS代碼等；
2. 盒模型；
3. 很是經常使用的CSS3知識，好比CSS3動畫，好比彈性佈局；
4. ……

JavaScript

前端最重要編程語言。這一塊相信你們很輕鬆能夠找到不少面試題，或者必背JS知識列表。這一塊我會考察 原生JavaScript知識，它是一切框架插件的基礎。我依然會問

1. 事件模型
2. 閉包
3. 原型鏈

等前端基礎知識，不過我會從單點逐漸深刻不斷拓展或者結合具體案例，看你是否真正的理解掌握。若是表現不錯我有時還會問瀏覽器的解析渲染原理，做爲一個加分項吧（DOM樹、渲染樹、重排重繪、分層渲染、爲何DOM操做過多會影響性能等）。

移動Web開發

我說如今移動Web開發是前端開發領域的熱點，應該沒人反駁吧？現現在移動應用層出不窮，移動Web開發知識變得愈加重要。若是你不懂移動Web開發知識，真的是落後於時代。我會考察：

1. 移動Web開發和PC Web開發有何不一樣？此題考察你對移動Web開發的總體理解，同時看你可否有組織有條理地思考問題；
2. 怎麼實現響應式佈局？考察你是否瞭解常見的佈局方案；
3. 移動端的手勢和事件；
4. 怎麼提升移動端頁面的渲染性能？針對移動端網絡，考察你是否能從減小HTTP請求出發提出解決方案，是否瞭解GPU渲染（偏進階）等；
5. ……

調試

開發中總免不了有bug，頁面運行環境總比想象中複雜，此時可否經過調試找到問題緣由自主解決，很是重要。我會考察：

1. 是否會使用基本的抓包工具、調試控制檯；
2. 怎麼從茫茫網絡內容中找到有用信息；
3. 移動端如何調試；
4. ……

HTTP

若是你連抓包知識都不會你談何調試？若是你連304的含義都不知道，你都想不通代碼修改後爲何頁面仍是老樣子？前端開發原本就要跟網絡打交道。這一塊我會考察：

1. 常見HTTP狀態碼；
2. 不一樣請求類型的區別；
3. 有什麼緩存方案以及怎麼實現；
4. ……

上面就是前端六項基礎知識。實際面試的時候我也會問一些綜合問題，好比：

1. 用戶從輸入url到最終頁面展現，這個過程當中發生了什麼？
2. 老闆反饋頁面打開白屏，而你手機上是正常的，怎麼辦？
3. 我頁面上有個動畫一卡一卡的性能不行，怎麼優化？
4. ……

這些基本上就是我考察前端基礎知識會問的問題。

可能有人會：咦咦咦，XSS、CSRF這些web安全相關的呢？面試社招生我會問，可是校招學生又有幾個真的有遇到這樣的場景，考察除了考背誦又有多大意義？

有人會：咦咦咦，怎麼不說跨域呢？同理，跨域在業務項目中前端和cgi域名分離或跨業務調用會用到，可是不必要求在校學生都要遇到過這樣的場景吧？

咦咦咦，那React、Vue這些總該問了吧，我這些都掌握得很是6呢？確實，我發現近兩年有些面試者React這些掌握得很好，提及來一套一套的，但他們原生JavaScript真的掌握紮實了嗎？我一直堅信，只要原生JavaScript知識掌握紮實，學習一個框架是很快的，並且無論之後流行框架怎麼變化，你都內心不虛。因此React、Vue這些是加分的，不是必備的。

項目經歷

我常在面試前花20分鐘，打開面試者簡歷上寫的Github、博客去看看。因此你若是隻是意思一下寫在簡歷上而實際上都沒怎麼打理，那你還不如不寫。我會根據面試者Github、博客的內容作些針對性的提問。前面環節你能夠說你恰好不懂某塊知識，但你本身寫的你總該掌握吧？我總能夠問深刻了吧？

面試時我也會根據簡歷上的項目經歷，詢問面試者具體的項目細節。你是否是隻會按圖索驥簡單用用框架？你是否是打了一箱醬油而後在項目中順便掛個名？這些我會不斷考察出來，若是是，扣分。而後我會對你項目中用到的技術棧作深刻考察，你本身作項目用到的知識，你總該掌握了吧？我總能夠問深刻了吧？

項目經歷除了考察知識，我也會考察通用素質。因此我常問一些開放問題：哪一個項目是你以爲最滿意的，爲何？你有沒有遇到過某個大難題，最後是怎麼解決？這時候你就應該把握機會把你比較突出的能力表現出來，好比堅持不懈攻克難題、好比……算了，說多了你就學會套路了。

團隊協做能力也是項目經歷中能夠體現出來的，面試官可能在你的陳述過程對你默默作出評價：這我的看來不太合羣，趁早把他淘汰好了。

其餘小點

上面就是我對校招面試流程和該考察什麼問題的理解，也是我幾年面試經驗的沉澱吧。這一小節我回答些你們可能有的疑惑：

前端校招要不要考察算法？

印象中不少公司團隊都有問算法問題，好比怎麼實現快排，咱們團隊別的面試官有時也會問。我的以爲考算法還不如考察前端基礎知識，算法在前端領域用的真沒有其餘開發領域多，我作了幾年業務開發也真沒用到複雜算法。校招時問算法，更可能是在考覈你大學專業知識的掌握程度，你的學習能力如何。因此我基本不問，考前端基礎知識一樣能夠看出學習能力。除非你的前端基礎真的比較差，我纔會考察算法。

有人可能會說，之後作複雜系統作高性能框架這些都要求算法水平高啊。是的，我認可，但這不是前端校招生如今必須掌握的能力。他們只要學習能力強，還怕之後無法把算法知識補上來？

前端校招要不要考察設計模式？

公司一位同事寫了一本《JavaScript設計模式與開發實踐》，豆瓣9.1，挺不錯的書。學好設計模式，對你寫出結構更清晰，維護更方便的項目代碼是頗有幫助的。校招時能夠考察，不過直接問你會哪些設計模式就有點過了，由於有時候咱們實際已經用了某個設計模式的思路組織代碼，咱們只是不知道它的名稱，那不就中招了？考術語是很偷懶的作法，更好的作法是給出一個實際場景問題，看對方可否用設計模式的思路解決。

校招學生應該偏技術深度仍是技術廣度？

當年我參加百度校招，百度的一個總監說：「在學校應該以知識廣度爲主，工做後應該選擇某個技術方向深挖，當你某一天到了瓶頸，那你又是時候廣度發展了。」深覺得然。

因此我會更喜歡具備廣度知識的學生。舉個例子，上面提到的一個綜合問題：用戶從輸入url到最終頁面展現，這個過程當中發生了什麼？有些學生計算機網絡課程學的不錯，能從HTTP請求組包、網絡模型、DNS解析、創建鏈接這些方面跟我講深裏面的細節，這是深度知識，也是不錯的。不過我更喜歡聽到這樣的答案：

用戶輸入url，到瀏覽器緩存機制檢查，到HTTP請求包結構，到DNS解析，到鏈接創建，到服務器端處理（如動態頁面處理、靜態頁面返回，CDN相關知識），到瀏覽器收到HTML內容怎麼解析，到怎麼並行加載串行執行CSS、JS，到怎麼構造渲染樹渲染頁面，到怎麼根據請求頭把內容緩存到瀏覽器端。若是此時你還能補充HTTPS、同構直出、Service Worker之類，那就更好。

這就是知識的廣度，將知識組織成一個總體的架構。即便你回答的時候對一些細節講不清楚，我也以爲比只知道單點並講深的同窗得分高。

關於套路

照我所知，有些大學計算機社團有着優良的傳統：師兄師姐總結出完善的前端面試知識常問問題必備知識。而後師弟師妹就能夠按圖索驥，背背背或學學學。

我是作了一段時間的一面面試官纔看到這樣的清單，當時都呆了。因而後來我開始反套路了：若是一個校招面試者對我問的前端基礎知識回答溜得飛起不打一個停頓，我就會開始根據一個知識點，深刻一層問問，或者再深刻一層，壓力面，問到對方回答不出。此時究竟是真正掌握這個知識仍是單純靠背，就能看出來了。或者直接就從場景切入，而不是直接問請介紹前端緩存這樣的問題。

固然了，套路不是很差。我以爲，能真正掌握知識 > 靠背誦掌握知識 > 連基礎知識都回答很差。你連這些知識都懶得記，那我也懶得放你過。

結束語

囉嗦了這麼多，我寫這篇文章究竟是想幹嗎？

難道是爲了蹭熱點？那是，如今是校招季嘛。

是爲了告訴你們面試官怎麼出題，讓你們學會一些對付面試官的套路？呵呵，那我要和你說，咱們已經有意識地反套路了，若是你說你懂得某一個知識，卻被發現只是很是基礎的掠過，給咱們感受是更差的。

寫這篇文章仍是想讓你們趁還有些時間，對照着整理本身的知識體系，查漏補缺，有針對性的學習前端知識。

寫這篇文章仍是想讓你們體會下面試官視角，對面試怎麼進行有個心理準備，減小由於緊張之類的因素致使沒有正常發揮。

寫這篇文章也想跟其餘校招面試官一塊兒交流觀點。我以爲不必把這些當作祕密捂住，重要的不是問題，而是面試者能給出什麼樣的答案。

最後你能夠祈禱：面試騰訊的時候不要遇到我。

----

若是你也是一名面試官，很但願你也把你的心得分享出來，和你們一塊兒交流~ （附掘金秋招徵文連接）