剛整理完2018屆前端校招的面試記錄趁著記憶還熱乎把百度、網(wǎng)易、搜狗、阿里四家公司的完整面試流程、題目和心得寫下來。這篇文章不是單純曬offer或者報喜而是想給準備前端校招的同學一份可以直接參考的“實戰(zhàn)地圖”——每一輪面試怎么面的、問了什么題、面試官到底想考察什么、我當時是怎么答的、哪些地方事后復盤發(fā)現(xiàn)答得不好。如果你現(xiàn)在正在準備前端面試或者剛剛開始走前端學習路線這篇文章值得你花二十分鐘讀完。1. 再聊2018屆前端校招那年面試到底考什么1.1 時間背景為什么2018屆是一個特殊的年份2018屆畢業(yè)對應(yīng)的秋招時間是2017年9月到10月。那一年前端圈子的技術(shù)棧和現(xiàn)在有明顯差異Vue 2.x正處于爆發(fā)期React 16剛發(fā)布不久Webpack 3到4的過渡讓工程化話題變得非常熱。面試題庫遠沒有現(xiàn)在這么“卷”沒有微前端、沒有跨端框架、沒有Serverless連面試官問的問題都相對克制。但有一點和現(xiàn)在完全一致基礎(chǔ)永遠是大頭手寫代碼永遠繞不開。那一年還有一個特殊背景移動端H5開發(fā)需求爆發(fā)hybrid架構(gòu)在各家大廠已經(jīng)落地所以面試中“移動端適配”“瀏覽器渲染機制”“HTTP緩存”幾乎是必考題。另外2017年也是“前端工程化”從概念走向標配的一年webpack的loader、plugin區(qū)別幾乎是所有大廠二面的必問題。1.2 備戰(zhàn)階段我是怎么準備簡歷和知識體系的我的備戰(zhàn)時間線大概是提前三個月開始。七月份先過基礎(chǔ)JavaScript核心閉包、原型鏈、作用域、this指向、瀏覽器原理渲染流程、事件循環(huán)、垃圾回收、HTTP與網(wǎng)絡(luò)基礎(chǔ)緩存、跨域、HTTPS握手、CSS布局flex、居中、BFC。八月開始投遞簡歷和內(nèi)推同時刷LeetCode高頻題和前端手寫題。簡歷方面我準備了兩頁第一頁寫教育背景、技術(shù)棧、實習經(jīng)歷和項目經(jīng)歷第二頁附上GitHub和博客鏈接?，F(xiàn)在回頭看2018屆的簡歷篩選對“實習經(jīng)歷”非?？粗赜袑嵙暯?jīng)歷的同學拿到面試機會的概率高很多。如果當時沒有實習項目經(jīng)歷就要寫得足夠扎實每個項目要能講清楚背景、技術(shù)選型、核心難點、最終效果并且能應(yīng)對面試官隨后的連環(huán)追問。2. 百度三輪技術(shù)面加一輪HR面主觀設(shè)計題才是分水嶺2.1 百度面試流程與一面基礎(chǔ)題復盤百度的流程是內(nèi)推、筆試或者部分崗位免筆試、三輪技術(shù)面加一輪HR面。我當時是8月底通過學長內(nèi)推投遞9月初收到面試通知面試地點在西二旗的百度科技園。整個流程一天內(nèi)走完三輪技術(shù)面節(jié)奏非常緊湊。一面面試官比較年輕上來先讓自我介紹然后直接問我“項目里遇到最難的問題是什么”這是幾乎所有大廠一面的固定開場表面在聊項目實際是在考察你的技術(shù)深度和表達能力。我當時講的是H5頁面在低端安卓機上的內(nèi)存優(yōu)化問題面試官順著追問了瀏覽器垃圾回收機制和內(nèi)存泄漏的常見場景。隨后進入手寫代碼環(huán)節(jié)。我記得很清楚一面一共考了四道題手寫new操作符并解釋new的過程中發(fā)生了什么手寫防抖函數(shù)和節(jié)流函數(shù)并說明兩者適用場景的區(qū)別考察變量提升與事件循環(huán)給出代碼輸出執(zhí)行順序利用原型鏈實現(xiàn)一個簡單的繼承這四道題都是2018年前端面試八股文里的高頻題沒有偏題怪題。但如果你只是背結(jié)論不深入理解原理面試官一追問就會露餡。比如手寫new的時候面試官會繼續(xù)問“如果構(gòu)造函數(shù)返回了一個對象new的結(jié)果是什么”這就是考察你是否真的理解了new的完整過程。2.2 百度二面Vue原理與工程化深挖二面開始進入框架和工程化領(lǐng)域。面試官問的第一個問題是“Vue 2的響應(yīng)式原理是怎么實現(xiàn)的”這個問題在2017年幾乎是必考題答案核心是Object.defineProperty。我當時的回答思路是數(shù)據(jù)對象通過Object.defineProperty進行屬性劫持每個屬性有一個Dep依賴收集器組件渲染時通過Watcher訂閱依賴數(shù)據(jù)變化時觸發(fā)setter通知Watcher更新視圖。面試官聽完沒有停繼續(xù)追問了幾個很容易卡殼的問題Object.defineProperty有什么缺陷數(shù)組的響應(yīng)式是怎么處理的Vue中給對象新增屬性為什么不是響應(yīng)式的怎么解決computed和watch的實現(xiàn)差異數(shù)組響應(yīng)式這塊如果只看文檔沒看源碼很容易答不上來。我當時答的是Vue 2通過重寫數(shù)組的七個方法push、pop、shift、unshift、splice、sort、reverse來實現(xiàn)數(shù)組的響應(yīng)式監(jiān)聽而沒有通過defineProperty對數(shù)組的每一項進行劫持因為數(shù)組長度可能非常長性能消耗太大。新增屬性用Vue.set解決。接著問webpackloader和plugin有什么區(qū)別我當時答loader是文件加載器負責將不同類型的文件轉(zhuǎn)換成模塊plugin是插件系統(tǒng)可以監(jiān)聽webpack構(gòu)建生命周期在特定時機執(zhí)行自定義邏輯。但面試官接著問“如果讓你寫一個loader你會怎么寫”這個就要求對loader的API有一定的了解。我是從loader是導出一個函數(shù)的模塊、接收source參數(shù)、返回處理后的結(jié)果這個角度回答的。2.3 百度三面主管面與開放式設(shè)計題三面是主管面沒有問太多具體技術(shù)只問了一道開放式設(shè)計題“如果讓你設(shè)計一個前端錯誤上報系統(tǒng)你會怎么設(shè)計”這道題我印象非常深刻因為它沒有標準答案考察的是需求拆解能力和方案取舍能力。我當時的回答是分四步第一步確定上報內(nèi)容包括錯誤類型、錯誤信息、發(fā)生時間、頁面URL、用戶設(shè)備信息第二步確定上報方式用動態(tài)創(chuàng)建Image標簽的方式發(fā)送GET請求而不是用XMLHttpRequest因為Image請求沒有跨域限制且不影響頁面主流程第三步設(shè)計批量上報策略將錯誤信息暫存在內(nèi)存隊列中達到一定數(shù)量或者頁面卸載前統(tǒng)一上報第四步增加錯誤去重和服務(wù)端日志檢索接口。面試官一路引導追問“如果用戶斷網(wǎng)了錯誤信息丟失怎么辦”“上報請求本身失敗了怎么辦”這些問題實際在考邊界情況的處理。我當時答了使用localStorage做本地緩存網(wǎng)絡(luò)恢復后補報以及navigator.sendBeacon在頁面卸載時發(fā)送數(shù)據(jù)的方案。這輪面試雖然難但很能考驗平時的知識積累和思維習慣。HR面在這個流程之后問了一些常規(guī)問題是否接受加班、對百度的了解、職業(yè)規(guī)劃、手里還有其他offer嗎。整體感覺百度HR面相對輕松主要看你的意愿和穩(wěn)定性。3. 網(wǎng)易從筆試到HR面基礎(chǔ)題一題都不能錯3.1 網(wǎng)易在線筆試題量大時間緊細節(jié)點多網(wǎng)易的校招流程比較規(guī)范在線筆試、技術(shù)面兩輪到三輪、HR面。2017年網(wǎng)易的筆試是在一個周末統(tǒng)一進行的題目類型分為三塊選擇題、編程題和問答題。選擇題覆蓋面很廣前端基礎(chǔ)、操作系統(tǒng)、網(wǎng)絡(luò)、智力題都有其中最讓人頭疼的是一些非常細節(jié)的題目。我挑幾個印象深的CSS中display:none和visibility:hidden的區(qū)別這個簡單給定HTML結(jié)構(gòu)判斷CSS選擇器的優(yōu)先級順序localStorage的存儲容量上限是多少JavaScript中0.10.2為什么不等于0.3怎么解決這些題每年都會出現(xiàn)看起來不難但容易在細節(jié)上翻車。比如localStorage容量上限標準答案通常是5MB左右但每個瀏覽器實現(xiàn)略有差異如果沒實際測過只能憑印象猜。0.10.2的問題除了說明二進制浮點數(shù)精度問題最好還能給出toFixed或者轉(zhuǎn)化為整數(shù)運算的解決方案。編程題一般有三道難度屬于LeetCode中等偏下數(shù)組去重、字符串處理、二維數(shù)組查找。但要注意的是在線筆試的編程題不能跳出去查API平時寫代碼不脫離IDE的同學需要提前適應(yīng)這種裸寫環(huán)境。3.2 網(wǎng)易技術(shù)面面試官很溫和但問題非常細網(wǎng)易的技術(shù)面風格和百度完全不同面試官很溫和不會故意施壓但問題考察得特別細致。一面開場也是自我介紹加項目然后問題就一個接一個來了HTTP狀態(tài)碼301和302的區(qū)別是什么強緩存和協(xié)商緩存分別是怎么工作的HTTP頭字段有哪些瀏覽器從輸入URL到頁面顯示中間發(fā)生了什么TCP三次握手為什么需要三次頁面加載白屏時間過長怎么排查這些問題本身不偏但網(wǎng)易面試官喜歡往細節(jié)里問。比如緩存問題不僅要說出Cache-Control和ETag還要能說明瀏覽器是怎么判斷緩存是否過期、服務(wù)端返回304時瀏覽器怎么處理。又比如TCP三次握手為什么要三次而不是兩次如果只回答了“確認雙方收發(fā)能力”還要能補充“防止歷史重復連接初始化造成混亂”這層理解。二面問了一道有意思的設(shè)計題“如果頁面首屏加載很慢你怎么定位問題并給出優(yōu)化方案?！蔽耶敃r從網(wǎng)絡(luò)請求、資源體積、渲染性能三個維度分析提到減少HTTP請求、開啟CDN、圖片懶加載、JavaScript代碼分割、使用SSR或者預渲染等。面試官順著問了一個當時非常新的話題“你怎么看待前端性能優(yōu)化的邊界——哪些優(yōu)化應(yīng)該在前端做哪些應(yīng)該在服務(wù)端做”這個問題的核心是要你理解前后端協(xié)作的邊界而不是一味在前端堆優(yōu)化手段。3.3 網(wǎng)易HR面和其他需要注意的細節(jié)網(wǎng)易的HR面安排在技術(shù)面之后問的問題比較直接期望薪資多少、能不能接受去杭州工作、手上還有其他offer嗎、對網(wǎng)易游戲怎么看。這里有兩個細節(jié)值得注意第一期望薪資不要隨口報一個數(shù)提前查一下行業(yè)水平結(jié)合城市消費水平來回答第二對于“為什么選擇網(wǎng)易”建議提前調(diào)研一下目標部門的產(chǎn)品面試時提到具體產(chǎn)品會讓HR覺得你是認真準備的。網(wǎng)易的整體面試壓力在四家公司里算最小的但這不代表可以通過。網(wǎng)易考察的題目雖然不難但覆蓋范圍特別廣任何一塊基礎(chǔ)薄弱都可能被問倒。我的經(jīng)驗是把前端面試八股文里所有基礎(chǔ)類題目全部過一遍確保沒有死角再去網(wǎng)易面試。4. 搜狗算法題比例最高要敢寫暴力解再說優(yōu)化4.1 搜狗一面聊完基礎(chǔ)直接上算法搜狗面試地點在五道口的搜狐網(wǎng)絡(luò)大廈流程是兩輪技術(shù)面加一輪HR面。有一說一搜狗是我面試的四家公司里算法題比例最高的這跟搜狗做搜索、輸入法等產(chǎn)品技術(shù)棧有關(guān)系面試官對編碼能力的要求非常高。一面先快速聊了JavaScript基礎(chǔ)繼承的幾種方式、作用域鏈、閉包的應(yīng)用場景、正則表達式常用方法。大概聊到第十分鐘面試官就說“我們做幾道題吧。”然后直接書面出了三道題寫一個函數(shù)實現(xiàn)字符串反轉(zhuǎn)給定兩個數(shù)組返回它們的交集要求去重用JavaScript實現(xiàn)兩個大數(shù)相加這三道題看起來都很基礎(chǔ)但面試官的要求是一邊寫代碼一邊講解思路并且寫完要能說出時間復雜度和空間復雜度。大數(shù)相加那道題如果不用BigInt需要模擬豎式加法從最低位開始逐位相加注意進位。這道題很考驗基本功因為一旦數(shù)組下標沒處理好很容易出現(xiàn)邊界錯誤。4.2 搜狗二面算法難度上升考察現(xiàn)場思考能力二面的算法題難度明顯提升。我記得有一道是二叉樹層序遍歷要求按層輸出每一層一個數(shù)組。常規(guī)做法是用隊列配合levelSize記錄每層節(jié)點數(shù)。面試官看我寫完又問了一個變體如果要求從底向上按層輸出呢其實就是加一個unshift或者最后reverse一下。另一道題是手寫LRU緩存淘汰算法。這道題在2017年的前端面試里非常少見我當時愣了一下面試官很友善地提示“可以從Map的插入順序特性入手”。我順著提示寫了一個基于Map的實現(xiàn)get時將讀取的key先刪除再重新set保證最近訪問的key在末尾達到容量上限時刪除最前面的key。這道題讓我意識到搜狗面試官更看重你面對陌生問題時的思考過程和編碼能力而不是期待你背過所有題目。4.3 針對搜狗這類公司算法題應(yīng)該怎么準備如果你目標是搜狗或者其他對算法要求高的公司我的建議是LeetCode高頻題刷兩遍重點覆蓋數(shù)組、字符串、鏈表、二叉樹、棧、隊列、動態(tài)規(guī)劃基礎(chǔ)練習“先講思路再寫代碼”的習慣每道題拿到手先給出暴力解再分析能不能優(yōu)化注意代碼規(guī)范變量命名清晰、邊界條件處理完整、寫完主動跑幾個測試用例準備一些常見變體題比如層序遍歷的變體、數(shù)組去重的多解法、字符串反轉(zhuǎn)的多解法面試中如果遇到?jīng)]做過的題不要慌先說暴力解然后逐步優(yōu)化。搜狗面試官很吃這一套他們更關(guān)注你的思考路徑是否清晰而不是答案是否完美。5. 阿里連環(huán)深挖式追問每一輪都在考察原理邊界5.1 阿里一面電話面從簡歷項目發(fā)起連環(huán)追問細節(jié)阿里的面試流程是簡歷篩選、電話面或者視頻面、現(xiàn)場技術(shù)面三輪、HR面。整體流程跨度比較長每一輪面試都有一定淘汰率而且面試官喜歡連環(huán)深挖一個問題套一個問題直到你答不出來為止。我的一面是電話面持續(xù)了大概四十分鐘。面試官先讓我挑選一個最有代表性的項目講然后追問的密度非常高項目里跨域是怎么解決的JSONP和CORS的區(qū)別CORS的預檢請求是怎么觸發(fā)的哪些類型的請求不會觸發(fā)預檢如果服務(wù)端沒有返回正確的CORS頭瀏覽器會怎么處理HTTPS的握手過程是怎樣的對稱加密和非對稱加密在握手過程中各起到什么作用電話面比現(xiàn)場面更難的一點是沒有紙筆不能畫圖全靠嘴說。如果對知識沒有形成體系化的理解很容易講著講著就亂了。我的建議是準備電話面之前把所有知識點用自己的話口頭復述一遍確保能夠流暢地講出來。5.2 阿里現(xiàn)場面手寫Promise、事件循環(huán)、柯里化一個不少現(xiàn)場面一共三輪節(jié)奏很緊湊。第一輪從一道算法題開始給定一個整數(shù)數(shù)組找出其中兩個數(shù)相加等于目標值返回下標。這道題LeetCode第一題但面試官要求用雙指針或者哈希表實現(xiàn)并且分析兩種方案的空間復雜度差異。寫完算法題后就開始深挖JavaScript描述事件循環(huán)機制macro task和micro task的執(zhí)行順序給段代碼讓寫出輸出結(jié)果手寫Promise至少要實現(xiàn)resolve、reject、then、catch方法手寫柯里化函數(shù)curry講解this在不同調(diào)用方式下的指向手寫Promise那題我寫了一個簡化版本Promise有三個狀態(tài)pending、fulfilled、rejectedthen方法將回調(diào)推入隊列狀態(tài)改變時依次執(zhí)行。面試官追問“如果then里面返回了一個新的Promise你是如何處理的”這個問題涉及Promise鏈式調(diào)用的核心我當時答得不夠好只是說需要遞歸處理返回值但沒有展開具體實現(xiàn)。這面結(jié)束之后我立刻復盤把Promise A規(guī)范完整讀了一遍補上了這個短板。第二輪現(xiàn)場面主要問Vue原理和項目細節(jié)模板編譯的流程是什么render函數(shù)是怎么生成的虛擬DOM的diff算法及時間復雜度computed和watch的區(qū)別nextTick的原理是什么項目里使用過哪些性能優(yōu)化手段如果讓你設(shè)計一個組件庫你會怎么設(shè)計這些問題在2018屆前端面經(jīng)里反復出現(xiàn)但阿里的特點是會一直追問到“你確實不會”為止。比如diff算法面試官會繼續(xù)問“key的作用是什么為什么不能用index作為key”這就需要不僅了解diff算法還要理解列表渲染時的復用策略。第三輪是主管面風格相對宏觀問的是技術(shù)選型、職業(yè)規(guī)劃、團隊協(xié)作、對前端的理解這些問題。這輪更多考察候選人的綜合素質(zhì)、思維方式和溝通能力不再糾結(jié)具體技術(shù)細節(jié)。5.3 阿里HR面價值觀匹配度與一票否決權(quán)阿里的HR面是出了名的重要HR有一票否決權(quán)。我當時被問到的問題包括大學期間遇到過最大的困難是什么怎么解決的團隊合作中有沒有出現(xiàn)過意見分歧你是怎么處理的為什么想加入阿里巴巴未來三到五年的職業(yè)規(guī)劃是什么期望的工作節(jié)奏是什么樣的這些問題沒有標準答案但有一點很關(guān)鍵回答要真誠、具體有真實的案例支撐。比如“最大的困難”這個問題如果你說的是“期末考試復習壓力大”HR大概率會覺得沒有說服力如果你說的是一個具體的技術(shù)難題或者團隊矛盾并且能清晰講出當時的分析、行動和結(jié)果HR就會認為你有解決問題的能力和韌性。阿里HR面還有一個特點會在面試中提到工作地點、是否接受異地、是否接受部門調(diào)劑。這些信息建議提前想清楚不要面試時給一個模糊的回答反而顯得你目標不明確。6. 校招復盤踩過的坑與可復用的經(jīng)驗6.1 那些讓面試加分的細節(jié)以及我踩過的坑四家公司面下來我總結(jié)了一些加分細節(jié)和反面教材。加分細節(jié)方面寫代碼前先口頭確認思路一句話說出方案再動手面試官會覺得你有工程習慣被問到一個不會的問題時不直接說不會而是說出自己理解到的部分并且嘗試拆解問題態(tài)度很重要每輪面試結(jié)尾面試官問“你有什么想問我的”準備兩個高質(zhì)量問題比如團隊技術(shù)棧、當前面臨的技術(shù)挑戰(zhàn)這能體現(xiàn)你的主動性。踩過的坑也有不少。第一簡歷上寫了“熟悉”但是沒有深入準備的領(lǐng)域面試官追問時答不上來反而扣分。比如我在簡歷里寫了“熟悉Web安全”實際只是了解XSS和CSRF的概念面試官追問DOM型XSS和反射型XSS的區(qū)別時我只能靠猜。后來我把簡歷上所有技能點都過了一遍確保每一項都能講出至少三個層面的內(nèi)容才敢自信地寫在簡歷上。第二面試前一定要了解目標公司近期在做的事情。我去網(wǎng)易面試之前只是大概知道網(wǎng)易有游戲和郵箱業(yè)務(wù)但面試官問到“你覺得網(wǎng)易郵箱前端可以怎么優(yōu)化”時我完全沒準備回答得很空。這提醒我面經(jīng)不只是背題還要結(jié)合公司的業(yè)務(wù)場景去設(shè)想問題。6.2 四家公司面試風格對比與時間線建議整理了一個表格方便大家對比公司面試輪次考察風格手寫代碼比例壓力程度百度三面技術(shù)一面HR主管主導重設(shè)計題與方案能力中中網(wǎng)易筆試兩輪技術(shù)HR按部就班基礎(chǔ)覆蓋廣題目不偏中低低搜狗兩輪技術(shù)HR算法題比例高看重編碼能力與思考過程高中高阿里電話面三輪現(xiàn)場HR連環(huán)深挖原理考察知識邊界與綜合能力高高時間線方面我的建議是7月到8月初集中過基礎(chǔ)同時刷LeetCode和前端手寫題8月中下旬開始投遞提前批和內(nèi)推大廠提前批通常免筆試或者直接進入面試環(huán)節(jié)9月是正式批筆面試高峰期盡量把節(jié)奏拉開不要一天面兩家10月是補錄和offer選擇階段。戰(zhàn)線很長注意保持體力和心態(tài)。6.3 2018屆面經(jīng)對現(xiàn)在準備前端面試的同學還有參考價值嗎這個問題我最近被很多學弟學妹問過。我的看法是基礎(chǔ)部分完全有參考價值甚至可以說是基本功中不過時的部分。閉包、原型鏈、事件循環(huán)、HTTP緩存、手寫Promise和防抖節(jié)流這些在2026年依然會是前端面試的高頻題。但面試范圍確實擴展了很多現(xiàn)在的面試還會涉及微前端、跨端方案、性能監(jiān)控、工程化體系、組件庫設(shè)計、AI輔助開發(fā)等新話題這些在2018年基本沒有被考察過。所以我的建議是不要把2018屆面經(jīng)當成完整的題庫而是把它當成“基礎(chǔ)能力清單”。上面提到的所有基礎(chǔ)題你必須達到不看答案也能流暢回答的程度然后在這個基礎(chǔ)上再去學習新知識、準備新題目。面試考察的本質(zhì)永遠不是你會背多少道題而是你的知識體系是否完整、遇到問題是否有思路、以及能不能清楚地表達出來。7. 給你的最后一句話面試不是考試是雙向選擇每次面試完我都會立刻做一次復盤把沒答上來的問題記下來回家查資料弄懂再整理成自己的知識文檔。四家公司面完我已經(jīng)攢了一份幾十頁的手寫筆記后來這個筆記變成了我整理前端面試題的重要素材。這個方法我用了六年到現(xiàn)在依然有效。最后再分享一個心得面試的時候不要把自己放在“被挑選”的位置上。面試官在考察你你也在考察公司——團隊氛圍、技術(shù)棧、業(yè)務(wù)方向、面試官的水平都在透露這家公司是否適合你。雙向選擇的心態(tài)會讓你在面試中更松弛而松弛的狀態(tài)往往能讓你發(fā)揮出更好的水平。祝每個正在準備前端校招的你都能拿到心儀的offer。