5年騰訊技術官告訴你前端校招面試該怎么准備？

本文轉載自查看原文 2021-02-05 21:15 381 面試/ 校招/ 前端

前言

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

於是我經常在想：什么才是好問題，前端校招該考察些什么？

現又是一年校招季，想和大家分享下我的心得。

聲明：

我一直都是一面面試官，所以我的思考見解是針對一面的，或者說技術面；
每個面試官都有自己的面試風格，比如我們團隊就有一位同樣負責一面的，特別喜歡問圖形算法。所以你看了我的文章，覺得准備好了，結果被面試官問懵逼了，別怪我哈，我可不負責。我跟大家聊些通用部分；
比我更有經驗的面試官比比皆是，本文只是我的個人拙見，不足之處望大家斧正。

核心思路

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

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

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

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

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

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

而作為校招生的你，要思考的是怎么把自己的學習能力和學習欲望證明出來，這比簡歷上你寫了多少行React代碼有分量的多。特別是面試大公司。

面試流程

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

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

一般我們會面試超過一個小時，這樣才能做到全面了解，也是一種負責。如果實在太差，提前結束。

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

前端基礎

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

我覺得前端開發的六項基礎知識：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之類，那就更好。

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

關於套路

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

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

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

結束語

啰嗦了這么多，我寫這篇文章到底是想干嘛？

難道是為了蹭熱點？那是，馬上就到金三銀四招聘季嘛。

是為了告訴大家面試官怎么出題，讓大家學會一些對付面試官的套路？呵呵，那我要和你說，我們已經有意識地反套路了，如果你說你懂得某一個知識，卻被發現只是非常基礎的掠過，給我們感覺是更差的。

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

寫這篇文章還是想讓大家體會下面試官視角，對面試怎么進行有個心理准備，減少因為緊張之類的因素導致沒有正常發揮。

寫這篇文章也想跟其他校招面試官一起交流觀點。我覺得沒必要把這些當做秘密捂住，重要的不是問題，而是面試者能給出什么樣的答案。

最后你可以祈禱：面試騰訊的時候不要遇到我。

下面分享一份我無意中在GitHub上刷到的一份《前端校招面試題精編解析大全》，已經標星8.3K了，仔細看了下，解析還不錯，秉着好東西就要分享的原則，同時也希望大家在今年的金三銀四中找到滿意的工作，下面分享給大家。

HTML

瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
HTML5的優點與缺點？
Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
HTML5有哪些新特性、移除了哪些元素？
你做的網頁在哪些瀏覽器測試過,這些瀏覽器的內核分別是什么?
每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
說說你對HTML5認識?（是什么,為什么）
對WEB標准以及W3C的理解與認識?
......

CSS

解釋一下CSS的盒子模型？
請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？
請你說說CSS有什么特殊性?（優先級、計算特殊值）
常見瀏覽器兼容性問題與解決方案？
列出display的值並說明他們的作用？
如何居中div, 如何居中一個浮動元素?
請列舉幾種清除浮動的方法(至少兩種)?
block，inline和inlinke-block細節對比？
什么叫優雅降級和漸進增強？
說說浮動元素會引起的問題和你的解決辦法
你有哪些性能優化的方法？
......

JavaScript

js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？
js拖拽功能的實現
異步加載js的方法
js的防抖與節流
說一下閉包
說說你對作用域鏈的理解
JavaScript原型，原型鏈 ? 有什么特點？
請解釋什么是事件委托/事件代理
Javascript如何實現繼承？
函數執行改變this
babel編譯原理
函數柯里化
說一下類的創建和繼承
說說前端中的事件流
如何讓事件先冒泡后捕獲
說一下圖片的懶加載和預加載
js的new操作符做了哪些事情
改變函數內部this指針的指向函數（bind，apply，call的區別）
Ajax解決瀏覽器緩存問題
......