前言
我是團隊的一個老校招面試官，這幾年陸陸續續虐過不少校招學生，遇到過很優秀聊得很開心的，遇到過讓我直皺眉頭的，遇到過很懂套路的，也遇到過不善表達的。講真，面試前我還常感到緊張，我怕一個好苗子因為我的笨問題沒得到充分挖掘而錯過。
於是我經常在想：什麼才是好問題，前端校招該考察些什麼？
現又是一年校招季，想和大家分享下我的心得。
宣告：
- 我一直都是一面面試官，所以我的思考見解是針對一面的，或者說知識面；
- 每個面試官都有自己的面試風格，比如我們團隊就有一位同樣負責一面的，特別喜歡問圖形演算法。所以你看了我的文章，覺得準備好了，結果被面試官問懵逼了，別怪我哈，我可不負責。我跟大家聊些通用部分；
- 比我更有經驗的面試官比比皆是，本文僅代表個人拙見，不足之處望大家斧正。
核心思路
校招面試和社招面試會有什麼不同？我用一張圖說明：
校招面試應側重潛力考察。在前端這條路上，學習能力看你能否走得快，學習慾望看你能否走得遠。
那校招時前端知識就不重要了？
也很重要。只是說實話，當你工作後學校學到的知識可能都用不上了，因為工作場景跟你自學場景關注點不同。舉個例子，你在學校做前端開發，一般是單打獨鬥，但工作之後你就經常要跟別人合作開發，此時統一程式碼規範、程式碼要怎麼組織才能減少耦合適合多人協作，就要列入考慮中。又比如，你自己做前端可能會想著怎麼用新技術怎麼做更酷炫，而工作業務中則關注怎麼處理相容性，怎麼監控並減少指令碼錯誤保持專案穩定等等。更別提你在學校中怎麼學到如海量使用者場景的開發經驗？
所以對於校招生，相比不完善的前端知識積累，我們更關注潛力。前端基礎是你獲得面試機會的資本，而從前端知識掌握情況折射出來的潛力特質，才是你脫穎而出的亮點。
怎麼考察這些虛的能力？下文將做展開。
而作為校招生的你，要思考的是怎麼把自己的學習能力和學習慾望證明出來，這比簡歷上你寫了多少行React程式碼有分量的多。特別是面試大公司。
面試流程
這個就百花齊放了，我自己在不斷面試中總結出一套面試流程：
基本上這樣一套下來，面試者的整體水平也就很清楚了。不同公司團隊的一面流程不同，但上面幾點都是很通用的考察點。
一般我們會面試超過一個小時，這樣才能做到全面瞭解，也是一種負責。如果實在太差，提前結束。
接下來我會重點說說前端基礎和專案經歷，我會考察些什麼。
前端基礎
大家常說前端開發易學難精，因為前端開發涉及的知識項實在很多，下面這張經典的圖應該不少人看過：
那校招學生該掌握哪些知識呢？由於我在公司裡面負責講授《Web開發基礎概論》這門課，慢慢的我總結了前端開發的六項基礎知識：HTML、CSS、JavaScript、移動Web開發、除錯、HTTP網路知識。
這六項是我覺得校招學生的必備知識，面試時我會一一問到。如果你在這些前端基礎上都表現不好，那你就只能在學習能力上特別突出才行了。
HTML
前端程式語言基礎。我會考察：
- 常用的meta頭；
- 通過你對標籤語義化的理解來判斷你能否寫出更規範的HTML程式碼；
- HTML5新增的能力；
- HTML的渲染解析知識，比如為什麼CSS放前面JS放後面，怎麼理解並行載入序列執行（很有趣的一塊知識，這裡不做展開）；
- ……
CSS
前端程式語言基礎。像CSS Expression這種古董不做考察，IE6、IE7這種被時代拋棄的瀏覽器考察怎麼相容它們有啥意義。我會考察：
- 怎樣寫出更好的CSS，如層級不宜過深，如何時用ID和何時用class，如怎麼拆分組織CSS程式碼等；
- 盒模型；
- 非常常用的CSS3知識，比如CSS3動畫，比如彈性佈局；
- ……
JavaScript
前端最重要程式語言。這一塊相信大家很輕鬆可以找到很多面試題，或者必背JS知識列表。這一塊我會考察 原生JavaScript知識，它是一切框架外掛的基礎。我依然會問
- 事件模型
- 閉包
- 原型鏈
等前端基礎知識，不過我會從單點逐漸深入不斷擴充或者結合具體案例，看你是否真正的理解掌握。如果表現不錯我有時還會問瀏覽器的解析渲染原理，作為一個加分項吧（DOM樹、渲染樹、重排重繪、分層渲染、為什麼DOM操作過多會影響效能等）。
移動Web開發
我說現在移動Web開發是前端開發領域的熱點，應該沒人反駁吧？現如今移動應用層出不窮，移動Web開發知識變得越發重要。如果你不懂移動Web開發知識，真的是落後於時代。我會考察：
- 移動Web開發和PC Web開發有何不同？此題考察你對移動Web開發的整體理解，同時看你能否有組織有條理地思考問題；
- 怎麼實現響應式佈局？考察你是否瞭解常見的佈局方案；
- 移動端的手勢和事件；
- 怎麼提高移動端頁面的渲染效能？針對移動端網路，考察你是否能從減少HTTP請求出發提出解決方案，是否瞭解GPU渲染（偏進階）等；
- ……
除錯
開發中總免不了有bug，頁面執行環境總比想象中複雜，此時能否通過除錯找到問題原因自主解決，非常重要。我會考察：
- 是否會使用基本的抓包工具、除錯控制檯；
- 怎麼從茫茫網路內容中找到有用資訊；
- 移動端如何除錯；
- ……
HTTP
如果你連抓包知識都不會你談何除錯？如果你連304的含義都不知道，你都想不通程式碼修改後為什麼頁面還是老樣子？前端開發本來就要跟網路打交道。這一塊我會考察：
- 常見HTTP狀態碼；
- 不同請求型別的區別；
- 有什麼快取方案以及怎麼實現；
- ……
上面就是前端六項基礎知識。實際面試的時候我也會問一些綜合問題，比如：
- 使用者從輸入url到最終頁面展示，這個過程中發生了什麼？
- 老闆反饋頁面開啟白屏，而你手機上是正常的，怎麼辦？
- 我頁面上有個動畫一卡一卡的效能不行，怎麼優化？
- ……
這些基本上就是我考察前端基礎知識會問的問題。
可能有人會：咦咦咦，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之類，那就更好。
這就是知識的廣度，將知識組織成一個整體的架構。即使你回答的時候對一些細節講不清楚，我也覺得比只知道單點並講深的同學得分高。
關於套路
照我所知，有些大學計算機社團有著優良的傳統：師兄師姐總結出完善的前端面試知識常問問題必備知識。然後師弟師妹就可以按圖索驥，背背背或學學學。
我是做了一段時間的一面面試官才看到這樣的清單，當時都呆了。於是後來我開始反套路了：如果一個校招面試者對我問的前端基礎知識回答溜得飛起不打一個停頓，我就會開始根據一個知識點，深入一層問問，或者再深入一層，壓力面，問到對方回答不出。此時到底是真正掌握這個知識還是單純靠背，就能看出來了。或者直接就從場景切入，而不是直接問請介紹前端快取這樣的問題。
當然了，套路不是不好。我覺得，能真正掌握知識 > 靠背誦掌握知識 > 連基礎知識都回答不好。你連這些知識都懶得記，那我也懶得放你過。
結束語
囉嗦了這麼多，我寫這篇文章到底是想幹嘛？
難道是為了蹭熱點？那是，現在是校招季嘛。
是為了告訴大家面試官怎麼出題，讓大家學會一些對付面試官的套路？呵呵，那我要和你說，我們已經有意識地反套路了，如果你說你懂得某一個知識，卻被發現只是非常基礎的掠過，給我們感覺是更差的。
寫這篇文章還是想讓大家趁還有些時間，對照著整理自己的知識體系，查漏補缺，有針對性的學習前端知識。
寫這篇文章還是想讓大家體會下面試官視角，對面試怎麼進行有個心理準備，減少因為緊張之類的因素導致沒有正常發揮。
寫這篇文章也想跟其他校招面試官一起交流觀點。我覺得沒必要把這些當做祕密捂住，重要的不是問題，而是面試者能給出什麼樣的答案。
最後你可以祈禱：面試騰訊的時候不要遇到我。
----
如果你也是一名面試官，很希望你也把你的心得分享出來，和大家一起交流~ （附掘金秋招徵文連結）