金三銀四又到了朋友圈里跳槽的人明顯多起來了。前陣子我也剛結(jié)束一輪社招面試投了十來家前端崗從前期的簡歷打磨到后期的復盤談薪整個流程走下來收獲不少。這篇文章不聊虛的純粹把我面試遇到的真實題目、踩過的坑、摸索出來的準備方法整理出來給正在看機會或者準備看機會的朋友一個參考尤其是工作兩三年想挪一挪位置的前端同行。我這輪面的是社招前端崗方向偏中后臺和可視化也有涉及移動端 H5 和微前端的場景。雖然每家公司的側(cè)重點不太一樣但整體來看社招面試和校招最大的區(qū)別在于沒人太關(guān)心你把八股文背得多熟而是關(guān)心你真正做過多復雜的項目、遇到問題怎么解決、代碼質(zhì)量靠不靠譜。抓住這一點整個準備思路就能清晰很多。1. 面試前一個月簡歷、項目梳理和投遞節(jié)奏1.1 簡歷怎么改才不會被篩掉我在這次跳槽前先做了一件事把舊簡歷拿出來重新審視發(fā)現(xiàn)問題一大堆。最典型的就是把技術(shù)棧列了一長串什么 vue2 vue3 react uni-app 小程序全寫上看著百花齊放其實容易被 HR 歸入“什么都會一點但什么都不精”的池子。后來改成了“主 Vue 3 TypeScript熟練使用 Vite 和 Webpack能上手 React”這版明顯回復率高很多。再一個重點是項目描述。大多數(shù)人的簡歷寫項目是用 STAR 結(jié)構(gòu)但問題出在“行動”和“結(jié)果”寫得太虛。比如“負責某某管理系統(tǒng)開發(fā)”就是無效描述改成“主導訂單中心重構(gòu)將頁面首屏時間從 2.8s 優(yōu)化到 1.2s代碼體積減少 40%”這個才有記憶點。項目難點也要點出來比如“解決了大數(shù)據(jù)量表格渲染卡頓問題采用虛擬滾動方案列表渲染 10 萬行數(shù)據(jù)幀率穩(wěn)定在 50fps 以上”這就是能勾住面試官去提問的點。投遞節(jié)奏方面金三銀四其實不用急著第一周就海投。我個人的經(jīng)驗是先用兩三天把簡歷改到自認為七十分以上然后挑一家不是第一目標的公司先面一輪主要用來練手和暴露問題面完立刻復盤遇到答不上來的題馬上查漏補缺。帶著這輪經(jīng)驗再去面真正心儀的公司狀態(tài)會完全不一樣。1.2 項目梳理準備好一個能講 20 分鐘的主線故事社招面試基本逃不掉“講一個你最近做的項目”這個問題。我這次前兩場面試在這上面吃了虧講的時候東扯一句西扯一句面試官跟得也很吃力。后來我認真把手里最有技術(shù)含金量的一個項目拿出來按照固定框架重新梳理了一遍項目背景也就是為什么要做這個東西當時業(yè)務上面臨什么痛點。我的角色和職責是自己主導還是協(xié)作負責哪幾個模塊。技術(shù)選型為什么選 Vue 3 而不是 React為什么用 Zustand 而不用 Pinia。架構(gòu)和核心設計盡量畫清楚模塊關(guān)系把數(shù)據(jù)流講明白。遇到的最大難題比如歷史數(shù)據(jù)兼容、并發(fā)沖突、性能瓶頸以及我怎么定位和解決。最終結(jié)果和復盤包括數(shù)據(jù)指標和如果再讓我做一次哪里會不一樣。這套框架準備完以后我還會把每個環(huán)節(jié)可能被追問的細節(jié)都自己過一遍。比如提到虛擬滾動就要能講清楚它是怎么計算可視區(qū)、怎么復用 DOM 節(jié)點的否則面試官順著往下問兩三個層次就會露餡。項目故事一定要做到即使對方不是做你這個業(yè)務的人也能聽明白你做了什么、為什么這么做、做完效果怎么樣。2. 社招高頻考點八股文要背到什么程度才夠用2.1 基礎八股閉包、原型鏈、異步和事件循環(huán)說實話社招面試幾乎沒有哪家完全不問基礎的但大家問的方式已經(jīng)從“請解釋一下閉包”變成了“這段代碼輸出什么”或者“這個場景你會怎么設計”。所以光會背定義是不夠的得真的能吃透。異步和事件循環(huán)是最高頻的考察點幾乎每一面都會碰到。常見的考法有 setTimeout、Promise、async/await 混在一起讓你說輸出順序結(jié)合微任務和宏任務的執(zhí)行順序再深入到 requestAnimationFrame 和 requestIdleCallback 的時機區(qū)別。我之前一位面試官問得很刁鉆“如果 setTimeout 的延遲時間設為 0它真的會立即執(zhí)行嗎”這個問題看著簡單但要回答完整就得扯到瀏覽器最小時延、事件循環(huán)的當前任務隊列狀態(tài)還有定時器在后臺標簽頁的表現(xiàn)。閉包和原型鏈則是另一類常青樹。社招的追問往往更深入比如給了閉包問你“這個變量什么時候被回收”這就涉及到 V8 引擎的垃圾回收機制了。原型鏈也一樣面試官會讓你手寫一個實現(xiàn)繼承的代碼然后追問 ES6 class 和構(gòu)造函數(shù)繼承到底有什么區(qū)別、super 關(guān)鍵字是怎么工作的。這塊如果底子薄建議重新看一遍《JavaScript 高級程序設計》前幾章比只看面試題理解要扎實得多。2.2 框架和工程化Vue 和 React 到底怎么考我這輪面試遇到的主流框架題集中在 Vue 3 上React 也有一兩家問了。Vue 3 幾乎必問的是響應式原理computed 和 watch 的區(qū)別以及 setup 語法糖和選項式 API 的取舍。其中“Vue 3 的響應式為什么要從 Object.defineProperty 換成 Proxy”這個問題要把兩者的差異、局限性、以及 Vue 3 如何解決數(shù)組攔截和動態(tài)新增屬性這些問題講清楚才算是準備好了。接下來就是性能優(yōu)化、虛擬 DOM、diff 算法這類題。社招的虛擬 DOM 考法和校招不太一樣不是讓你背 patch 過程而是給你一個場景讓你分析渲染性能。比如一個列表組件里有 1000 個節(jié)點每秒鐘更新其中一個節(jié)點的數(shù)據(jù)整個列表都會重新渲染嗎怎么優(yōu)化。這些問題如果沒有真正調(diào)優(yōu)過線上項目單靠背題很容易卡殼。工程化方面問得比我想象的多。Vite 為什么比 Webpack 快、Tree Shaking 的原理、ESM 和 CJS 的區(qū)別、如何優(yōu)化 CI 構(gòu)建時間這些都是高頻題。還碰到一個讓我當時一愣的問題“你負責的前端項目構(gòu)建要 3 分鐘怎么優(yōu)化到 1 分鐘以內(nèi)”。這種題考察的不只是知識點而是你有沒有真的深入關(guān)注過構(gòu)建產(chǎn)物有沒有拆過包、配過緩存、搞過并行構(gòu)建。2.3 2026 年新趨勢AI 提效和微前端被問得很多跟往年不太一樣的是這輪面試好幾家公司都問到了 AI 相關(guān)的問題。不是讓我去造 AI而是問“你平時用 AI 工具提效嗎怎么用在日常開發(fā)里的”“你怎么保證 AI 生成的代碼質(zhì)量”。有一個公司甚至出了一個場景題如果讓你在一個舊系統(tǒng)里快速加一批 CRUD 頁面你會怎么借助 AI 完成同時保證代碼風格和類型安全。這種題沒有標準答案但很能反映一個人的工作習慣。我的回答是平時會用 AI 寫一些重復性的模板代碼、正則表達式、單元測試用例也會把復雜函數(shù)的注釋和文檔生成交給 AI但核心業(yè)務邏輯一定是我自己寫而且會對 AI 生成的代碼做嚴格 review尤其是類型定義和邊界條件。另外還會要求 AI 按團隊已有的代碼規(guī)范輸出方便直接接入。這個思路對方還比較認可。微前端也是被反復提到的點尤其是中大型公司。考察內(nèi)容包括 qiankun 的原理、JS 沙箱怎么隔離、樣式隔離怎么做、子應用之間怎么通信。光會說“用過 qiankun”是不夠的面試官會直接追問“如果你現(xiàn)在要設計一個微前端框架你會怎么設計應用加載機制”。這個問題要答好必須對 single-spa 的生命周期模型有理解知道 prefetch、沙箱機制、依賴共享這幾個方向。3. 面試輪次實戰(zhàn)記錄從一面到 HR 面的真實感受3.1 技術(shù)一面圍繞簡歷深挖和場景題技術(shù)一面的核心就是驗證簡歷的真實性所以面試官基本是圍繞簡歷上的技術(shù)棧和項目來問的。我這輪遇到的一面對我簡歷里寫的 Canvas 可視化項目特別感興趣連續(xù)問了一個多小時從坐標系轉(zhuǎn)換到 Canvas 的離屏渲染再到鼠標拾取元素時怎么判斷命中的圖形全程按著我的項目來走。一面也會有一些場景題常見的是“讓你設計一個前端日志上報系統(tǒng)你會怎么做”。這種題目表面考設計能力實際上考查的是對錯誤邊界、性能影響、數(shù)據(jù)結(jié)構(gòu)、上報策略這些方面的考量。我當時從監(jiān)控目標出發(fā)把錯誤捕獲分類、采樣率、批量上報、失敗重試、上報對主流程的影響這些點都說了對方又追問了“如果用戶已經(jīng)斷網(wǎng)離線日志怎么上報”參考方案是把日志存入 localStorage 或 IndexedDB下次網(wǎng)絡恢復時再統(tǒng)一發(fā)送。這些細節(jié)最好提前積累一些方案不然現(xiàn)場想容易結(jié)構(gòu)化不夠。一面最后通常會留幾分鐘讓我們反問這也是加分項可以問團隊的技術(shù)棧、項目的技術(shù)挑戰(zhàn)、上線節(jié)奏、團隊目前最頭痛的問題等等比問“加班多不多”要專業(yè)很多。3.2 技術(shù)二面/終面架構(gòu)思維和跨端能力的考驗二面一般不再是純編碼問答而是更偏向架構(gòu)設計、技術(shù)判斷和帶人協(xié)作的能力。我有一次終面被要求現(xiàn)場設計一個低代碼平臺的渲染器面試官還給出了約束不能使用第三方拖拽庫不能犧牲運行時性能。這種題必須邊問邊聊不要悶頭設計。我當時是先確認了目標用戶是后臺系統(tǒng)開發(fā)者而非運營人員然后拆成拖拽畫布、組件注冊、數(shù)據(jù)綁定和運行時渲染四塊。組件注冊用統(tǒng)一 schema 描述JSON 作為 DSL渲染器用遞歸組件樹方式實現(xiàn)。對方感興趣的是我如何處理用戶自定義組件和平臺內(nèi)置組件的差異我回答內(nèi)置組件打包進渲染器自定義組件走異步加載注冊表。面試官比較認可這種先反推場景再取舍方案的方式?？缍祟}也出現(xiàn)了幾次因為不少公司在做小程序和 H5 雙端復用。會問 Taro/uni-app 這種跨端框架的原理和局限比如如何在不同端適配 Router、Storage 等 API 差異。還有公司問到 Flutter 和 React Native 的選型問題雖然我不是這個方向的但思路要清楚核心看團隊資源是偏前端還是偏客戶端以及業(yè)務對動態(tài)化更新要求的程度。3.3 HR 面談薪、離職原因和個人規(guī)劃到最后 HR 面的時候大部分候選人都會松一口氣覺得技術(shù)關(guān)過了就穩(wěn)了。但其實 HR 面掛人的情況并不少見尤其在穩(wěn)定性評估上。我被問過“你為什么在這個時間點選擇看機會”“你前東家哪里讓你不滿意”“你的職業(yè)規(guī)劃是什么”這幾類問題回答需要坦誠但別抱怨前東家。談薪這塊我自己的經(jīng)驗是先用招聘軟件或者朋友打聽了解目標崗位的薪資帶寬然后給出一個合理且有依據(jù)的數(shù)字最好是“base 漲幅”的組合。不要上來就獅子大開口也別因為面了一輪很累就松口。HR 問有沒有其他 offer 時實事求是說自己在面哪些方向就行不必透露具體金額但可以說“目前有一個 30% 漲幅的機會在考慮中”讓對方知道你手里有籌碼。另外 HR 面一定會問入職時間一般一到兩周是比較合理的緩沖期方便交接手頭的工作。這方面建議提前跟現(xiàn)在的組長溝通好不要在面試期間就鬧出不愉快離職留個好口碑后續(xù)背調(diào)也順利。4. 手寫題和機試這些題目出現(xiàn)頻率最高4.1 手寫題高頻題型和解題模板社招手寫題跟校招不太一樣不太會考那種特別生僻的算法更偏實用性和原理驗證。我這輪遇到的高頻手寫題有手寫防抖和節(jié)流函數(shù)然后說說它們的應用場景區(qū)別。手寫深拷貝要求支持數(shù)組、日期、正則還要能解決循環(huán)引用。手寫 Promise.all、Promise.race有時候還會要求另寫一個 Promise.allSettled。實現(xiàn)一個簡單的 EventEmitter包含 on、off、once、emit。手寫一個組合函數(shù)的 compose。實現(xiàn)一個 flat 函數(shù)把多層嵌套數(shù)組展開要考慮深度參數(shù)。寫這些題的時候有兩個習慣特別加分第一是寫之前先口頭確認理解比如“你要的是一個支持迭代器和深度控制的 flat 嗎”能展示你的溝通意識和代碼審視能力。第二是寫完以后主動說一兩個邊界情況怎么處理比如深拷貝遇到循環(huán)引用用 WeakMapPromise.all 遇到非 Promise 項先做 Promise.resolve 轉(zhuǎn)換這很容易讓面試官印象分上漲。4.2 機試不是刷算法是在有限時間內(nèi)搭一個可用頁面這輪面試有一家公司給我安排了三個小時的機試要求用 Vue 3 TypeScript 實現(xiàn)一個帶搜索、篩選、分頁和詳情彈窗的列表頁數(shù)據(jù)由后端 mock 接口返回。整體看每個功能點都不難但坑在于三個小時要完成一整套頁面的工程搭建、組件拆分、類型定義和接口聯(lián)調(diào)時間非常緊張。我后來復盤了下機試比較合理的節(jié)奏前十五分鐘只用來讀題和設計目錄結(jié)構(gòu)先想清楚需要哪幾個組件、狀態(tài)放哪一層、接口怎么封裝再動手寫代碼。頁面骨架和接口先跑通實現(xiàn)完核心功能后再回來處理邊界狀態(tài)比如 loading、空數(shù)據(jù)、接口報錯。機試很看完成度功能完整比過度設計重要得多。另外有個細節(jié)容易被忽略就是機試代碼的工程化意識。即使是一個 demo 項目也有必要加上 ESLint 和基本的目錄分層體現(xiàn)出日常開發(fā)習慣是規(guī)范的。我記得那次機試我抽了十分鐘把接口層單獨拆了一個 api 目錄并寫了個簡單的 request 封裝面試官在復盤時還專門提到了這一點說“看得出平時寫代碼是比較規(guī)整的”。4.3 算法題不用刷題海但每個類型至少準備兩道社招前端對算法要求因公司而異大廠和部分中大型公司基本會面一兩道 leetcode 中等難度的算法題。我遇到的題型集中在數(shù)組和字符串處理、雙指針、哈希表、二叉樹的遍歷和層序、動態(tài)規(guī)劃的簡單題。比較典型的像“兩數(shù)之和”“最長無重復子串”“反轉(zhuǎn)鏈表”“二叉樹的最大深度”。準備算法不能靠臨時抱佛腳建議提前一個月開始每天抽半小時刷兩到三道高頻題。但這里有個容易走偏的地方就是很多人刷題只刷思路不動手面試時手寫代碼容易卡殼。所以建議每天堅持手敲代碼而不是只看題解。優(yōu)先把題解背熟還不如把思路真正弄懂因為面試時面試官大概率會追問“時間復雜度是多少”“為什么這樣可以保證不重復”。同時也別把算法當成唯一的衡量標準。我印象很深的是有一次算法題我用暴力解法寫出來了面試官沒有直接讓我優(yōu)化而是問我在真實業(yè)務場景里會不會這樣寫我回答會更關(guān)注數(shù)據(jù)量級和可讀性然后再討論是否需要優(yōu)化這個溝通過程也讓對方比較滿意。5. 面試后的復盤與 offer 決策別急著簽字5.1 面試記錄清單和復盤方法論每次面試結(jié)束后我會趁熱打鐵把面試全過程記錄下來。不是簡單寫“問了什么”而是做成表格把題目、我當時的回答、正確答案和差距分析分開列。這里有個非常重要的習慣凡是想不起來的題一定在當天查出答案并且用一句自己的話重新復述一遍而不是直接粘貼網(wǎng)上的答案。對我?guī)椭畲蟮氖前衙看未鸬貌缓玫膯栴}收集起來按知識點歸類。比如我發(fā)現(xiàn)自己在“瀏覽器緩存機制”這個點上被連續(xù)問掛了兩次就說明這個知識點是真的理解不到位而不是臨場緊張的問題。于是花了一個晚上把強緩存、協(xié)商緩存、緩存位置、緩存策略的完整鏈路重新梳理了一遍還畫了張流程圖。后面再被問到這個問題時能直接從整個鏈路而不是單個節(jié)點來回答明顯從容了很多。復盤時還有一點容易被忽略就是每次面試完我們作為候選人也要判斷這家公司是否適合自己。面試過程中面試官的技術(shù)水平、溝通耐心程度、提問的方式和角度其實很能反映團隊氛圍。如果一場面試里面試官全程都在追問有沒有背過標準答案而沒有給你空間展示實際解決問題的能力這種團隊進去之后大概率溝通成本也會很高。5.2 談 offer 時怎么比較和避坑到收 offer 的時候第一件事是不要只看月薪數(shù)字。我有個觀念是綜合年薪、公積金比例、年終獎發(fā)放方式、試用期時長和薪資折扣、加班強度、團隊技術(shù)棧匹配度、業(yè)務前景這些因素在一起才是一個完整的“價格”。很多公司在談薪資時把自己包裝得很慷慨但合同里有不少細節(jié)比如試用期薪資是 80%、年終獎是按績效浮動、入職一年后才能參與調(diào)薪這些一定要在簽字前問清楚。具體到公積金比例不同公司差異非常大。有公司按 5% 交有公司按 12% 交同樣是 20k 的月薪一年的公積金差距能到兩萬多這筆錢是實實在在的收益。建議在 HR 面的時候直接問清楚公積金比例和基數(shù)一般 HR 都會直接回答。另一個容易踩的坑是候選人的簡歷被 HR 拿去“養(yǎng)魚”。有的公司會同時推進多個候選人用你的 offer 去壓別人的價。面對這種情況最好的辦法就是保持自己的節(jié)奏不要表現(xiàn)出特別著急的傾向。如果對方問你有其他 offer 嗎能透露一個自己在等就可以不要謊報因為背調(diào)階段會核實實際情況。接不接 offer 最終還是要回歸到個人發(fā)展上跟對一個靠譜的團隊比多談兩三 k 月薪重要得多。6. 一些想對準備跳槽的朋友說的實在話寫到這里腦海里又過了一遍這輪跳槽的整個經(jīng)歷。最大的感受是前端這個行業(yè)確實越來越卷了但只要方法對社招面試沒有想象中那么可怕。第一不要只顧著刷題而忽略項目復盤。面試官問八股文考察的是基礎理解但面試官真正在意的深度是通過項目展示出來的。你在項目里踩過的每一個坑、做過的每一次優(yōu)化都是比背誦更有說服力的談資。第二準備要趁早。金三銀四真正面試高峰很集中等三月才開始改簡歷、梳理項目往往手忙腳亂。最好提前一到兩個月就開始準備面試題、刷算法、整理項目甚至可以先投幾家練練手。第三也是我個人踩過幾次坑之后的體會面試是雙向選擇保持好自己的節(jié)奏和底線。不要因為面掛了就否定自己也不要因為拿了幾個 offer 就盲目跳槽。把每一次面試當成一次免費的技術(shù)咨詢面試官提出的問題往往就是你技術(shù)盲區(qū)的提示面一次補一個盲點這種成長速度是平時工作中很難獲得的。希望這篇面經(jīng)能給正在準備前端社招的朋友帶來一些參考價值。面試沒有標準答案每個人的技術(shù)棧和項目經(jīng)歷也不一樣但準備的方法和心態(tài)是可以通用的。祝大家在這個金三銀四都能拿到心儀的 offer。