去年年初我動了換工作的念頭前后斷斷續續面了十幾家公司從十幾人的小團隊到一線大廠的業務線都聊過。一年經驗去面試處境其實挺微妙你說自己是新人吧已經脫離了校招的池子你說自己有經驗吧又遠夠不著高級前端的門檻。面試官自己可能都在糾結該拿什么標準來考你。這篇文章就把我這一年經驗求職過程中被問過的高頻問題、踩過的坑、以及事后復盤總結出來的準備方法整理出來給同樣處在這個階段的朋友做個參考。我不想寫成那種 XX面試題大全 的收藏貼而是想聊聊更實際的東西一年經驗在面試中到底被怎么定位、八股文要背到什么程度、項目經驗怎么講才不像是流水賬、手寫題和場景題的思路怎么練。這些都直接關系到你能不能把這一年的積累在面試中充分展示出來。1. 一年經驗到底被面試官怎么定位——先搞清楚游戲規則一年經驗這個階段面試官對你的預期其實很明確能獨立承接需求有基本的工程素養遇到問題有自我驅動力去解決并且有成長潛力。他們不指望你現在就能做架構設計也不指望你能搞定疑難雜癥但前提是——基礎得扎實項目得是真的自己做的講得出細節。我一開始沒想明白這件事前期面試準備完全是按資深前端的標準去啃源碼、啃算法結果基礎題反而翻車了幾次。后來才反應過來一年經驗的面試更像是在驗證下限你是不是真的寫過一年代碼還是在公司打了一年雜。面試官會通過基礎題確認你的知識體系有沒有漏洞通過項目追問確認你的產出真實性和思考深度通過手寫題確認你的代碼功底。1.1 一年經驗 vs 應屆生 vs 三年經驗考察重心完全不同我把這幾個階段的考察差異整理成了一張表方便大家對號入座考察維度應屆生一年經驗三年經驗基礎知識概念是否了解概念 場景應用原理 邊界條件框架會調用API能講清原理大致流程能讀源碼、能封裝項目課程設計 / 實習內容真實業務 你的角色系統設計 技術決策代碼題LeetCode簡單/中等手寫常見JS方法 基礎算法復雜場景設計 性能優化系統設計基本不考簡單場景設計完整方案 擴展性考量從這張表能看出來一年經驗正好卡在一個中間態。面試官不會用校招標準只考你知道不知道也不會用社招高級標準考你架構能力有多強。他們真正想知道的是你在真實業務里有沒有獨立解決問題的經歷。所以準備策略就清晰了八股文不能只背概念必須每個知識點都能接一句這個在我項目里是這樣的……項目經驗不能只列功能清單必須能講清楚為什么這么做手寫題不能只背答案必須能處理邊界情況和追問。1.2 簡歷關項目描述決定你有沒有面試機會一年經驗投簡歷最吃虧的就是項目看起來像打雜。負責XX模塊的開發、參與XX系統的迭代這種描述HR和面試官一天能看幾百份根本留不下印象。我改簡歷前后的面試邀約率差距非常大核心變化就是把做了什么改成解決了什么問題、用了什么方案、帶來了什么結果。舉個例子同樣是寫一個后臺管理系統改前負責后臺管理系統的用戶管理模塊開發和維護。改后針對后臺用戶管理模塊權限混亂的問題基于RBAC模型設計了動態路由和按鈕級權限控制方案將越權操作工單量降低約40%。第二版明顯更能勾起面試官的興趣因為對方可以從里面挖出一連串可追問的點RBAC模型你具體怎么設計的動態路由怎么掛載的按鈕級權限是前端控制還是后端控制這些追問恰恰是你展示真實項目經驗的機會。簡歷上技術棧的寫法也注意一下。不要只寫熟練使用Vue/React盡量標出你在這個技術棧下做過的具體事比如基于Vue3 TypeScript開發了可配置化表單引擎、基于React Hooks封裝了通用請求狀態管理工具。技術點要能經得起追問簡歷上寫到的每一項都要準備好被深挖。2. 基礎八股文的真實火力范圍——哪些必背、哪些可以放一年經驗被問到的八股文范圍其實比想象中要收斂。面試官不會拿冷門偏題難為你翻來覆去就是那些高頻考點。但難點在于——你不能只會背定義得能講出場景、講出原理、接得住追問。我根據自己的面試經歷和身邊朋友的反饋整理了下面這個高頻考點表標注了一年前端應該掌握到的深度考點分類具體內容一年經驗應有的深度JS基礎閉包、作用域鏈、this、原型鏈能說出概念 至少一個實際應用場景異步編程事件循環、宏任務/微任務、Promise、async/await能現場分析一段代碼的輸出順序瀏覽器渲染流程、重排重繪、緩存機制能講出頁面性能優化的具體手段網絡HTTP緩存、跨域、HTTPS握手、WebSocket能講清原理 知道業務中怎么排查問題CSS布局、BFC、選擇器優先級、移動端適配能解決實際問題 解釋原因工程化Webpack/Vite基礎、模塊化、代碼規范能配置、能說出構建流程大致過程2.1 JS基礎八股閉包、事件循環、this 都要能接到業務上閉包幾乎是必問的。光是背出函數執行完后作用域不被銷毀這層概念已經不夠了面試官多半會追問一句你項目里哪里用到了閉包。我用的回答思路是這樣在組件庫開發中用閉包實現一個只有內部才能訪問的私有狀態或者用閉包做函數防抖把定時器ID緩存起來。只要能證明你不是在背概念而是真的在代碼里用過這個特性這題就過關了。事件循環的建議準備方式是找幾段代碼自己做輸出預測練習。比如console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);這種題能答對只是及格面試官還會繼續加問為什么Promise的回調會在setTimeout之前輸出宏任務和微任務在什么階段被消費這時候需要把事件循環的完整流程講一遍執行同步代碼 → 清空微任務隊列 → 取一個宏任務執行 → 再清空微任務隊列。用這個模型去套上面這段代碼輸出順序就很清楚了。關于this與其背四條規定不如理解函數被調用時決定this指向這句話。箭頭函數本身沒有this所以它的this繼承自定義時的外層作用域普通函數的this看調用方式bind/apply/call可以顯式綁定。面試常考的連環題基本都是從這個原點推導出來的。2.2 CSS和瀏覽器渲染定位和性能問題最常被問到盒模型、BFC、flex布局這些屬于送分題但有兩塊內容一年經驗反而容易翻車移動端適配和渲染性能。移動端適配被問到的概率很高面試官通常不會直接問rem和vw有什么區別而是給一個場景設計稿是750寬你要適配不同尺寸的手機方案怎么選這個問題的答法可以分三層先說viewport設置是基礎再說rem方案依賴根元素字號配合postcss-pxtorem做自動轉換最后說vw/vh更直觀但要注意兼容性和最小字體限制。能把這些方案的優缺點和取舍講清楚比單純背概念要加分得多。渲染性能這一塊核心是重排和重繪改樣式觸發重繪、改布局觸發重排、重排必然導致重繪。面試官如果追問頁面滾動很卡怎么排查可以從三個方向答減少重排的樣式操作比如用transform替代top/left、用requestAnimationFrame做動畫節流、對高頻事件scroll/resize做防抖節流。這些如果平時有過真實的性能排查經驗講出來會讓面試官覺得你不是只會背書的類型。2.3 網絡題緩存是重點跨域和鑒權跟著項目走HTTP緩存在我面過的公司里被問到概率接近100%而且經常配一道場景題你的頁面接口返回數據偶爾是舊的怎么排查這類問題的分析思路是固定的先看響應頭里有沒有Cache-Control有沒有ETag/Last-Modified強緩存命中就不會發請求如果發了請求但用舊數據說明協商緩存邏輯有問題可能是后端返回的資源沒帶正確的ETag前端能做的是在靜態資源URL上加hash參數或者在接口請求里加隨機參數繞過緩存。這個排查鏈路能講完整基本就是面試官想要的答案。跨域問得也多。JSONP、CORS預檢、反向代理devServer proxy / nginx這三個方案一定要能各講出一段適用場景。比如為什么開發環境用proxy就行生產環境反而得后端配CORS或網關處理——因為瀏覽器攔截的是請求響應不是請求發出代理服務器轉發就沒有跨域限制。鑒權這一塊一年經驗通常不會被問得太深但token存在哪里這種經典問題要準備好。localStorage和cookie的取舍、為什么推薦httpOnly的cookie方案可以防XSS竊取、token過期后怎么用refreshToken續期——這些如果能結合自己項目的登錄流程講出來屬于明顯的加分項。3. 框架題不再是背API——React和Vue問到哪一層一年經驗去面試框架這塊的問題明顯和校招不一樣了。校招問Vue的生命周期有哪些一年經驗會問你和后端聯調時接口請求放在哪個生命周期/鉤子里為什么、組件更新時如何避免多余的渲染。這說明面試官默認你會用框架現在考察的是你理解不理解框架運作的背后邏輯。3.1 ReactHooks原理和渲染優化是兩大核心React崗位一面基本不離Hooks。useState、useEffect、useMemo、useCallback這幾個要能講出源碼層面的原理和實際場景。useEffect最常見的追問是為什么不能在里面直接寫async函數這個問題的本質是React要求在effect回調里返回一個清理函數或undefined而async函數返回的永遠是一個Promise。面試官真正想通過這個問題考察你有沒有仔細讀過報錯信息、理解React對effect執行時機的約束。渲染優化是另一個重點。面試官會問一個很實際的問題父組件重新渲染時子組件也跟著渲染了但子組件的數據沒有變化怎么優化答案核心是React.memo和useMemo/useCallback。但比答案更重要的是你是否理解memo只做淺比較這件事——如果props里傳的是對象字面量或箭頭函數memo就失效了所以必須配合useMemo和useCallback來保證引用不變。這一條鏈路能講清楚說明你是真的在用React而不是只會搭頁面。虛擬DOM和diff算法被問到的頻率也很高。一年經驗不需要把源碼里每個函數都背出來但至少要能講清楚為什么需要虛擬DOM跨平臺 批量更新、diff算法的大致流程同層比較、key的作用、為什么key不要用index列表增刪時可能導致節點復用錯亂。3.2 Vue響應式原理和編譯優化是加分項Vue崗位會被問到Vue2和Vue3響應式原理的區別。Object.defineProperty 監聽的是對象屬性所以Vue2里新增屬性不會觸發更新需要Vue.set而Proxy代理的是整個對象可以攔截屬性增刪和in操作符。能把這個區別講清楚再引申到Vue3為什么性能更好的問題上就很有說服力了。computed和watch的區別也是高頻題。核心區別在于computed有緩存、支持依賴追蹤、適合做派生狀態watch更偏向命令式地監聽變化后執行副作用。我一般用一個例子說明購物車里商品總價用computed因為只要商品列表或單價不變總價就不需要重新計算而監聽路由參數變化去做數據請求用watch更合適。nextTick的實現原理、keep-alive的作用、slot的作用域問題這些如果簡歷里寫了會用到相關項目都值得準備。整體思路就是不要只背nextTick是異步更新DOM后執行回調要能說出Vue的DOM更新是異步批量的所以修改數據后不能立刻拿到最新DOM需要nextTick。3.3 微前端和組件庫一年經驗也被問的工程化話題我在面試中被問到過微前端當時很意外因為感覺微前端適合中大團隊玩我們小團隊怎么會用到。后來越來越多公司問這個問題其實是想考察你對團隊協作、多應用管理的理解。微前端核心要能講清楚三件事為什么需要不同團隊維護不同技術棧的應用、獨立部署、增量遷移、常見方案是什么qiankun基于single-spa的JS沙箱和樣式隔離、module federation的運行時共享依賴、拆分的粒度怎么控制主應用只做導航和注冊子應用獨立開發部署。如果實際沒做過可以說技術選型調研階段我了解過xxx方案但千萬別編。組件庫相關的問題問得也很多尤其是簡歷里寫了封裝過通用組件的話。面試官大概率會追著問你封裝的組件怎么設計API、怎么處理受控和非受控、樣式方案是怎么做的。這些沒有標準答案但要有自己的設計思路。我通常按這個框架答先分析業務里高頻出現的UI模式抽象出基礎組件API設計上支持默認值、暴露事件回調、支持自定義插槽/children樣式用CSS變量做主題定制而非每個組件寫死顏色。4. 項目經驗怎么講才不會變成流水賬——STAR法則和亮點提煉項目經驗是面試的重頭戲也是最容易講砸的部分。我早期面試犯的典型錯誤是把項目從頭到尾按功能模塊講一遍我做了用戶管理、我做了訂單列表、我做了報表導出面試官聽完面無表情完全沒有追問的欲望。后來我才意識到項目經驗的目標不是讓面試官知道你做了什么功能而是讓他通過你的講述評價你解決問題的能力和技術判斷力。正確的方法是用STAR法則組織背景Situation、任務Task、行動Action、結果Result。更重要的是講的過程中要有意識地埋技術亮點引導面試官往你準備好的方向上追問。4.1 項目案例大文件上傳用Web Worker每一步都要能講出為什么如果簡歷里寫過基于Web Worker實現大文件上傳面試官大概率會抓住不放。這個案例我完整講一遍我的準備模板背景業務里用戶需要上傳幾百MB的視頻文件原來直接上傳會導致頁面卡死、失敗率很高。任務設計一個不阻塞UI的大文件上傳方案。行動上分四步第一步文件分片。用file.slice按固定大小比如5MB切分文件分片列表管理上傳進度。為什么分片一是大文件整體上傳一旦失敗就要重傳分片后可以單獨重試失敗的分片二是瀏覽器對單個請求體大小有限制分片能規避。第二步計算文件哈希。為了支持斷點續傳和秒傳需要給文件算一個唯一標識。哈希計算是CPU密集型的幾GB的文件在主線程算會把頁面卡死。所以這里放到Web Worker里做。Worker里用SparkMD5庫計算主線程只接收進度更新并渲染進度條。第三步并發控制。如果幾百個分片同時上傳瀏覽器會建立大量TCP連接反而拖慢速度甚至報錯。實現上用一個簡單的并發池控制同時上傳的分片數量比如限制同時5個。這里可以提一下怎么處理上傳失敗的分片失敗隊列 自動重試重試次數超過3次就標記失敗允許用戶手動點擊重試。第四步斷點續傳。把已經上傳成功的分片索引存到localStorage或IndexedDB里。用戶中斷后再次選擇同一個文件通過哈希比對只上傳未完成的分片。結果上傳失敗率從原來的15%降到2%左右大文件上傳時頁面操作依然流暢。結果要有數字最好沒有數字就講頁面在計算哈希的過程中不再卡死這種對比感受。這套方案講完面試官通常會追問Web Worker和主線程怎么通信、postMessage傳遞的是什么類型的數據、為什么不用Service Worker做、并發控制具體怎么實現。都需要提前準備一輪。4.2 基礎功能也能講出深度以字典管理為例有一次面試官問系統管理下的字典管理一般有啥用我一開始覺得很基礎差點回答得很敷衍。后來整理答案的時候才發現這個題其實可以答出很多層次。第一層講清字典是什么把性別、狀態、類型這類業務枚舉值從代碼中抽離出來統一維護在數據庫或配置文件中前端根據字典類型拉取選項列表。第二層講清它解決的問題產品改文案不用發版、不同端共用一套枚舉、權限和翻譯統一處理。第三層講代碼層面會做哪些事封裝字典Hooks或組件把字典加載、緩存、翻譯邏輯收斂在同一個模塊里提升加載速度用緩存或預取考慮字典變更時的刷新策略。基礎功能講出業務理解和工程化思考比講一堆花哨技術更能反映真實水平。面試官真正想知道的是你做了這個功能有沒有想過為什么這么做、還能怎么做得更好。4.3 追問怎么扛技術選型的理由和取舍項目經驗里最怕的就是被問到你為什么用這個方案。比如用Web Worker做哈希面試官可能追問用requestIdleCallback在主線程分片計算行不行、直接用文件內容做hash的一部分但只讀取首尾幾MB做抽樣hash行不行。這種問題沒有絕對的對錯考察的是你有沒有想過方案的邊界。我的經驗是任何一個技術選型都要準備至少兩個備選方案和它們各自的優缺點。用技術選型對比的思路去講比單點講我用了什么要穩得多。比如上傳并發控制手寫并發池 vs 使用p-limit庫。手寫能更靈活控制失敗重試邏輯但需要自己測試各種邊界p-limit經過了大量生產環境驗證但想定制特定行為時不一定滿足。斷點續傳的存儲localStorage vs IndexedDB。localStorage簡單但容量只有5MB存幾百個分片索引可能不夠IndexedDB容量大、支持異步讀寫但API更復雜。哈希計算SparkMD5全量計算 vs 抽樣計算。全量計算準確率高但耗時抽樣計算快但存在不同文件算出相同哈希的風險。每一條都能展開講上兩三分鐘而且會讓面試官覺得你有技術判斷力。5. 手寫題與場景設計題——面試官真正想看的思維過程手寫題是面試中翻車率最高的環節。倒不是因為題有多難而是很多候選人背答案背得太機械一被追問邊界條件就露餡。面試官要考察的從來不是你背過這道題而是你在現場能不能像寫業務代碼一樣結構清晰、考慮周全地把一個函數實現出來。5.1 高頻手寫題的正確練習姿勢我把一年經驗遇到的高頻手寫題分成三類每一類說下準備建議第一類是工具函數防抖節流、深拷貝、數組去重、數組拍平、函數柯里化。這類題的核心是邊界條件。拿深拷貝舉例很多人能寫遞歸版本但面試官追問循環引用怎么辦就卡住。正確做法是引入WeakMap作為緩存已經拷貝過的對象直接返回緩存中的引用還要考慮Date、RegExp這類非普通對象以及Symbol屬性是否需要拷貝。答案要求不是能跑而是生產環境可用的代碼。第二類是Promise相關手寫Promise.all、Promise.race、Promise.allSettled。這類題核心是理解Promise的狀態機pending → fulfilled / rejected狀態一旦改變就不可逆。寫Promise.all時要注意傳入的參數可能不是Promise數組需要先用Promise.resolve統一包裝任何一個reject都要讓整個all走reject分支結果數組要保持和輸入相同的順序。第三類是設計模式或原理模擬發布訂閱EventEmitter、實現一個簡單的響應式系統。這類題考察的是對框架底層原理的理解。比如實現響應式系統思路是defineProperty/Proxy攔截get和setget時收集依賴set時觸發更新。能把這個流程寫出來配合Vue3響應式原理一起講效果會很好。5.2 場景設計題的基本框架從權限系統說起場景設計題不是系統設計那種大而全的架構設計而是給你一個小而具體的業務需求看你能不能給出一個完整的前端落地方案。一年經驗最常見的是設計一個按鈕級權限控制方案。我的回答框架分四步第一步定義權限模型。常見的是RBAC基于角色的訪問控制用戶 → 角色 → 權限。前端拿到的是當前用戶的權限碼列表比如 [user:add, user:delete]。第二步權限碼的生成和后端接口對接。后端登錄接口返回權限碼或角色前端存到狀態管理里。需要考慮權限變化了怎么刷新token過期重新登錄后權限怎么重新拉取第三步前端如何控制。按鈕級權限一般用自定義指令Vue的v-permission或HOCReact的withPermission包裹內部判斷權限碼列表里是否有目標權限。動態路由則是根據權限過濾路由表后addRoute掛載。第四步安全邊界。要明確指出前端控制按鈕只是用戶體驗層面的手段真正的安全校驗必須后端再做一道。如果面試官追問用戶通過瀏覽器控制臺直接調接口怎么辦要能接住接口層面必須做鑒權前端只是不可依賴的展示層優化。5.3 一道完整的設計題走一遍前端告警通知中心有一次面試官讓我現場設計一個前端告警通知中心從需求梳理到落地方案。這類題沒有標準答案但考察的是你拆解問題的能力。我當時的回答結構通知類型全局頂部提示、站內信列表、郵件/短信等外部通知。每一類的展示形式和對用戶的打擾程度不同。實時性站內信和頂部提示需要實時性。實現方案有WebSocket長連接、SSEServer-Sent Events、輪詢三種。我重點對比了WebSocket和SSEWebSocket全雙工、適合雙向通信比如聊天SSE是單向服務端推送、基于HTTP、自動重連、斷線續傳更簡單。通知中心只需要服務端推送給前端用SSE更輕量。但如果業務里已經有WebSocket基礎設施也可以復用。未讀已讀前端維護消息狀態調用接口標記已讀。未讀數字可以放在全局狀態管理里接收新消息時自增點擊查看后調接口并減對應數量。這里要處理多標簽頁同步如果用戶開了兩個標簽頁一個已讀了另一個未讀數怎么同步可以用BroadcastChannel或storage事件跨標簽頁通信。消息列表的分頁和滾動加載一般是分頁加載下拉加載更多要求高的場景用虛擬列表。一年經驗能講到分頁就夠虛擬列表可以提一句了解原理。高頻消息的節流如果服務端一次性推過來幾十條告警不能全部彈頂部提示否則用戶會被打擾。需要節流策略比如2秒內最多彈出1條其余消息只進列表和未讀計數。這個題被認可不是因為我的方案有多高級而是我把問題拆成了幾個明確的小模塊每一塊都有實現思路和取舍理由。場景設計題考察的正是這種結構化思考能力。6. 綜合面與HR面——能力之外的決定性因素技術面過了之后綜合面和HR面往往被很多人忽視但實際上這一關也會刷人而且刷得莫名其妙。一年經驗的候選人最常見的失敗原因集中在離職原因給面試官留下負面印象、職業規劃說得太空、期望薪資完全沒依據。6.1 離職原因和職業規劃怎么回答不踩雷離職原因的核心原則只有一條不要在面試中表達對前公司的負面情緒。加班太多、領導不行、技術太舊這類說法哪怕說的是事實在面試官聽來也會變成這個人來了之后也可能這樣說我。更安全的說法是圍繞個人成長和技術方向來展開比如我希望接觸更大規模的前端工程化實踐現在的項目體量已經到瓶頸了。職業規劃這個問題一年經驗的回答重點要落在未來1-2年能在這個崗位做些什么。不要說我打算三年內做架構師這種空話。更務實的說法是短期先把當前技術棧做深希望能參與團隊的基礎設施建設比如組件庫、工程化工具鏈中期希望能獨立負責一條業務線的前端技術方案。聽起來有目標但又不顯得浮躁。6.2 期望薪資一年經驗的合理報價邏輯期望薪資沒有固定數字要結合你當前的薪資基數、跳槽的漲幅空間、所在城市的行情來報。一年經驗跳槽合理的漲幅區間通常在15%-30%之間除非你面試表現特別突出或者同時手握多個offer可以競價。報價的策略是先給區間再解釋區間背后的理由。比如我目前是月薪12k一年下來大約14薪。基于當前市場和我面試的崗位復雜度我期望在15k以上。這樣既給了空間又說明了數字不是亂報的。如果HR壓價可以問清楚薪資結構——固定薪資、績效占比、年終獎規則這些因素都要考慮進去。6.3 反問環節問什么能讓面試官覺得你靠譜反問環節最怕冷場和問出敏感話題。加班多不多這種問題不是不能問但最好不要在第一輪就問容易讓面試官覺得你優先考慮的是摸魚而不是做事。更推薦問的是這個崗位進來后前三個月最需要解決的問題是什么——展示你的目標感。團隊目前前端最大的技術挑戰是什么——展示你對技術方向的關注。這個崗位之前的人是什么原因離開的——這個要謹慎看面試官狀態問得好能了解很多信息。反問環節的核心是讓面試官覺得你在認真評估這個機會是否合適而不是單純在找工作。工作一年多去面試我自己的體會是這一年積累的技術深度和項目經驗在面試中能不能被看見取決于你怎么組織、怎么表達。面試本質上是一場“展示思維過程”的游戲——八股文背后是知識的扎實程度項目經驗背后是解決問題的真實經歷手寫題背后是代碼的工程素養。與其焦慮“我經驗不夠”不如先把自己的項目好好梳理一遍把每一個技術選型的理由都想清楚。最后分享一個小技巧每次面試結束趁記憶還熱乎把被問到的問題記錄下來標出哪些答得好、哪些卡殼了。卡殼的地方就是下一次需要補的方向。面了五六家之后你會發現自己對高頻問題的回答越來越順因為那些問題翻來覆去就那么多。面試不僅是找一個新工作也是逼自己把過去一年的積累重新整理一遍的過程——不管結果如何這個整理本身就很值。