驗(yàn)前端面試攻略：基礎(chǔ)原理、工程化與性能優(yōu)化全解析)
三年經(jīng)驗(yàn)去面中大廠說(shuō)實(shí)話有點(diǎn)尷尬。說(shuō)你是新人吧該踩的坑都踩過(guò)了說(shuō)你資深吧離架構(gòu)設(shè)計(jì)、帶項(xiàng)目又還差一口氣。面試官很清楚這一點(diǎn)所以他們的考察方式會(huì)和面應(yīng)屆生完全不同——不會(huì)讓你背 API也不會(huì)一上來(lái)就聊微服務(wù)拆分而是用“基礎(chǔ)深度 工程落地 項(xiàng)目追問(wèn)”的組合拳一層層試探你的上限在哪里。不管你是準(zhǔn)備跳槽還是單純想看看行情這篇內(nèi)容都值得慢慢看。我把最近三個(gè)月面下來(lái)遇到的題目、踩過(guò)的坑、復(fù)盤出來(lái)的策略全部整理出來(lái)分成上下兩篇。上篇聚焦在準(zhǔn)備思路、基礎(chǔ)能力、框架原理和工程化這幾塊下篇再聊項(xiàng)目深挖、場(chǎng)景設(shè)計(jì)、HR 輪次和 offer 選擇。下面直接進(jìn)正題。1. 定位與準(zhǔn)備階段先搞清楚三年經(jīng)驗(yàn)到底在面什么1.1 三年經(jīng)驗(yàn)的真實(shí)考察邏輯三年經(jīng)驗(yàn)在大廠簡(jiǎn)歷池里的定位通常是“中級(jí)到高級(jí)的過(guò)渡區(qū)”。這意味著兩件事第一你的本職工作是能獨(dú)立交付的不需要人盯第二面試官會(huì)默認(rèn)你已經(jīng)具備了“參與設(shè)計(jì)”的潛力而不是只會(huì)寫頁(yè)面。所以你會(huì)發(fā)現(xiàn)面試中很少再出現(xiàn)“解釋一下 flex 布局”這類純記憶題取而代之的是“如果列表數(shù)據(jù)量上千你怎么優(yōu)化渲染”“你現(xiàn)在的項(xiàng)目里有沒(méi)有自己封裝過(guò)的組件為什么這么設(shè)計(jì)”。他們的核心目標(biāo)只有一個(gè)確認(rèn)你能不能在沒(méi)人告訴你怎么做的情況下自己找到合理方案。我在準(zhǔn)備階段就把自己的知識(shí)體系分了四個(gè)維度基礎(chǔ)語(yǔ)言能力、框架原理、工程化與性能、項(xiàng)目深挖。前三個(gè)是每輪面試的通用考察第四個(gè)才是決定能不能走到終面的關(guān)鍵。整個(gè)準(zhǔn)備周期我花了大概三周前兩周集中在基礎(chǔ)塊最后一周把項(xiàng)目從頭到尾重新過(guò)了一遍。1.2 簡(jiǎn)歷與項(xiàng)目準(zhǔn)備一條線講透別撒網(wǎng)三年經(jīng)驗(yàn)的簡(jiǎn)歷最容易犯的毛病是項(xiàng)目寫得多但每個(gè)都講不透。面試官時(shí)間有限他們不會(huì)因?yàn)槟銓懥肆鶄€(gè)項(xiàng)目就覺(jué)得你厲害反而會(huì)因?yàn)槊總€(gè)都只有一兩句話而懷疑你的深度。我的建議是重點(diǎn)寫一個(gè)最核心的項(xiàng)目其他項(xiàng)目簡(jiǎn)化成輔助支撐。核心項(xiàng)目怎么挑優(yōu)先選那種你參與了完整流程的從需求、方案設(shè)計(jì)、開(kāi)發(fā)到上線、后期迭代都有你身影的。如果沒(méi)有這樣的項(xiàng)目就選你最近做得最多、最了解技術(shù)細(xì)節(jié)的那個(gè)。簡(jiǎn)歷上對(duì)這個(gè)項(xiàng)目的描述不要只寫技術(shù)棧要寫清楚三個(gè)東西業(yè)務(wù)背景、你做了什么、結(jié)果怎么樣。比如“負(fù)責(zé)數(shù)據(jù)大屏的性能優(yōu)化首屏加載時(shí)間從 4 秒降到 1.2 秒”就比“使用 ECharts 實(shí)現(xiàn)數(shù)據(jù)可視化”強(qiáng)得多。準(zhǔn)備項(xiàng)目的時(shí)候還有個(gè)容易被忽略的點(diǎn)一定要把項(xiàng)目里最復(fù)雜的那一塊單獨(dú)拎出來(lái)寫好完整的技術(shù)方案。比如你做過(guò)權(quán)限系統(tǒng)那就把角色、菜單、按鈕三級(jí)權(quán)限的完整設(shè)計(jì)寫清楚比如你做過(guò)上傳功能那斷點(diǎn)續(xù)傳、文件分片、并發(fā)控制這些細(xì)節(jié)要如數(shù)家珍。面試官追問(wèn)的時(shí)候一個(gè)能頂住十連問(wèn)的項(xiàng)目遠(yuǎn)勝過(guò)十個(gè)只能講兩輪的淺項(xiàng)目。2. 基礎(chǔ)能力關(guān)JavaScript 與 TypeScript 的深度答法2.1 事件循環(huán)、閉包、this 這三個(gè)“老朋友”要答出新意這三道題是前端面試的入門菜但三年經(jīng)驗(yàn)的面試官不會(huì)滿足于你把概念背出來(lái)。以事件循環(huán)為例光說(shuō)“宏任務(wù)、微任務(wù)”已經(jīng)不夠了你要能完整地描述一次事件循環(huán)的完整流程并且能分析出瀏覽器和 Node.js 環(huán)境下的差異。我的答題思路是這樣的先說(shuō)概念事件循環(huán)就是 JavaScript 處理異步任務(wù)的機(jī)制因?yàn)?JS 是單線程的所以需要靠事件循環(huán)來(lái)調(diào)度任務(wù)然后說(shuō)宏任務(wù)和微任務(wù)的關(guān)系一個(gè)宏任務(wù)執(zhí)行完后會(huì)清空所有微任務(wù)再開(kāi)始下一個(gè)宏任務(wù)最后結(jié)合代碼示例告訴面試官這段代碼的輸出順序并解釋為什么。如果面試官繼續(xù)追問(wèn)瀏覽器和 Node.js 的差異我會(huì)補(bǔ)充說(shuō)瀏覽器有渲染階段而 Node.js 的 process.nextTick 會(huì)優(yōu)先于 Promise 微任務(wù)執(zhí)行。閉包這題同樣要有層次。不要只回答“函數(shù)能訪問(wèn)外部變量”而要講清楚閉包的形成條件、內(nèi)存回收機(jī)制、實(shí)際應(yīng)用場(chǎng)景。我會(huì)舉個(gè)實(shí)際業(yè)務(wù)例子表格組件里每個(gè)單元格有自己的狀態(tài)如果用全局變量就會(huì)互相污染于是用閉包把狀態(tài)隔離在函數(shù)內(nèi)部。這個(gè)例子既證明了概念理解又體現(xiàn)了工程經(jīng)驗(yàn)。this 指向題是最容易翻車的因?yàn)橐?guī)則多且容易繞。我建議準(zhǔn)備一個(gè)口訣式的總結(jié)默認(rèn)綁定獨(dú)立調(diào)用指向全局、隱式綁定對(duì)象.方法調(diào)用指向?qū)ο?、顯式綁定call/apply/bind、new 綁定指向新對(duì)象、箭頭函數(shù)不綁定 this由定義時(shí)的外層作用域決定。光背這個(gè)還不夠要能結(jié)合 Vue 或 React 的源碼場(chǎng)景說(shuō)出為什么某些寫法會(huì)丟失 this 指向怎么用箭頭函數(shù)或 bind 修復(fù)。2.2 類型系統(tǒng)從“會(huì)寫接口”到“會(huì)設(shè)計(jì)類型”TypeScript 在三年經(jīng)驗(yàn)面試中的比重明顯比初級(jí)高。面初級(jí)時(shí)可能問(wèn)還一些基本語(yǔ)法比如 interface 和 type 的區(qū)別面三年經(jīng)驗(yàn)時(shí)面試官會(huì)直接丟出一個(gè)場(chǎng)景讓你現(xiàn)場(chǎng)定義類型。我遇到的一個(gè)有代表性的題是給一個(gè)后端返回的多級(jí)菜單數(shù)據(jù)定義類型。初級(jí)答法是先定義 MenuItem 接口里面包含 children。但面試官追問(wèn)children 里能不能包含其他字段如果菜單有不同層級(jí)字段結(jié)構(gòu)不一樣怎么辦這就涉及到了類型體操要用遞歸類型、泛型約束、條件類型等特性來(lái)解決。所以這一關(guān)重點(diǎn)準(zhǔn)備的是泛型的約束與默認(rèn)值、聯(lián)合類型和交叉類型的區(qū)分、遞歸類型、還可以了解一下 infer 和模板字符串類型后者在處理事件名映射這種場(chǎng)景很實(shí)用。TypeScript 面試還有一個(gè)高頻題interface 和 type 到底怎么選我的答法是優(yōu)先用 interface 描述對(duì)象結(jié)構(gòu)因?yàn)樗梢员?extends 和 implements可讀性更好type 更適合描述聯(lián)合類型、交叉類型、函數(shù)類型、元組等不能通過(guò) interface 表達(dá)的場(chǎng)景。這樣答完面試官會(huì)認(rèn)為你不僅知道區(qū)別還知道在工程里怎么取舍。3. 框架源碼與原理關(guān)React、Vue 不能只會(huì)用3.1 React 核心機(jī)制從 render 到 commit 的完整鏈路React 相關(guān)的問(wèn)題在中大廠面試?yán)锏某霈F(xiàn)頻率非常高。如果你是 React 技術(shù)棧務(wù)必要把下面這條鏈路講順當(dāng)狀態(tài)更新時(shí)React 會(huì)經(jīng)過(guò) render 階段生成新的 React Element 樹(shù)然后進(jìn)行 diff 對(duì)比找出變化的部分最后進(jìn)入 commit 階段把變更同步到真實(shí) DOM。面試官在這個(gè)問(wèn)題上常用的追問(wèn)方式是diff 算法具體是怎么做的這里有三個(gè)核心優(yōu)化可以展開(kāi)說(shuō)第一只看同層節(jié)點(diǎn)不跨層級(jí)比較把 O(n3) 的復(fù)雜度降到了 O(n)第二通過(guò) key 屬性識(shí)別列表中的節(jié)點(diǎn)身份避免整棵子樹(shù)被重建第三不同類型元素直接重建整棵子樹(shù)比如從 div 換成 span。能清楚講出這三條基本就過(guò)了 diff 算法這關(guān)。Fiber 架構(gòu)在三年經(jīng)驗(yàn)面試中屬于拔高題但值得準(zhǔn)備。簡(jiǎn)單說(shuō)Fiber 把渲染工作拆成了可中斷的單元讓瀏覽器有空閑時(shí)間處理高優(yōu)先級(jí)事件。這個(gè)機(jī)制的最大價(jià)值是可以實(shí)現(xiàn)并發(fā)特性比如 useTransition 讓低優(yōu)先級(jí)更新可以被跳過(guò)。我建議準(zhǔn)備一個(gè)實(shí)際體感當(dāng)頁(yè)面輸入框輸入很快時(shí)列表更新如果阻塞了輸入那這個(gè)交互就會(huì)卡頓用 useTransition 標(biāo)記列表更新為低優(yōu)先級(jí)輸入就會(huì)流暢很多。這個(gè)例子比單純講概念更有說(shuō)服力。Hooks 的原理也常被問(wèn)到特別是 useState 和 useEffect 的執(zhí)行時(shí)機(jī)。一個(gè)高頻問(wèn)題為什么 Hooks 不能寫在條件語(yǔ)句里因?yàn)?React 是根據(jù)調(diào)用順序來(lái)記錄每個(gè) Hook 的對(duì)應(yīng)關(guān)系的條件語(yǔ)句會(huì)改變調(diào)用順序?qū)е聽(tīng)顟B(tài)錯(cuò)亂。這個(gè)問(wèn)題看起來(lái)簡(jiǎn)單但能答出背后的實(shí)現(xiàn)邏輯的人面試官通常會(huì)加分。3.2 Vue 響應(yīng)式原理從 Object.defineProperty 到 Proxy如果你投的是 Vue 技術(shù)棧的崗位響應(yīng)式原理就是核心中的核心。Vue 2 用的是 Object.definePropertyVue 3 用的是 Proxy。我在面試時(shí)被問(wèn)過(guò)一個(gè)很經(jīng)典的對(duì)比題Proxy 到底比 defineProperty 強(qiáng)在哪里答題要點(diǎn)有四條第一defineProperty 是劫持對(duì)象屬性新增屬性需要額外處理而 Proxy 代理的是整個(gè)對(duì)象新增屬性天然支持第二Proxy 支持?jǐn)?shù)組下標(biāo)變化、length 變化defineProperty 對(duì)數(shù)組的監(jiān)聽(tīng)需要重寫數(shù)組方法第三Proxy 性能更好不用遍歷對(duì)象的所有屬性去定義 getter/setter第四Proxy 支持 Map、Set、WeakMap 等更多數(shù)據(jù)結(jié)構(gòu)。Vue 的 diff 算法也是必考但注意 Vue 2 和 Vue 3 的 diff 是有區(qū)別的。Vue 2 是雙端 diff會(huì)從新舊兩個(gè)列表的頭和尾同時(shí)開(kāi)始比較Vue 3 采用了快速 diff 算法先處理相同的前綴和后綴節(jié)點(diǎn)剩余部分用最長(zhǎng)遞增子序列來(lái)做最小移動(dòng)。如果能把這個(gè)演進(jìn)過(guò)程講清楚面試官好感度會(huì)上升很多。3.3 框架選型對(duì)比題不要只擺優(yōu)缺點(diǎn)大廠面試很喜歡考選型題比如“如果讓你負(fù)責(zé)一個(gè)新項(xiàng)目你會(huì)選 Vue 還是 React”。很多人答這種題喜歡列優(yōu)缺點(diǎn)比如 React 生態(tài)好、Vue 上手快。但三年經(jīng)驗(yàn)的答法應(yīng)該是先反問(wèn)場(chǎng)景再給出選擇邏輯。比如我會(huì)先說(shuō)這取決于團(tuán)隊(duì)已有技術(shù)棧、項(xiàng)目類型、目標(biāo)用戶和團(tuán)隊(duì)學(xué)習(xí)成本。如果項(xiàng)目是重型管理后臺(tái)團(tuán)隊(duì)目前都在用 Vue那我會(huì)優(yōu)先選 Vue 3因?yàn)樗哪０逭Z(yǔ)法讓人更容易維護(hù)如果項(xiàng)目是面向 C 端的復(fù)雜交互產(chǎn)品且后續(xù)要接入大量社區(qū)庫(kù)那 React 可能更合適。這樣答的好處是你展示的不是“我更喜歡哪個(gè)框架”而是“我是怎么基于業(yè)務(wù)做技術(shù)決策的”這正好是三年經(jīng)驗(yàn)到高級(jí)工程師之間最需要展示的能力。4. 工程化與性能優(yōu)化關(guān)拼的就是落地能力4.1 構(gòu)建工具鏈從配置到原理的進(jìn)階路徑簡(jiǎn)歷上寫了 webpack 或 Vite 的話一定要做好被追問(wèn)的準(zhǔn)備。初級(jí)問(wèn)題會(huì)是“你配過(guò)哪些 loader 和 plugin”再往下就會(huì)問(wèn)“l(fā)oader 和 plugin 的區(qū)別是什么、執(zhí)行順序是怎樣的”。我的答法是loader 是一個(gè)轉(zhuǎn)換器把非 JS 文件轉(zhuǎn)成 webpack 可以處理的模塊在模塊解析階段執(zhí)行plugin 是一個(gè)擴(kuò)展器從打包優(yōu)化到資源管理到環(huán)境變量注入都可以干在 webpack 構(gòu)建的各個(gè)生命周期節(jié)點(diǎn)執(zhí)行。直觀理解的話loader 是“翻譯官”plugin 是“監(jiān)理”。還有一個(gè)高頻考點(diǎn)是打包體積優(yōu)化。我準(zhǔn)備的方案包括按需引入第三方庫(kù)比如 lodash 換 lodash-es、用 babel-plugin-import 按需引入組件庫(kù)、代碼分割動(dòng)態(tài) import 配合路由懶加載、CDN 加載公共包、壓縮圖片。準(zhǔn)備這些時(shí)不要只泛泛地說(shuō)“我用過(guò)這些”要把每個(gè)手段對(duì)應(yīng)的產(chǎn)物大小變化說(shuō)出來(lái)比如“引入按需加載后 vendor.js 從 1.5MB 降到了 600KB”這樣才顯得真實(shí)。Vite 在 2026 年已經(jīng)是很主流的選擇面試題也喜歡問(wèn)它和 webpack 的區(qū)別。核心要點(diǎn)是開(kāi)發(fā)環(huán)境 Vite 用原生 ES Module 提供模塊省掉了打包這一步所以冷啟動(dòng)和熱更新速度極快生產(chǎn)環(huán)境 Vite 用 Rollup 打包這是為了兼容性。更重要的是能說(shuō)出體驗(yàn)差異webpack 改一個(gè)核心模塊可能要等三秒Vite 是毫秒級(jí)雖然 webpack 也有持久化緩存優(yōu)化但整體體驗(yàn) Vite 明顯更順。4.2 性能優(yōu)化從指標(biāo)到手段的完整閉環(huán)性能優(yōu)化題的答題框架建議按“指標(biāo)—瓶頸—方案—驗(yàn)證”四步走。先說(shuō)要優(yōu)化哪幾個(gè)指標(biāo)首屏?xí)r間FCP、最大內(nèi)容繪制LCP、交互響應(yīng)INP、累積布局偏移CLS。然后說(shuō)怎么定位性能瓶頸用 Chrome DevTools 的 Performance 面板看主線程耗時(shí)用 Network 面板看請(qǐng)求瀑布圖。定位到瓶頸后再給方案。常見(jiàn)的方案我在面試中會(huì)分成幾個(gè)層面來(lái)說(shuō)網(wǎng)絡(luò)層面有 HTTP 緩存、CDN、資源預(yù)加載preload/prefetch、HTTP/2 并發(fā)請(qǐng)求構(gòu)建層面有代碼分割、tree-shaking、圖片壓縮和現(xiàn)代圖片格式webp/avif渲染層面有虛擬列表、懶加載、減少重排重繪、Web Worker 處理復(fù)雜計(jì)算。三年經(jīng)驗(yàn)面試最容易翻車的地方是只講方案不講驗(yàn)證。一定要補(bǔ)充你做完性能優(yōu)化后的數(shù)據(jù)指標(biāo)比如“優(yōu)化后 FCP 從 2.4s 降到 1.1sLCP 從 3.8s 降到 1.6s”。如果沒(méi)有真實(shí)數(shù)據(jù)也至少要說(shuō)清楚你計(jì)劃用什么工具去驗(yàn)證比如用 Lighthouse 跑分或者用 web-vitals 庫(kù)上報(bào)到監(jiān)控平臺(tái)。4.3 微前端與前端架構(gòu)中大廠繞不開(kāi)的話題微前端是最近幾年中大廠面試的?？陀绕涫亲鲋泻笈_(tái)系統(tǒng)的團(tuán)隊(duì)。我面的幾家公司里有三家都問(wèn)到了微前端。最常問(wèn)的問(wèn)題是為什么需要微前端我準(zhǔn)備的答法是從組織架構(gòu)角度切入大團(tuán)隊(duì)有多個(gè)子團(tuán)隊(duì)各自用不同技術(shù)棧如果都在一個(gè)代碼倉(cāng)庫(kù)里維護(hù)部署、發(fā)版、責(zé)任邊界都會(huì)很混亂微前端可以把每個(gè)子應(yīng)用獨(dú)立開(kāi)發(fā)、獨(dú)立部署最后在主應(yīng)用里通過(guò)路由或 iframe 組合起來(lái)。主流微前端方案對(duì)比也要了解qiankun 是基于 single-spa 包裝的子應(yīng)用通過(guò) HTML entry 加載JS 沙箱是 proxy 方式實(shí)現(xiàn)wujie 是騰訊的主打無(wú)侵入性和 better-style 隔離module federation 是 webpack5 內(nèi)置的可以讓應(yīng)用之間直接共享模塊但也有兼容性和版本管理的限制。面試中如果被問(wèn)“你會(huì)怎么選型”可以參考這樣答如果團(tuán)隊(duì)子應(yīng)用多且技術(shù)棧雜選 qiankun 更主流踩坑資料多如果要求改造成本和侵入性最低選 wujie如果團(tuán)隊(duì)已經(jīng)是 webpack5 全家桶可以考慮 module federation 來(lái)實(shí)現(xiàn)組件級(jí)共享。微前端的性能問(wèn)題和樣式隔離也常被追問(wèn)。性能方面通常會(huì)問(wèn)首屏加載優(yōu)化怎么做我的思路是主應(yīng)用負(fù)責(zé)首屏公共資源的加載子應(yīng)用走懶加載還可以用 preload 預(yù)加載首屏高頻子應(yīng)用。樣式隔離方面qiankun 是通過(guò)包裹容器和目標(biāo) CSS 前綴實(shí)現(xiàn)wujie 用 web component。萬(wàn)一子應(yīng)用樣式互相污染了優(yōu)先方案是約定命名空間組件庫(kù)用 CSS-in-JS 的話也可以緩解。5. 算法與手寫題有限時(shí)間內(nèi)的最優(yōu)策略5.1 三年經(jīng)驗(yàn)的算法準(zhǔn)備策略量力而行題型優(yōu)先說(shuō)實(shí)話三年經(jīng)驗(yàn)面試算法的難度一般不會(huì)太高除非你投的是核心前端團(tuán)隊(duì)或面對(duì)面算法要求高的崗位。大多數(shù)中大廠前端面試算法題的難度集中在 LeetCode 的 easy 到 middle 水平重點(diǎn)題型包括數(shù)組雙指針如兩數(shù)之和變種、盛最多水的容器、哈希表如無(wú)重復(fù)字符的最長(zhǎng)子串、鏈表如反轉(zhuǎn)鏈表、環(huán)形鏈表、二叉樹(shù)遍歷前中后序、層次遍歷、動(dòng)態(tài)規(guī)劃入門如爬樓梯、打家劫舍。我在準(zhǔn)備時(shí)用的策略是優(yōu)先級(jí)排序先把高頻題型刷兩遍再按標(biāo)簽集中刷 easy 題最后中間隔幾天做一次全真模擬限時(shí) 30 分鐘一題。時(shí)間不夠的話不推薦把 LeetCode 所有題刷完而是要刷“面經(jīng)中出現(xiàn)頻率高的題”。你可以在 LeetCode 的題解區(qū)按“字節(jié)”“騰訊”“阿里”等公司標(biāo)簽篩選高頻題也可以搜各家公司的前端面經(jīng)里附的算法題把這些題單獨(dú)整理到收藏夾。5.2 手寫題清單這些幾乎必考除了 LeetCode 算法題現(xiàn)場(chǎng)手寫工具函數(shù)和 API 實(shí)現(xiàn)也是前端面試的保留曲目。準(zhǔn)備三年經(jīng)驗(yàn)面試下面這些手寫題的高頻程度極高建議逐個(gè)過(guò)一遍手寫 Promise.all / Promise.race / Promise.any注意 Promise.all 的空數(shù)組、異常處理、結(jié)果順序Promise.race 的競(jìng)速邏輯手寫深拷貝要處理循環(huán)引用用 WeakMap 記錄、Date、RegExp、Map、Set 等特殊對(duì)象手寫防抖和節(jié)流說(shuō)清楚兩者區(qū)別能用在實(shí)際場(chǎng)景中手寫事件總線 EventEmitter實(shí)現(xiàn) on、off、emit、once注意 once 執(zhí)行一次后要自動(dòng)解綁手寫 instanceof、new、Object.create、call/apply/bind這幾個(gè)是 JS 基礎(chǔ)和高階知識(shí)點(diǎn)的結(jié)合手寫題的關(guān)鍵不在于把代碼寫正確還在于要能講清楚每一步為什么這樣寫。比如手寫 new 的時(shí)候要能說(shuō)出“創(chuàng)建一個(gè)新對(duì)象、原型連接、執(zhí)行構(gòu)造函數(shù)、判斷返回值類型”這四步對(duì)應(yīng)的代碼。面試官會(huì)通過(guò)追問(wèn)來(lái)驗(yàn)證你是否真的理解。6. 面試節(jié)奏與臨場(chǎng)細(xì)節(jié)不要在小事上摔跤6.1 一輪到三面的考察側(cè)重各有各的打法一般中大廠前端面試至少三輪技術(shù)面。一輪通常是技術(shù)功底面主要考基礎(chǔ)、框架和算法題目覆蓋廣但深度有限二輪是綜合能力面會(huì)進(jìn)入項(xiàng)目深挖、場(chǎng)景設(shè)計(jì)、技術(shù)選型也開(kāi)始考察溝通表達(dá)三輪是 leader 或團(tuán)隊(duì)負(fù)責(zé)人面更關(guān)注你的思考方式、技術(shù)廣度、對(duì)行業(yè)趨勢(shì)的理解有可能會(huì)出開(kāi)放性問(wèn)題。三輪的答題策略是完全不同的。一輪要穩(wěn)準(zhǔn)狠遇到知道的題快速答、答完整留出時(shí)間給后面的題不知道的直接說(shuō)“這塊我沒(méi)深入研究”不要瞎編但可以補(bǔ)充一句“我了解過(guò)的類似方案是……”。二輪要慢一點(diǎn)多展示思考過(guò)程面試官問(wèn)場(chǎng)景題時(shí)先講清楚“需求是什么、約束條件是什么”再給方案。三輪要有高度可以適當(dāng)引入你對(duì)前端發(fā)展趨勢(shì)的判斷比如 AI 輔助開(kāi)發(fā)、Server Components、WebAssembly 的落地場(chǎng)景但要有真實(shí)依據(jù)。6.2 面試中不會(huì)答的題怎么處理最得體沒(méi)有誰(shuí)能答對(duì)所有題關(guān)鍵是怎么處理不會(huì)的題。我在幾次面試?yán)锟偨Y(jié)出一套還算好用的應(yīng)對(duì)方式第一遇到完全沒(méi)聽(tīng)過(guò)的名詞先請(qǐng)求澄清說(shuō)“我對(duì)這個(gè)詞了解有限你指的是不是 XX 意思”有時(shí)候只是叫法不同第二部分會(huì)但說(shuō)不完整時(shí)先把自己確定的部分說(shuō)清楚再承認(rèn)“更深層的機(jī)制我沒(méi)有實(shí)際驗(yàn)證過(guò)”第三如果是設(shè)計(jì)題沒(méi)思路可以從已知的限制條件反推比如“如果是我做這個(gè)需求我會(huì)先保證穩(wěn)定的基礎(chǔ)功能再考慮擴(kuò)展”。最忌諱的是不懂裝懂。面試官做這行很多年一聽(tīng)就能分辨你是在編還是在講真實(shí)經(jīng)驗(yàn)。編一個(gè)答案哪怕當(dāng)時(shí)蒙混過(guò)去了后面被追問(wèn)一個(gè)問(wèn)題整個(gè)可信度就崩了。寧可承認(rèn)不足也要保證已經(jīng)說(shuō)出來(lái)的話都是可靠、真實(shí)的。注意面試本質(zhì)上是雙向選擇不要因?yàn)橐粌深}沒(méi)答好就心態(tài)崩了。把每一輪面試當(dāng)作一次免費(fèi)的技術(shù)交流和能力體檢答完就翻篇準(zhǔn)備下一場(chǎng)更重要。7. 寫在最后三年經(jīng)驗(yàn)面試的真實(shí)體感我面完這一輪下來(lái)最大的感受是三年經(jīng)驗(yàn)這個(gè)階段技術(shù)深度固然重要但面試官更在意的是你有沒(méi)有把技術(shù)用在真實(shí)業(yè)務(wù)里的能力。同樣一道性能優(yōu)化題能背出一堆方案的人很多但能把自己項(xiàng)目里的 LCP 從多少優(yōu)化到多少、中間遇到了什么坑、最后怎么驗(yàn)證的人才是真正能獨(dú)當(dāng)一面的人。所以如果你準(zhǔn)備跳槽我的建議很直接不要只看面經(jīng)背答案先把你自己正在做的項(xiàng)目徹底讀懂再回頭看基礎(chǔ)知識(shí)。很多面經(jīng)里看起來(lái)很高深的原理其實(shí)你項(xiàng)目里早就踩過(guò)了只是沒(méi)有系統(tǒng)的語(yǔ)言組織。把項(xiàng)目里踩過(guò)的坑、做過(guò)的決策、產(chǎn)出的數(shù)據(jù)完整復(fù)盤一遍你就已經(jīng)超過(guò)了大部分只刷題不看項(xiàng)目的候選人。下篇我會(huì)接著聊項(xiàng)目深挖怎么答、場(chǎng)景設(shè)計(jì)題怎么拆、HR 輪次有哪些坑、以及拿到多個(gè) offer 之后怎么選擇。如果你正在準(zhǔn)備跳槽可以先動(dòng)手把手里的項(xiàng)目復(fù)盤起來(lái)有什么拿不準(zhǔn)的歡迎留言區(qū)一起討論。 三年經(jīng)驗(yàn)前端面試攻略：基礎(chǔ)原理、工程化與性能優(yōu)化全解析
三年經(jīng)驗(yàn)去面中大廠說(shuō)實(shí)話有點(diǎn)尷尬。說(shuō)你是新人吧該踩的坑都踩過(guò)了說(shuō)你資深吧離架構(gòu)設(shè)計(jì)、帶項(xiàng)目又還差一口氣。面試官很清楚這一點(diǎn)所以他們的考察方式會(huì)和面應(yīng)屆生完全不同——不會(huì)讓你背 API也不會(huì)一上來(lái)就聊微服務(wù)拆分而是用“基礎(chǔ)深度 工程落地 項(xiàng)目追問(wèn)”的組合拳一層層試探你的上限在哪里。不管你是準(zhǔn)備跳槽還是單純想看看行情這篇內(nèi)容都值得慢慢看。我把最近三個(gè)月面下來(lái)遇到的題目、踩過(guò)的坑、復(fù)盤出來(lái)的策略全部整理出來(lái)分成上下兩篇。上篇聚焦在準(zhǔn)備思路、基礎(chǔ)能力、框架原理和工程化這幾塊下篇再聊項(xiàng)目深挖、場(chǎng)景設(shè)計(jì)、HR 輪次和 offer 選擇。下面直接進(jìn)正題。1. 定位與準(zhǔn)備階段先搞清楚三年經(jīng)驗(yàn)到底在面什么1.1 三年經(jīng)驗(yàn)的真實(shí)考察邏輯三年經(jīng)驗(yàn)在大廠簡(jiǎn)歷池里的定位通常是“中級(jí)到高級(jí)的過(guò)渡區(qū)”。這意味著兩件事第一你的本職工作是能獨(dú)立交付的不需要人盯第二面試官會(huì)默認(rèn)你已經(jīng)具備了“參與設(shè)計(jì)”的潛力而不是只會(huì)寫頁(yè)面。所以你會(huì)發(fā)現(xiàn)面試中很少再出現(xiàn)“解釋一下 flex 布局”這類純記憶題取而代之的是“如果列表數(shù)據(jù)量上千你怎么優(yōu)化渲染”“你現(xiàn)在的項(xiàng)目里有沒(méi)有自己封裝過(guò)的組件為什么這么設(shè)計(jì)”。他們的核心目標(biāo)只有一個(gè)確認(rèn)你能不能在沒(méi)人告訴你怎么做的情況下自己找到合理方案。我在準(zhǔn)備階段就把自己的知識(shí)體系分了四個(gè)維度基礎(chǔ)語(yǔ)言能力、框架原理、工程化與性能、項(xiàng)目深挖。前三個(gè)是每輪面試的通用考察第四個(gè)才是決定能不能走到終面的關(guān)鍵。整個(gè)準(zhǔn)備周期我花了大概三周前兩周集中在基礎(chǔ)塊最后一周把項(xiàng)目從頭到尾重新過(guò)了一遍。1.2 簡(jiǎn)歷與項(xiàng)目準(zhǔn)備一條線講透別撒網(wǎng)三年經(jīng)驗(yàn)的簡(jiǎn)歷最容易犯的毛病是項(xiàng)目寫得多但每個(gè)都講不透。面試官時(shí)間有限他們不會(huì)因?yàn)槟銓懥肆鶄€(gè)項(xiàng)目就覺(jué)得你厲害反而會(huì)因?yàn)槊總€(gè)都只有一兩句話而懷疑你的深度。我的建議是重點(diǎn)寫一個(gè)最核心的項(xiàng)目其他項(xiàng)目簡(jiǎn)化成輔助支撐。核心項(xiàng)目怎么挑優(yōu)先選那種你參與了完整流程的從需求、方案設(shè)計(jì)、開(kāi)發(fā)到上線、后期迭代都有你身影的。如果沒(méi)有這樣的項(xiàng)目就選你最近做得最多、最了解技術(shù)細(xì)節(jié)的那個(gè)。簡(jiǎn)歷上對(duì)這個(gè)項(xiàng)目的描述不要只寫技術(shù)棧要寫清楚三個(gè)東西業(yè)務(wù)背景、你做了什么、結(jié)果怎么樣。比如“負(fù)責(zé)數(shù)據(jù)大屏的性能優(yōu)化首屏加載時(shí)間從 4 秒降到 1.2 秒”就比“使用 ECharts 實(shí)現(xiàn)數(shù)據(jù)可視化”強(qiáng)得多。準(zhǔn)備項(xiàng)目的時(shí)候還有個(gè)容易被忽略的點(diǎn)一定要把項(xiàng)目里最復(fù)雜的那一塊單獨(dú)拎出來(lái)寫好完整的技術(shù)方案。比如你做過(guò)權(quán)限系統(tǒng)那就把角色、菜單、按鈕三級(jí)權(quán)限的完整設(shè)計(jì)寫清楚比如你做過(guò)上傳功能那斷點(diǎn)續(xù)傳、文件分片、并發(fā)控制這些細(xì)節(jié)要如數(shù)家珍。面試官追問(wèn)的時(shí)候一個(gè)能頂住十連問(wèn)的項(xiàng)目遠(yuǎn)勝過(guò)十個(gè)只能講兩輪的淺項(xiàng)目。2. 基礎(chǔ)能力關(guān)JavaScript 與 TypeScript 的深度答法2.1 事件循環(huán)、閉包、this 這三個(gè)“老朋友”要答出新意這三道題是前端面試的入門菜但三年經(jīng)驗(yàn)的面試官不會(huì)滿足于你把概念背出來(lái)。以事件循環(huán)為例光說(shuō)“宏任務(wù)、微任務(wù)”已經(jīng)不夠了你要能完整地描述一次事件循環(huán)的完整流程并且能分析出瀏覽器和 Node.js 環(huán)境下的差異。我的答題思路是這樣的先說(shuō)概念事件循環(huán)就是 JavaScript 處理異步任務(wù)的機(jī)制因?yàn)?JS 是單線程的所以需要靠事件循環(huán)來(lái)調(diào)度任務(wù)然后說(shuō)宏任務(wù)和微任務(wù)的關(guān)系一個(gè)宏任務(wù)執(zhí)行完后會(huì)清空所有微任務(wù)再開(kāi)始下一個(gè)宏任務(wù)最后結(jié)合代碼示例告訴面試官這段代碼的輸出順序并解釋為什么。如果面試官繼續(xù)追問(wèn)瀏覽器和 Node.js 的差異我會(huì)補(bǔ)充說(shuō)瀏覽器有渲染階段而 Node.js 的 process.nextTick 會(huì)優(yōu)先于 Promise 微任務(wù)執(zhí)行。閉包這題同樣要有層次。不要只回答“函數(shù)能訪問(wèn)外部變量”而要講清楚閉包的形成條件、內(nèi)存回收機(jī)制、實(shí)際應(yīng)用場(chǎng)景。我會(huì)舉個(gè)實(shí)際業(yè)務(wù)例子表格組件里每個(gè)單元格有自己的狀態(tài)如果用全局變量就會(huì)互相污染于是用閉包把狀態(tài)隔離在函數(shù)內(nèi)部。這個(gè)例子既證明了概念理解又體現(xiàn)了工程經(jīng)驗(yàn)。this 指向題是最容易翻車的因?yàn)橐?guī)則多且容易繞。我建議準(zhǔn)備一個(gè)口訣式的總結(jié)默認(rèn)綁定獨(dú)立調(diào)用指向全局、隱式綁定對(duì)象.方法調(diào)用指向?qū)ο?、顯式綁定call/apply/bind、new 綁定指向新對(duì)象、箭頭函數(shù)不綁定 this由定義時(shí)的外層作用域決定。光背這個(gè)還不夠要能結(jié)合 Vue 或 React 的源碼場(chǎng)景說(shuō)出為什么某些寫法會(huì)丟失 this 指向怎么用箭頭函數(shù)或 bind 修復(fù)。2.2 類型系統(tǒng)從“會(huì)寫接口”到“會(huì)設(shè)計(jì)類型”TypeScript 在三年經(jīng)驗(yàn)面試中的比重明顯比初級(jí)高。面初級(jí)時(shí)可能問(wèn)還一些基本語(yǔ)法比如 interface 和 type 的區(qū)別面三年經(jīng)驗(yàn)時(shí)面試官會(huì)直接丟出一個(gè)場(chǎng)景讓你現(xiàn)場(chǎng)定義類型。我遇到的一個(gè)有代表性的題是給一個(gè)后端返回的多級(jí)菜單數(shù)據(jù)定義類型。初級(jí)答法是先定義 MenuItem 接口里面包含 children。但面試官追問(wèn)children 里能不能包含其他字段如果菜單有不同層級(jí)字段結(jié)構(gòu)不一樣怎么辦這就涉及到了類型體操要用遞歸類型、泛型約束、條件類型等特性來(lái)解決。所以這一關(guān)重點(diǎn)準(zhǔn)備的是泛型的約束與默認(rèn)值、聯(lián)合類型和交叉類型的區(qū)分、遞歸類型、還可以了解一下 infer 和模板字符串類型后者在處理事件名映射這種場(chǎng)景很實(shí)用。TypeScript 面試還有一個(gè)高頻題interface 和 type 到底怎么選我的答法是優(yōu)先用 interface 描述對(duì)象結(jié)構(gòu)因?yàn)樗梢员?extends 和 implements可讀性更好type 更適合描述聯(lián)合類型、交叉類型、函數(shù)類型、元組等不能通過(guò) interface 表達(dá)的場(chǎng)景。這樣答完面試官會(huì)認(rèn)為你不僅知道區(qū)別還知道在工程里怎么取舍。3. 框架源碼與原理關(guān)React、Vue 不能只會(huì)用3.1 React 核心機(jī)制從 render 到 commit 的完整鏈路React 相關(guān)的問(wèn)題在中大廠面試?yán)锏某霈F(xiàn)頻率非常高。如果你是 React 技術(shù)棧務(wù)必要把下面這條鏈路講順當(dāng)狀態(tài)更新時(shí)React 會(huì)經(jīng)過(guò) render 階段生成新的 React Element 樹(shù)然后進(jìn)行 diff 對(duì)比找出變化的部分最后進(jìn)入 commit 階段把變更同步到真實(shí) DOM。面試官在這個(gè)問(wèn)題上常用的追問(wèn)方式是diff 算法具體是怎么做的這里有三個(gè)核心優(yōu)化可以展開(kāi)說(shuō)第一只看同層節(jié)點(diǎn)不跨層級(jí)比較把 O(n3) 的復(fù)雜度降到了 O(n)第二通過(guò) key 屬性識(shí)別列表中的節(jié)點(diǎn)身份避免整棵子樹(shù)被重建第三不同類型元素直接重建整棵子樹(shù)比如從 div 換成 span。能清楚講出這三條基本就過(guò)了 diff 算法這關(guān)。Fiber 架構(gòu)在三年經(jīng)驗(yàn)面試中屬于拔高題但值得準(zhǔn)備。簡(jiǎn)單說(shuō)Fiber 把渲染工作拆成了可中斷的單元讓瀏覽器有空閑時(shí)間處理高優(yōu)先級(jí)事件。這個(gè)機(jī)制的最大價(jià)值是可以實(shí)現(xiàn)并發(fā)特性比如 useTransition 讓低優(yōu)先級(jí)更新可以被跳過(guò)。我建議準(zhǔn)備一個(gè)實(shí)際體感當(dāng)頁(yè)面輸入框輸入很快時(shí)列表更新如果阻塞了輸入那這個(gè)交互就會(huì)卡頓用 useTransition 標(biāo)記列表更新為低優(yōu)先級(jí)輸入就會(huì)流暢很多。這個(gè)例子比單純講概念更有說(shuō)服力。Hooks 的原理也常被問(wèn)到特別是 useState 和 useEffect 的執(zhí)行時(shí)機(jī)。一個(gè)高頻問(wèn)題為什么 Hooks 不能寫在條件語(yǔ)句里因?yàn)?React 是根據(jù)調(diào)用順序來(lái)記錄每個(gè) Hook 的對(duì)應(yīng)關(guān)系的條件語(yǔ)句會(huì)改變調(diào)用順序?qū)е聽(tīng)顟B(tài)錯(cuò)亂。這個(gè)問(wèn)題看起來(lái)簡(jiǎn)單但能答出背后的實(shí)現(xiàn)邏輯的人面試官通常會(huì)加分。3.2 Vue 響應(yīng)式原理從 Object.defineProperty 到 Proxy如果你投的是 Vue 技術(shù)棧的崗位響應(yīng)式原理就是核心中的核心。Vue 2 用的是 Object.definePropertyVue 3 用的是 Proxy。我在面試時(shí)被問(wèn)過(guò)一個(gè)很經(jīng)典的對(duì)比題Proxy 到底比 defineProperty 強(qiáng)在哪里答題要點(diǎn)有四條第一defineProperty 是劫持對(duì)象屬性新增屬性需要額外處理而 Proxy 代理的是整個(gè)對(duì)象新增屬性天然支持第二Proxy 支持?jǐn)?shù)組下標(biāo)變化、length 變化defineProperty 對(duì)數(shù)組的監(jiān)聽(tīng)需要重寫數(shù)組方法第三Proxy 性能更好不用遍歷對(duì)象的所有屬性去定義 getter/setter第四Proxy 支持 Map、Set、WeakMap 等更多數(shù)據(jù)結(jié)構(gòu)。Vue 的 diff 算法也是必考但注意 Vue 2 和 Vue 3 的 diff 是有區(qū)別的。Vue 2 是雙端 diff會(huì)從新舊兩個(gè)列表的頭和尾同時(shí)開(kāi)始比較Vue 3 采用了快速 diff 算法先處理相同的前綴和后綴節(jié)點(diǎn)剩余部分用最長(zhǎng)遞增子序列來(lái)做最小移動(dòng)。如果能把這個(gè)演進(jìn)過(guò)程講清楚面試官好感度會(huì)上升很多。3.3 框架選型對(duì)比題不要只擺優(yōu)缺點(diǎn)大廠面試很喜歡考選型題比如“如果讓你負(fù)責(zé)一個(gè)新項(xiàng)目你會(huì)選 Vue 還是 React”。很多人答這種題喜歡列優(yōu)缺點(diǎn)比如 React 生態(tài)好、Vue 上手快。但三年經(jīng)驗(yàn)的答法應(yīng)該是先反問(wèn)場(chǎng)景再給出選擇邏輯。比如我會(huì)先說(shuō)這取決于團(tuán)隊(duì)已有技術(shù)棧、項(xiàng)目類型、目標(biāo)用戶和團(tuán)隊(duì)學(xué)習(xí)成本。如果項(xiàng)目是重型管理后臺(tái)團(tuán)隊(duì)目前都在用 Vue那我會(huì)優(yōu)先選 Vue 3因?yàn)樗哪０逭Z(yǔ)法讓人更容易維護(hù)如果項(xiàng)目是面向 C 端的復(fù)雜交互產(chǎn)品且后續(xù)要接入大量社區(qū)庫(kù)那 React 可能更合適。這樣答的好處是你展示的不是“我更喜歡哪個(gè)框架”而是“我是怎么基于業(yè)務(wù)做技術(shù)決策的”這正好是三年經(jīng)驗(yàn)到高級(jí)工程師之間最需要展示的能力。4. 工程化與性能優(yōu)化關(guān)拼的就是落地能力4.1 構(gòu)建工具鏈從配置到原理的進(jìn)階路徑簡(jiǎn)歷上寫了 webpack 或 Vite 的話一定要做好被追問(wèn)的準(zhǔn)備。初級(jí)問(wèn)題會(huì)是“你配過(guò)哪些 loader 和 plugin”再往下就會(huì)問(wèn)“l(fā)oader 和 plugin 的區(qū)別是什么、執(zhí)行順序是怎樣的”。我的答法是loader 是一個(gè)轉(zhuǎn)換器把非 JS 文件轉(zhuǎn)成 webpack 可以處理的模塊在模塊解析階段執(zhí)行plugin 是一個(gè)擴(kuò)展器從打包優(yōu)化到資源管理到環(huán)境變量注入都可以干在 webpack 構(gòu)建的各個(gè)生命周期節(jié)點(diǎn)執(zhí)行。直觀理解的話loader 是“翻譯官”plugin 是“監(jiān)理”。還有一個(gè)高頻考點(diǎn)是打包體積優(yōu)化。我準(zhǔn)備的方案包括按需引入第三方庫(kù)比如 lodash 換 lodash-es、用 babel-plugin-import 按需引入組件庫(kù)、代碼分割動(dòng)態(tài) import 配合路由懶加載、CDN 加載公共包、壓縮圖片。準(zhǔn)備這些時(shí)不要只泛泛地說(shuō)“我用過(guò)這些”要把每個(gè)手段對(duì)應(yīng)的產(chǎn)物大小變化說(shuō)出來(lái)比如“引入按需加載后 vendor.js 從 1.5MB 降到了 600KB”這樣才顯得真實(shí)。Vite 在 2026 年已經(jīng)是很主流的選擇面試題也喜歡問(wèn)它和 webpack 的區(qū)別。核心要點(diǎn)是開(kāi)發(fā)環(huán)境 Vite 用原生 ES Module 提供模塊省掉了打包這一步所以冷啟動(dòng)和熱更新速度極快生產(chǎn)環(huán)境 Vite 用 Rollup 打包這是為了兼容性。更重要的是能說(shuō)出體驗(yàn)差異webpack 改一個(gè)核心模塊可能要等三秒Vite 是毫秒級(jí)雖然 webpack 也有持久化緩存優(yōu)化但整體體驗(yàn) Vite 明顯更順。4.2 性能優(yōu)化從指標(biāo)到手段的完整閉環(huán)性能優(yōu)化題的答題框架建議按“指標(biāo)—瓶頸—方案—驗(yàn)證”四步走。先說(shuō)要優(yōu)化哪幾個(gè)指標(biāo)首屏?xí)r間FCP、最大內(nèi)容繪制LCP、交互響應(yīng)INP、累積布局偏移CLS。然后說(shuō)怎么定位性能瓶頸用 Chrome DevTools 的 Performance 面板看主線程耗時(shí)用 Network 面板看請(qǐng)求瀑布圖。定位到瓶頸后再給方案。常見(jiàn)的方案我在面試中會(huì)分成幾個(gè)層面來(lái)說(shuō)網(wǎng)絡(luò)層面有 HTTP 緩存、CDN、資源預(yù)加載preload/prefetch、HTTP/2 并發(fā)請(qǐng)求構(gòu)建層面有代碼分割、tree-shaking、圖片壓縮和現(xiàn)代圖片格式webp/avif渲染層面有虛擬列表、懶加載、減少重排重繪、Web Worker 處理復(fù)雜計(jì)算。三年經(jīng)驗(yàn)面試最容易翻車的地方是只講方案不講驗(yàn)證。一定要補(bǔ)充你做完性能優(yōu)化后的數(shù)據(jù)指標(biāo)比如“優(yōu)化后 FCP 從 2.4s 降到 1.1sLCP 從 3.8s 降到 1.6s”。如果沒(méi)有真實(shí)數(shù)據(jù)也至少要說(shuō)清楚你計(jì)劃用什么工具去驗(yàn)證比如用 Lighthouse 跑分或者用 web-vitals 庫(kù)上報(bào)到監(jiān)控平臺(tái)。4.3 微前端與前端架構(gòu)中大廠繞不開(kāi)的話題微前端是最近幾年中大廠面試的?？陀绕涫亲鲋泻笈_(tái)系統(tǒng)的團(tuán)隊(duì)。我面的幾家公司里有三家都問(wèn)到了微前端。最常問(wèn)的問(wèn)題是為什么需要微前端我準(zhǔn)備的答法是從組織架構(gòu)角度切入大團(tuán)隊(duì)有多個(gè)子團(tuán)隊(duì)各自用不同技術(shù)棧如果都在一個(gè)代碼倉(cāng)庫(kù)里維護(hù)部署、發(fā)版、責(zé)任邊界都會(huì)很混亂微前端可以把每個(gè)子應(yīng)用獨(dú)立開(kāi)發(fā)、獨(dú)立部署最后在主應(yīng)用里通過(guò)路由或 iframe 組合起來(lái)。主流微前端方案對(duì)比也要了解qiankun 是基于 single-spa 包裝的子應(yīng)用通過(guò) HTML entry 加載JS 沙箱是 proxy 方式實(shí)現(xiàn)wujie 是騰訊的主打無(wú)侵入性和 better-style 隔離module federation 是 webpack5 內(nèi)置的可以讓應(yīng)用之間直接共享模塊但也有兼容性和版本管理的限制。面試中如果被問(wèn)“你會(huì)怎么選型”可以參考這樣答如果團(tuán)隊(duì)子應(yīng)用多且技術(shù)棧雜選 qiankun 更主流踩坑資料多如果要求改造成本和侵入性最低選 wujie如果團(tuán)隊(duì)已經(jīng)是 webpack5 全家桶可以考慮 module federation 來(lái)實(shí)現(xiàn)組件級(jí)共享。微前端的性能問(wèn)題和樣式隔離也常被追問(wèn)。性能方面通常會(huì)問(wèn)首屏加載優(yōu)化怎么做我的思路是主應(yīng)用負(fù)責(zé)首屏公共資源的加載子應(yīng)用走懶加載還可以用 preload 預(yù)加載首屏高頻子應(yīng)用。樣式隔離方面qiankun 是通過(guò)包裹容器和目標(biāo) CSS 前綴實(shí)現(xiàn)wujie 用 web component。萬(wàn)一子應(yīng)用樣式互相污染了優(yōu)先方案是約定命名空間組件庫(kù)用 CSS-in-JS 的話也可以緩解。5. 算法與手寫題有限時(shí)間內(nèi)的最優(yōu)策略5.1 三年經(jīng)驗(yàn)的算法準(zhǔn)備策略量力而行題型優(yōu)先說(shuō)實(shí)話三年經(jīng)驗(yàn)面試算法的難度一般不會(huì)太高除非你投的是核心前端團(tuán)隊(duì)或面對(duì)面算法要求高的崗位。大多數(shù)中大廠前端面試算法題的難度集中在 LeetCode 的 easy 到 middle 水平重點(diǎn)題型包括數(shù)組雙指針如兩數(shù)之和變種、盛最多水的容器、哈希表如無(wú)重復(fù)字符的最長(zhǎng)子串、鏈表如反轉(zhuǎn)鏈表、環(huán)形鏈表、二叉樹(shù)遍歷前中后序、層次遍歷、動(dòng)態(tài)規(guī)劃入門如爬樓梯、打家劫舍。我在準(zhǔn)備時(shí)用的策略是優(yōu)先級(jí)排序先把高頻題型刷兩遍再按標(biāo)簽集中刷 easy 題最后中間隔幾天做一次全真模擬限時(shí) 30 分鐘一題。時(shí)間不夠的話不推薦把 LeetCode 所有題刷完而是要刷“面經(jīng)中出現(xiàn)頻率高的題”。你可以在 LeetCode 的題解區(qū)按“字節(jié)”“騰訊”“阿里”等公司標(biāo)簽篩選高頻題也可以搜各家公司的前端面經(jīng)里附的算法題把這些題單獨(dú)整理到收藏夾。5.2 手寫題清單這些幾乎必考除了 LeetCode 算法題現(xiàn)場(chǎng)手寫工具函數(shù)和 API 實(shí)現(xiàn)也是前端面試的保留曲目。準(zhǔn)備三年經(jīng)驗(yàn)面試下面這些手寫題的高頻程度極高建議逐個(gè)過(guò)一遍手寫 Promise.all / Promise.race / Promise.any注意 Promise.all 的空數(shù)組、異常處理、結(jié)果順序Promise.race 的競(jìng)速邏輯手寫深拷貝要處理循環(huán)引用用 WeakMap 記錄、Date、RegExp、Map、Set 等特殊對(duì)象手寫防抖和節(jié)流說(shuō)清楚兩者區(qū)別能用在實(shí)際場(chǎng)景中手寫事件總線 EventEmitter實(shí)現(xiàn) on、off、emit、once注意 once 執(zhí)行一次后要自動(dòng)解綁手寫 instanceof、new、Object.create、call/apply/bind這幾個(gè)是 JS 基礎(chǔ)和高階知識(shí)點(diǎn)的結(jié)合手寫題的關(guān)鍵不在于把代碼寫正確還在于要能講清楚每一步為什么這樣寫。比如手寫 new 的時(shí)候要能說(shuō)出“創(chuàng)建一個(gè)新對(duì)象、原型連接、執(zhí)行構(gòu)造函數(shù)、判斷返回值類型”這四步對(duì)應(yīng)的代碼。面試官會(huì)通過(guò)追問(wèn)來(lái)驗(yàn)證你是否真的理解。6. 面試節(jié)奏與臨場(chǎng)細(xì)節(jié)不要在小事上摔跤6.1 一輪到三面的考察側(cè)重各有各的打法一般中大廠前端面試至少三輪技術(shù)面。一輪通常是技術(shù)功底面主要考基礎(chǔ)、框架和算法題目覆蓋廣但深度有限二輪是綜合能力面會(huì)進(jìn)入項(xiàng)目深挖、場(chǎng)景設(shè)計(jì)、技術(shù)選型也開(kāi)始考察溝通表達(dá)三輪是 leader 或團(tuán)隊(duì)負(fù)責(zé)人面更關(guān)注你的思考方式、技術(shù)廣度、對(duì)行業(yè)趨勢(shì)的理解有可能會(huì)出開(kāi)放性問(wèn)題。三輪的答題策略是完全不同的。一輪要穩(wěn)準(zhǔn)狠遇到知道的題快速答、答完整留出時(shí)間給后面的題不知道的直接說(shuō)“這塊我沒(méi)深入研究”不要瞎編但可以補(bǔ)充一句“我了解過(guò)的類似方案是……”。二輪要慢一點(diǎn)多展示思考過(guò)程面試官問(wèn)場(chǎng)景題時(shí)先講清楚“需求是什么、約束條件是什么”再給方案。三輪要有高度可以適當(dāng)引入你對(duì)前端發(fā)展趨勢(shì)的判斷比如 AI 輔助開(kāi)發(fā)、Server Components、WebAssembly 的落地場(chǎng)景但要有真實(shí)依據(jù)。6.2 面試中不會(huì)答的題怎么處理最得體沒(méi)有誰(shuí)能答對(duì)所有題關(guān)鍵是怎么處理不會(huì)的題。我在幾次面試?yán)锟偨Y(jié)出一套還算好用的應(yīng)對(duì)方式第一遇到完全沒(méi)聽(tīng)過(guò)的名詞先請(qǐng)求澄清說(shuō)“我對(duì)這個(gè)詞了解有限你指的是不是 XX 意思”有時(shí)候只是叫法不同第二部分會(huì)但說(shuō)不完整時(shí)先把自己確定的部分說(shuō)清楚再承認(rèn)“更深層的機(jī)制我沒(méi)有實(shí)際驗(yàn)證過(guò)”第三如果是設(shè)計(jì)題沒(méi)思路可以從已知的限制條件反推比如“如果是我做這個(gè)需求我會(huì)先保證穩(wěn)定的基礎(chǔ)功能再考慮擴(kuò)展”。最忌諱的是不懂裝懂。面試官做這行很多年一聽(tīng)就能分辨你是在編還是在講真實(shí)經(jīng)驗(yàn)。編一個(gè)答案哪怕當(dāng)時(shí)蒙混過(guò)去了后面被追問(wèn)一個(gè)問(wèn)題整個(gè)可信度就崩了。寧可承認(rèn)不足也要保證已經(jīng)說(shuō)出來(lái)的話都是可靠、真實(shí)的。注意面試本質(zhì)上是雙向選擇不要因?yàn)橐粌深}沒(méi)答好就心態(tài)崩了。把每一輪面試當(dāng)作一次免費(fèi)的技術(shù)交流和能力體檢答完就翻篇準(zhǔn)備下一場(chǎng)更重要。7. 寫在最后三年經(jīng)驗(yàn)面試的真實(shí)體感我面完這一輪下來(lái)最大的感受是三年經(jīng)驗(yàn)這個(gè)階段技術(shù)深度固然重要但面試官更在意的是你有沒(méi)有把技術(shù)用在真實(shí)業(yè)務(wù)里的能力。同樣一道性能優(yōu)化題能背出一堆方案的人很多但能把自己項(xiàng)目里的 LCP 從多少優(yōu)化到多少、中間遇到了什么坑、最后怎么驗(yàn)證的人才是真正能獨(dú)當(dāng)一面的人。所以如果你準(zhǔn)備跳槽我的建議很直接不要只看面經(jīng)背答案先把你自己正在做的項(xiàng)目徹底讀懂再回頭看基礎(chǔ)知識(shí)。很多面經(jīng)里看起來(lái)很高深的原理其實(shí)你項(xiàng)目里早就踩過(guò)了只是沒(méi)有系統(tǒng)的語(yǔ)言組織。把項(xiàng)目里踩過(guò)的坑、做過(guò)的決策、產(chǎn)出的數(shù)據(jù)完整復(fù)盤一遍你就已經(jīng)超過(guò)了大部分只刷題不看項(xiàng)目的候選人。下篇我會(huì)接著聊項(xiàng)目深挖怎么答、場(chǎng)景設(shè)計(jì)題怎么拆、HR 輪次有哪些坑、以及拿到多個(gè) offer 之后怎么選擇。如果你正在準(zhǔn)備跳槽可以先動(dòng)手把手里的項(xiàng)目復(fù)盤起來(lái)有什么拿不準(zhǔn)的歡迎留言區(qū)一起討論。