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