百度：從八股文到項目深挖的面試復(fù)盤)
事情是這樣的。我在上一家公司待了快兩年屬于那種“文檔在手、天下我有文檔一關(guān)、直接抓瞎”的前端。圈里人管這個叫混子我認(rèn)。手上負(fù)責(zé)的頁面不算少但論深度也就是能跑、能上線、不出大事故的水平。某天關(guān)系不錯的同事發(fā)來一條消息說百度某個前端組在招人崗位要求寫著“三年以上經(jīng)驗、有大型項目優(yōu)先”我掰手指一算年限剛好卡線。他問我投不投我說投唄面掛了又不扣工資萬一過了呢。結(jié)果從簡歷篩選到 HR 面前后折騰了大半個月我居然一路走到了最后。先說結(jié)論這輪面試讓我最大的感觸是基礎(chǔ)前端八股文真的有用但只靠背八股文絕對過不了。整個過程里面試官問的東西大部分是網(wǎng)上能搜到的前端面試題但追問的深度和我平時刷題時想的完全不是一個量級。這篇文章我不打算寫那種“標(biāo)準(zhǔn)答案匯總”而是按照我真實的面試輪次把每一輪問了什么、我當(dāng)時怎么答的、哪些答崩了、哪些其實踩到了得分點原原本本捋一遍。適合正在準(zhǔn)備前端面試、尤其是打算沖大廠的朋友參考也適合那些覺得自己技術(shù)一般但想試試水的“混子型選手”——別怕混子也有混子的打法。1. 開篇定調(diào)我這個「混子」是怎么混進(jìn)百度面試間的1.1 我的技術(shù)自畫像混在哪、不混在哪既然叫混子我得先老實交代一下自己的技術(shù)水平不然大家以為我在凡爾賽。我在上一家公司做的是偏業(yè)務(wù)型的前端Vue 2 為主后來項目局部升級過 Vue 3但組合式 API 用得不算深。UI 庫主要用 Element UI 和 Ant Design Vue日常開發(fā)就是寫頁面、調(diào)接口、改 bug偶爾涉及一點前端工程化配置比如改 webpack 的 loader、調(diào)一下 babel 插件但你說讓我從零搭一套完整工程我真不行。混的地方很明顯原理層面一知半解。我用過 Vuex但說不清它的響應(yīng)式在插件層面是怎么注入的我用過 webpack但只能說出 entry、output、loader、plugin 這些名詞我也寫過性能優(yōu)化無非就是懶加載、壓縮圖片、加緩存再深一點就露怯。不混的地方是業(yè)務(wù)理解力和排查問題的能力還湊合。因為常年跟產(chǎn)品、后端、測試battle我養(yǎng)成了一個習(xí)慣遇到問題先自己復(fù)現(xiàn)、再二分定位、最后看源碼或者文檔確認(rèn)這個能力在面試?yán)镆馔獬闪思臃猪棥?.2 簡歷與面試機會混子的簡歷怎么包裝很多混子同學(xué)最頭疼的就是簡歷沒東西寫。我也是。項目經(jīng)驗就那么幾個后臺管理系統(tǒng)總不能寫“我寫了一個商城后臺”吧。我當(dāng)時的策略是不寫功能寫問題和方案。比如有一個項目表格渲染一萬條數(shù)據(jù)卡到爆我優(yōu)化成了虛擬滾動那這個項目就是“基于虛擬滾動的海量數(shù)據(jù)展示方案設(shè)計”還有一個項目客戶要求上傳大文件我用 web worker 在瀏覽器端做了文件分片和哈希計算那這個項目就是“基于 Web Worker 的大文件分片上傳實踐”。面試官看到這樣的表述第一反應(yīng)不是“這人在寫業(yè)務(wù)”而是“這人解決過具體問題”約面的概率會大很多。簡歷上不要撒謊但可以把做過的事用一種更有技術(shù)含量的方式表述出來。我后來復(fù)盤發(fā)現(xiàn)正是這兩個項目點成了二面面試官深挖的主線。1.3 面試前的突擊計劃一周時間我是怎么安排的從投出簡歷到收到一面通知中間大概有一周多。我沒法辭職全職復(fù)習(xí)只能每天晚上抽兩三個小時突擊。我的復(fù)習(xí)順序是先看高頻前端面試題和前端八股文再對著自己簡歷上的項目寫故事。八股文主要過了一遍 JavaScript 基礎(chǔ)閉包、原型鏈、this、事件循環(huán)、瀏覽器原理緩存、渲染、跨域、Vue 響應(yīng)式原理和組件通信方式還有手寫代碼題防抖節(jié)流、深拷貝、Promise 相關(guān)。背誦部分其實網(wǎng)上資料很多我用的就是一個語雀文檔配合 debugger 實際跑一遍效果更好。復(fù)習(xí)到后面我發(fā)現(xiàn)一個規(guī)律面試官問八股文不是為了考你背得熟不熟而是想看你能不能把知識點跟實際場景聯(lián)系起來。所以我把每個八股文知識點都強行造了一個業(yè)務(wù)場景比如“節(jié)流用在滾動加載”“閉包用在防抖和柯里化”后面面試的時候確實用上了。2. 一面基礎(chǔ)題轟炸混子差點當(dāng)場現(xiàn)原形2.1 面試節(jié)奏40分鐘從閉包問到事件循環(huán)一面約在下午兩點視頻面面試官看著挺年輕應(yīng)該是組里比較核心的開發(fā)。開場沒有太多自我介紹環(huán)節(jié)簡單問了一下項目就直奔主題大概 40 分鐘整體節(jié)奏很快。前半段是一些常規(guī)八股文比如“說說閉包是什么有哪些應(yīng)用場景”“原型鏈怎么理解”“this 指向問題”“數(shù)組去重有哪些方法”。這些我背過答得還算順但后來我才發(fā)現(xiàn)面試官真正想聽的不是定義而是“你什么時候用過”。問到閉包的時候我舉了防抖和節(jié)流的例子面試官明顯來了興趣順勢讓我手寫一個防抖——這就是背題和實際動手的區(qū)別了我那會兒手一抖差點把防抖和節(jié)流的觸發(fā)條件搞反。后半段上了兩道代碼輸出題都是事件循環(huán)相關(guān)。第一道大概是console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve() .then(() { console.log(promise1); }) .then(() { console.log(promise2); }); console.log(script end);這個我背過很多遍知道輸出順序是 script start、script end、promise1、promise2、setTimeout解釋的時候把微任務(wù)和宏任務(wù)的優(yōu)先級說了出來。但接下來他變了個花樣問“如果 setTimeout 的延時改成 1 毫秒輸出順序會不會變”我當(dāng)時就有點懵。后來想想他的意思是要講清楚宏任務(wù)隊列的執(zhí)行時機和定時器的最小延時這其實前端面試八股文里常考但我當(dāng)時沒答到點子上只說了“不一定要看執(zhí)行順序”。2.2 讓混子翻車的三道手寫題防抖、深拷貝、Promise.all一面最刺激的環(huán)節(jié)是手寫代碼。面試官直接在共享文檔里出了三道題前兩道我磕磕絆絆寫出了個大概第三道直接卡住這里詳細(xì)說說。第一道是手寫防抖函數(shù)要求支持立即執(zhí)行選項。我一開始寫成了節(jié)流的樣子被面試官點了一下“你再想想你這段代碼是防抖嗎”我趕緊改回來。最終版本大概是function debounce(fn, wait 300, immediate false) { let timer null; return function (...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); }; }寫完之后面試官追問了兩個問題為什么要用apply為什么用timer null而不是clearTimeout之后直接賦初值。這兩個都是我平時沒細(xì)想的點第一問還好知道要綁定 this 和傳參第二問我支支吾吾他就直接解釋了置空 timer 是為了讓下一次 immediate 判斷生效不然 callNow 永遠(yuǎn)都是 false。這個細(xì)節(jié)后來我記下來了確實是防抖實現(xiàn)里容易漏的點。第二道是深拷貝要求考慮循環(huán)引用、Symbol 和 Date。我平時背過很多版深拷貝但現(xiàn)場寫的時候還是只能寫出JSON.parse(JSON.stringify(obj))然后在面試官的引導(dǎo)下補了遞歸。注意深拷貝的遞歸版本判斷對象類型時不要只寫typeof obj object還要排除 null并且要用 WeakMap 來保存已經(jīng)拷貝過的引用否則對象里面有循環(huán)引用會直接爆棧。后來我寫出了一個支持基礎(chǔ)循環(huán)引用的版本但對 Symbol 和 Date 的處理是在提示下才寫出來的。這道題我只能算拿了三分。第三道是手寫Promise.all要求支持?jǐn)?shù)組項不是 Promise 的情況并且錯誤要 reject。我現(xiàn)場寫了基礎(chǔ)版但忘了一個關(guān)鍵點結(jié)果的順序要和輸入的順序一致不能用 Promise 完成的先后順序來 push。面試官說“你的代碼能跑但結(jié)果順序是亂的”我這下才反應(yīng)過來。回看這段自己確實太混了平時用Promise.all用得飛起但從來沒想過它的內(nèi)部實現(xiàn)要保證順序。2.3 CSS 與瀏覽器問題真不是背個八股就行一面中間還穿插了一些 CSS 和瀏覽器的基礎(chǔ)題。CSS 問了“flex: 1 是什么含義”和“實現(xiàn)一個左側(cè)固定、右側(cè)自適應(yīng)的兩欄布局”。flex 那個我答得還行說了flex-grow: 1; flex-shrink: 1; flex-basis: 0%但面試官追問“flex-basis 默認(rèn)值是什么”我答錯了默認(rèn)應(yīng)該是 auto。這個知識點不偏但屬于容易忽略的細(xì)節(jié)。兩欄布局我提供了一個 float 加 margin 的方案面試官又問“還有什么方案”我說 flex他說“還有嗎”我一時沒想起來 grid。其實這些都是前端面試常客我的問題在于只準(zhǔn)備了答案沒有準(zhǔn)備“多個方案橫向?qū)Ρ取彼悦康李}只能說出一種解法給面試官一種“知其然不知其所以然”的感覺。瀏覽器部分問了強緩存和協(xié)商緩存的區(qū)別還問了Cache-Control有哪些常見字段。這個我工作中常跟后端對接口時研究過答得比較細(xì)包括max-age、no-cache、no-store、must-revalidate以及ETag和Last-Modified的優(yōu)先級。我覺得就是這部分拉回了一點印象分讓面試官覺得這個人雖然手寫代碼拉胯但工程常識還是有的。一面結(jié)束后我的感受是大概率掛了。因為手寫題太拉胯而且有些基礎(chǔ)細(xì)節(jié)答得很虛。結(jié)果第二天 HR 告訴我一面通過了我后來分析可能是因為項目經(jīng)驗描述比較貼合崗位需求加上網(wǎng)絡(luò)和緩存那塊答得不錯面試官給了個 borderline。3. 二面項目深挖與原理拷問沒有項目就只能挨打3.1 項目復(fù)盤混子項目里唯一能拿得出手的模塊二面約在一面后第三天這次面試官明顯資歷更老問的問題完全圍繞著簡歷上的項目。我已經(jīng)反復(fù)準(zhǔn)備了兩個主線項目大文件分片上傳和表格虛擬滾動。先說大文件分片上傳。這個項目我做的時候主要用的是 web worker 來計算文件的md5哈希然后把大文件切成固定大小的分片逐個上傳全部上傳成功后后端合并。面試官聽完我的介紹連珠炮似的問了幾個問題為什么要在 worker 里計算哈希直接在主線程算不行嗎分片大小是怎么確定的為什么選 5MB 而不是 10MB 或 1MB如果一個分片上傳失敗怎么處理要不要重試文件的唯一標(biāo)識怎么生成如果兩個文件內(nèi)容一樣但文件名不同算一個文件還是兩個文件第一個問題我答得還行說計算大文件哈希會阻塞主線程導(dǎo)致頁面卡頓和滾動掉幀所以放到 worker 里。第二個問題我其實沒仔細(xì)想過當(dāng)時就是拍腦袋定的 5MB面試官追問后我硬編了一個理由網(wǎng)絡(luò)波動大太小會頻繁請求太大會導(dǎo)致單次失敗重試成本高。這個回答勉強算合理但被面試官聽出了我沒有做過實際壓測。他補了一句一般會根據(jù)網(wǎng)絡(luò)環(huán)境和文件大小動態(tài)調(diào)整分片大小有些方案會在秒傳時先用 HEAD 請求咨詢后端已存在的分片。這句話被我記到了筆記里。第三個問題我答了失敗重試 重新上傳該分片的方案面試官追問“并發(fā)上傳分片的話怎么控制最大并發(fā)數(shù)”我說可以用 p-limit 之類的庫或者自己維護(hù)一個并發(fā)池他就沒繼續(xù)追。第四個問題我答的是用內(nèi)容哈希作為文件唯一標(biāo)識所以兩個文件內(nèi)容相同但文件名不同會被識別成同一個文件秒傳直接返回結(jié)果。這塊我比較熟因為他問的正好是我做過的核心邏輯。3.2 性能優(yōu)化從 Network 面板到 Lighthouse 的實戰(zhàn)回答項目深挖之后面試官很自然地把話題引到了性能優(yōu)化上“你在這個表格虛擬滾動里除了虛擬列表還做了哪些前端性能優(yōu)化”我當(dāng)時心里一緊因為簡歷里寫了“首屏加載優(yōu)化”但實際做的比較淺。我回答了幾個點路由懶加載、組件異步加載、圖片懶加載、打包時關(guān)閉 sourcemap、公共依賴抽成 CDN。面試官表示認(rèn)可但接著問了一句讓我有點慌的話“那你有沒有真正研究過首屏性能指標(biāo)比如 FCP、LCP 這些你知道它們分別代表什么嗎”好在我在面試前一周刷到了一個關(guān)于 Core Web Vitals 的文章勉強能說出來FCP 是首次內(nèi)容繪制LCP 是最大內(nèi)容繪制LCP 通常比 FCP 更能反映用戶感知的加載速度。面試官還追問了怎么優(yōu)化 LCP我說了三個方向優(yōu)化圖片體積和格式、預(yù)加載關(guān)鍵資源、減少首屏 JavaScript 體積。他點點頭沒有再深挖。這輪的小心得是面試官并不指望你把所有性能指標(biāo)說得倒背如流但作為一個有項目經(jīng)驗的前端你需要對自己項目里做了哪些性能優(yōu)化有清晰的量化認(rèn)知比如圖片減少了多少字節(jié)、LCP 降低了多少毫秒哪怕只是估算也比只說“我做了懶加載”強得多。提個醒如果簡歷上寫了“性能優(yōu)化”四個字一定要準(zhǔn)備一個可以量化的case不然面試官只要追一句“優(yōu)化前多少、優(yōu)化后多少”就很容易暴露出你只是嘴上說說。3.3 Vue 原理與響應(yīng)式背了那么久終于用到了一次二面后半段基本是 Vue 原理的天下。面試官看了我的項目是用 Vue 2 寫的但 JD 要求里有 Vue 3于是從 Vue 2 一直問到 Vue 3。他先問 Vue 2 響應(yīng)式原理。這個我熟Object.defineProperty 對每個屬性做 getter/setter 劫持實現(xiàn)依賴收集和派發(fā)更新。他接著問“數(shù)組的響應(yīng)式是怎么處理的”我說 Vue 2 重寫了數(shù)組的七個方法push、pop、shift、unshift、splice、sort、reverse然后他問“為什么直接通過下標(biāo)修改數(shù)組不能觸發(fā)視圖更新”我回答是因為 defineProperty 只能劫持對象屬性而下標(biāo)修改沒法觸發(fā)。這個答得還算順。然后他問 Vue 3 和 Vue 2 的響應(yīng)式有什么區(qū)別。我答了 Proxy 和 defineProperty 的區(qū)別Proxy 可以攔截對象的增刪和屬性修改不需要像 Vue 2 那樣遍歷對象屬性還可以攔截數(shù)組索引賦值所以不需要 hack 數(shù)組方法。面試官追問“Proxy 的兼容性怎么看”我說 es6 之后現(xiàn)代瀏覽器基本都支持但老瀏覽器需要 polyfill 或者降級 —— 正好這也是項目選型時需要考慮的點。最后他問了一個我完全沒想到的問題“Vue 的 nextTick 原理是什么如果讓你實現(xiàn)一個簡易版你會怎么做”我在項目中用過 nextTick也知道它跟 DOM 更新后的回調(diào)有關(guān)但真正要我說原理就垮了。我只能說跟微任務(wù)有關(guān)然后就卡住了。面試官沒太難為我告訴我核心是利用 Promise.then 或者 MutationObserver 把回調(diào)放進(jìn)微任務(wù)隊列等 DOM 更新后執(zhí)行。這道題我后來認(rèn)真補了絕對是 Vue 源碼里最值得深入的一塊因為它牽扯到事件循環(huán)、異步更新、組件渲染機制。4. 三面leader 面的終極問題不是技術(shù)是「思考」4.1 業(yè)務(wù)與技術(shù)的關(guān)系混子如何急中生智二面過后的第三面面試官已經(jīng)明顯是技術(shù) leader 級別開場完全不問代碼先問我“你在這個項目里有沒有過跟產(chǎn)品經(jīng)理或者后端發(fā)生分歧的時候你最后怎么處理的”這種問題對于混子來說是最容易翻車的因為平時我就是那個“行行行你說啥我做啥”的人。但這次我急中生智講了一個真實但稍微潤色過的故事之前有一次產(chǎn)品提了一個需求要求前端做大量數(shù)據(jù)的即時篩選和排序我預(yù)估了一下如果按需求直接實現(xiàn)頁面會有明顯卡頓于是我沒有直接拒絕而是先做了一版 demo用一萬條數(shù)據(jù)實測截了性能面板的圖給產(chǎn)品看然后提出了虛擬滾動 服務(wù)端篩選的替代方案最終產(chǎn)品接受了。面試官接著問了一句特別有價值的話“你覺得自己在這個過程中除了開發(fā)還承擔(dān)了什么角色”我說其實前端不只是把設(shè)計稿變成頁面還需要充當(dāng)技術(shù)方案和業(yè)務(wù)訴求之間的翻譯官。這句話后來想想有點裝但在當(dāng)時居然贏得了面試官的點頭。4.2 成長性問題你怎么學(xué)習(xí)、怎么復(fù)盤leader 面后半段偏“軟素質(zhì)”了。問題包括平時怎么學(xué)習(xí)前端的未來三年的規(guī)劃是什么最近有沒有關(guān)注什么前端新技術(shù)學(xué)習(xí)路線我是這么說的日常以項目為主遇到問題先查文檔、再查 issue、最后翻源碼業(yè)余會看一些前端社區(qū)的高質(zhì)量文章重點關(guān)注工程化和性能優(yōu)化方向偶爾會動手寫點小 demo 來驗證想法。面試官追問“那你最近看過印象最深的一篇文章是什么”我愣了一下臨時想到前端工程化里的微前端方案說最近在研究微前端的沙箱機制。其實那篇文章我只看了半篇但為了圓場我硬是把 main 應(yīng)用和子應(yīng)用之間的樣式隔離、js 沙箱概念講了個大概。這輪的心得是不要給自己挖坑。面試官問你看過什么一定要挑一個你真的熟悉的技術(shù)不然他順著你的回答連續(xù)追問下去你就會像我一樣啞火。后來面試官真的追問了“沙箱是怎么實現(xiàn) js 隔離的”我答得很虛只能說出 with Proxy 的 eval 方式因為他提了我就順藤摸瓜說了兩句屬于運氣比較好。4.3 反問環(huán)節(jié)別問沒營養(yǎng)的問題三面最后留了幾分鐘反問面試官很客氣地說“你有什么想問我的”。我之前看過不少面經(jīng)知道反問環(huán)節(jié)不能回答“沒有”但也不能問太淺的問題。我問了兩個問題一個是“團隊目前的前端技術(shù)棧和工程化建設(shè)到什么程度”另一個是“如果我有幸加入您覺得我當(dāng)前最需要補足的能力是什么”。這兩個問題的好處是第一表現(xiàn)出你對團隊感興趣第二能通過面試官的回答反推自己哪些方面弱即便沒拿到 offer也是很有價值的反饋。面試官回答第二個問題時說了一句我印象很深的話“你基礎(chǔ)不算差但學(xué)習(xí)方式偏零散如果你能把一個知識點吃透到能主動教會別人的程度會好很多。”這句話后來被我當(dāng)成很長一段時間的座右銘也徹底改變了我刷前端面試題的方式。5. HR 面聊薪資與 offer 的博弈5.1 HR 面的套路不是聊天是談判HR 面放在三輪技術(shù)面之后大概 30 分鐘。很多人以為 HR 面就是聊聊天其實不是HR 面是有明確目的的她要知道你的期望薪資、最快到崗時間、手里的其他 offer、離職原因、穩(wěn)定性、學(xué)歷背景等每一項都可能影響定級和薪資。HR 第一個問題就是“為什么從上家公司離職”。我提前準(zhǔn)備過沒抱怨加班多、沒說領(lǐng)導(dǎo)不好而是說“做了兩年業(yè)務(wù)型前端覺得技術(shù)成長變慢了想換一個技術(shù)氛圍更濃的平臺”。這個答案既真實又不招黑。她接著問“目前手里有其他 offer 嗎”。我當(dāng)時其實手里只有一個中小廠的 offer薪資還沒談但我沒有撒謊也沒有把話說死就說“有一個在流程中的機會但更傾向于這邊因為更想做技術(shù)深耕”。后來我復(fù)盤覺得這個回答還行既表明了競爭力也給對方留了空間。5.2 談薪話術(shù)混子的不算技巧的技巧薪資環(huán)節(jié)是 HR 面最核心的部分。我因為上一家薪資不高所以在定期望值之前做了一點功課查了市場行情、問了一圈朋友最后報了一個比當(dāng)前薪資高大概 25% 的數(shù)字留了 5% 的還價空間。HR 問“你期望薪資為什么是這個數(shù)”我說了三層邏輯第一基于當(dāng)前市場行情和崗位要求這個區(qū)間在合理范圍第二對比我現(xiàn)在的能力和項目經(jīng)驗?zāi)塥毩⒇?fù)責(zé)復(fù)雜模塊第三如果定級和期望有差距也可以考慮其他綜合福利和成長空間。整個過程沒有硬剛但也沒有一上來就自降身價。這里有個細(xì)節(jié)HR 問“能不能接受定級低一些”我說“如果定級對應(yīng)的工作內(nèi)容是我感興趣的可以談但薪資上希望盡量靠到某個區(qū)間”。這種“定級可以讓步薪資不能太離譜”的回答方式既顯得務(wù)實也給 HR 留下了協(xié)商空間。最后 offer 給的薪資雖然比期望少了 2K但綜合下來比我上家漲了不少我接受了。6. 面后復(fù)盤混子進(jìn)場帶著什么離場6.1 面試中暴露的問題清單雖然最后拿到了口頭 offer但我清楚這輪面經(jīng)里我的表現(xiàn)不是“穩(wěn)”而是“懸”。回看整個流程我暴露的問題非常典型也很有參考價值。手寫代碼基本功不扎實防抖、深拷貝、Promise.all 都屬于高頻題但我寫得不快且不規(guī)范尤其 Promise.all 的實現(xiàn)順序問題暴露了我對 Promise 內(nèi)部機制的淺層理解。知識點碎片化不成體系flex-basis 默認(rèn)值、nextTick 原理、宏任務(wù)微任務(wù)調(diào)度這些點單獨問都能聊幾句但一旦被追問“為什么”就卡殼。項目中的技術(shù)決策缺乏數(shù)據(jù)支撐分片大小為什么選 5MB、優(yōu)化效果具體是多少我說不出來這是面試官最敏感的部分。學(xué)習(xí)方式偏被動leader 面問我看過什么文章我只記得大概是某個方向但沒有真正消化成自己的知識結(jié)構(gòu)。Vue 3 知識儲備不足JD 里明確寫了 Vue 3我只知道 Proxy 比 defineProperty 強但組合式 API 的底層設(shè)計邏輯、編譯優(yōu)化等內(nèi)容基本空白。這些問題不是面試失敗者的專屬反而是很多“能干活但說不出來”的前端共通的短板。我把它列出來是想讓大家明白混子不可怕可怕的是不知道自己混在哪。只要能定位到具體的能力缺口接下來補就是了。6.2 給下一批「混子」的4條實在建議結(jié)合我這次經(jīng)歷給同樣準(zhǔn)備大廠前端面試的同學(xué)幾條建議第一把簡歷上的每一條項目經(jīng)歷都準(zhǔn)備成一個 5 分鐘的故事。故事要包含背景、難點、你的方案、踩過的坑、最終效果。這樣面試官問什么你都能往這個故事上引不會出現(xiàn)“你做過什么”和“你會什么”兩張皮的情況。第二手寫題必須脫離背誦真正動筆跑一遍。我現(xiàn)在都記得 Promise.all 那道題給我?guī)淼那琛＝ㄗh把防抖、節(jié)流、深拷貝、Promise.all、Promise.race、數(shù)組扁平化、柯里化、new、call/apply/bind、instanceof、EventEmitter 這類高頻手寫題全部在本地跑過三遍以上直到閉上眼睛能寫出來。第三建立一個“為什么”清單。每刷一道八股文就追問自己三次“為什么”。比如事件循環(huán)不僅要背宏任務(wù)微任務(wù)的順序還要知道為什么要區(qū)分宏任務(wù)和微任務(wù)比如 Vue 響應(yīng)式不僅要背 Proxy還要知道 Vue 2 為什么不用 Proxy。面試官最愛追問的點往往都在三次“為什么”之后。第四視頻面試一定要錄音。我面完之后回聽錄音才發(fā)現(xiàn)自己有大量的“嗯”“那個”“就是”這類停頓詞而且很多題明明答到了關(guān)鍵點但因為表達(dá)不清晰聽起來像沒答到。錄音復(fù)盤是成本最低、提升最明顯的練習(xí)方式。6.3 復(fù)盤表格哪些題該拿分卻沒拿住我把整場面試的題目和自己的表現(xiàn)整理成了表格方便大家直觀感受大廠面試的考察密度面試輪次核心題目我的表現(xiàn)丟分點得分點一面閉包與防抖手寫中偏下防抖節(jié)流條件寫反this 綁定不清能給出防抖的應(yīng)用場景一面深拷貝手寫偏下循環(huán)引用和特殊類型處理不當(dāng)知道 JSON 方案的局限一面Promise.all 手寫偏下結(jié)果順序錯誤邊界處理不全能寫出基本框架一面瀏覽器緩存良好無明顯丟分Cache-Control 字段和協(xié)商緩存優(yōu)先級二面大文件分片上傳中上分片大小的技術(shù)依據(jù)不足對哈希、秒傳、并發(fā)控制有實踐二面性能優(yōu)化指標(biāo)中缺少量化數(shù)據(jù)知道 LCP/FCP 的基本概念二面Vue 響應(yīng)式原理中上nextTick 原理不清晰Vue2/Vue3 對比答得較完整三面業(yè)務(wù)分歧處理良好無明顯丟分有實際案例表達(dá)清晰三面學(xué)習(xí)方式與技術(shù)趨勢中技術(shù)文章印象不深微前端細(xì)節(jié)經(jīng)不起追問能表達(dá)學(xué)習(xí)方向HR面期望薪資與穩(wěn)定性良好無明顯丟分談薪有策略表達(dá)務(wù)實表格里能看出來我的優(yōu)勢在“有真實項目經(jīng)歷支撐的實戰(zhàn)問題”劣勢在“純基礎(chǔ)概念的深度和手寫能力”。如果你也打算面大廠可以先自己模擬打一次分看自己到底屬于哪類選手然后針對短板集中突破。回看整個面試過程我最大的感受是混子不混、只是平時沒把知識形成體系。真正讓我通過這輪面試的不是面試前那兩周背了多少題而是過去兩年在項目里踩坑時留下的肌肉記憶以及對項目細(xì)節(jié)的認(rèn)真復(fù)盤。如果你也是一枚混子別慌把我踩過的坑避開把我僥幸過關(guān)的地方變成你的穩(wěn)定項大廠的門沒有想象中那么窄。最后再分享一個小技巧面試被問到不會的題別直接說“不會”試著說出你的思考路徑比如“我對這個問題不了解但我從另外一個角度推測可能是……”。面試官要的不是滿分答案而是看你遇到未知問題時的反應(yīng)。這個能力恰恰是混子最容易被低估的地方。 前端混子面進(jìn)百度：從八股文到項目深挖的面試復(fù)盤
事情是這樣的。我在上一家公司待了快兩年屬于那種“文檔在手、天下我有文檔一關(guān)、直接抓瞎”的前端。圈里人管這個叫混子我認(rèn)。手上負(fù)責(zé)的頁面不算少但論深度也就是能跑、能上線、不出大事故的水平。某天關(guān)系不錯的同事發(fā)來一條消息說百度某個前端組在招人崗位要求寫著“三年以上經(jīng)驗、有大型項目優(yōu)先”我掰手指一算年限剛好卡線。他問我投不投我說投唄面掛了又不扣工資萬一過了呢。結(jié)果從簡歷篩選到 HR 面前后折騰了大半個月我居然一路走到了最后。先說結(jié)論這輪面試讓我最大的感觸是基礎(chǔ)前端八股文真的有用但只靠背八股文絕對過不了。整個過程里面試官問的東西大部分是網(wǎng)上能搜到的前端面試題但追問的深度和我平時刷題時想的完全不是一個量級。這篇文章我不打算寫那種“標(biāo)準(zhǔn)答案匯總”而是按照我真實的面試輪次把每一輪問了什么、我當(dāng)時怎么答的、哪些答崩了、哪些其實踩到了得分點原原本本捋一遍。適合正在準(zhǔn)備前端面試、尤其是打算沖大廠的朋友參考也適合那些覺得自己技術(shù)一般但想試試水的“混子型選手”——別怕混子也有混子的打法。1. 開篇定調(diào)我這個「混子」是怎么混進(jìn)百度面試間的1.1 我的技術(shù)自畫像混在哪、不混在哪既然叫混子我得先老實交代一下自己的技術(shù)水平不然大家以為我在凡爾賽。我在上一家公司做的是偏業(yè)務(wù)型的前端Vue 2 為主后來項目局部升級過 Vue 3但組合式 API 用得不算深。UI 庫主要用 Element UI 和 Ant Design Vue日常開發(fā)就是寫頁面、調(diào)接口、改 bug偶爾涉及一點前端工程化配置比如改 webpack 的 loader、調(diào)一下 babel 插件但你說讓我從零搭一套完整工程我真不行。混的地方很明顯原理層面一知半解。我用過 Vuex但說不清它的響應(yīng)式在插件層面是怎么注入的我用過 webpack但只能說出 entry、output、loader、plugin 這些名詞我也寫過性能優(yōu)化無非就是懶加載、壓縮圖片、加緩存再深一點就露怯。不混的地方是業(yè)務(wù)理解力和排查問題的能力還湊合。因為常年跟產(chǎn)品、后端、測試battle我養(yǎng)成了一個習(xí)慣遇到問題先自己復(fù)現(xiàn)、再二分定位、最后看源碼或者文檔確認(rèn)這個能力在面試?yán)镆馔獬闪思臃猪棥?.2 簡歷與面試機會混子的簡歷怎么包裝很多混子同學(xué)最頭疼的就是簡歷沒東西寫。我也是。項目經(jīng)驗就那么幾個后臺管理系統(tǒng)總不能寫“我寫了一個商城后臺”吧。我當(dāng)時的策略是不寫功能寫問題和方案。比如有一個項目表格渲染一萬條數(shù)據(jù)卡到爆我優(yōu)化成了虛擬滾動那這個項目就是“基于虛擬滾動的海量數(shù)據(jù)展示方案設(shè)計”還有一個項目客戶要求上傳大文件我用 web worker 在瀏覽器端做了文件分片和哈希計算那這個項目就是“基于 Web Worker 的大文件分片上傳實踐”。面試官看到這樣的表述第一反應(yīng)不是“這人在寫業(yè)務(wù)”而是“這人解決過具體問題”約面的概率會大很多。簡歷上不要撒謊但可以把做過的事用一種更有技術(shù)含量的方式表述出來。我后來復(fù)盤發(fā)現(xiàn)正是這兩個項目點成了二面面試官深挖的主線。1.3 面試前的突擊計劃一周時間我是怎么安排的從投出簡歷到收到一面通知中間大概有一周多。我沒法辭職全職復(fù)習(xí)只能每天晚上抽兩三個小時突擊。我的復(fù)習(xí)順序是先看高頻前端面試題和前端八股文再對著自己簡歷上的項目寫故事。八股文主要過了一遍 JavaScript 基礎(chǔ)閉包、原型鏈、this、事件循環(huán)、瀏覽器原理緩存、渲染、跨域、Vue 響應(yīng)式原理和組件通信方式還有手寫代碼題防抖節(jié)流、深拷貝、Promise 相關(guān)。背誦部分其實網(wǎng)上資料很多我用的就是一個語雀文檔配合 debugger 實際跑一遍效果更好。復(fù)習(xí)到后面我發(fā)現(xiàn)一個規(guī)律面試官問八股文不是為了考你背得熟不熟而是想看你能不能把知識點跟實際場景聯(lián)系起來。所以我把每個八股文知識點都強行造了一個業(yè)務(wù)場景比如“節(jié)流用在滾動加載”“閉包用在防抖和柯里化”后面面試的時候確實用上了。2. 一面基礎(chǔ)題轟炸混子差點當(dāng)場現(xiàn)原形2.1 面試節(jié)奏40分鐘從閉包問到事件循環(huán)一面約在下午兩點視頻面面試官看著挺年輕應(yīng)該是組里比較核心的開發(fā)。開場沒有太多自我介紹環(huán)節(jié)簡單問了一下項目就直奔主題大概 40 分鐘整體節(jié)奏很快。前半段是一些常規(guī)八股文比如“說說閉包是什么有哪些應(yīng)用場景”“原型鏈怎么理解”“this 指向問題”“數(shù)組去重有哪些方法”。這些我背過答得還算順但后來我才發(fā)現(xiàn)面試官真正想聽的不是定義而是“你什么時候用過”。問到閉包的時候我舉了防抖和節(jié)流的例子面試官明顯來了興趣順勢讓我手寫一個防抖——這就是背題和實際動手的區(qū)別了我那會兒手一抖差點把防抖和節(jié)流的觸發(fā)條件搞反。后半段上了兩道代碼輸出題都是事件循環(huán)相關(guān)。第一道大概是console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve() .then(() { console.log(promise1); }) .then(() { console.log(promise2); }); console.log(script end);這個我背過很多遍知道輸出順序是 script start、script end、promise1、promise2、setTimeout解釋的時候把微任務(wù)和宏任務(wù)的優(yōu)先級說了出來。但接下來他變了個花樣問“如果 setTimeout 的延時改成 1 毫秒輸出順序會不會變”我當(dāng)時就有點懵。后來想想他的意思是要講清楚宏任務(wù)隊列的執(zhí)行時機和定時器的最小延時這其實前端面試八股文里常考但我當(dāng)時沒答到點子上只說了“不一定要看執(zhí)行順序”。2.2 讓混子翻車的三道手寫題防抖、深拷貝、Promise.all一面最刺激的環(huán)節(jié)是手寫代碼。面試官直接在共享文檔里出了三道題前兩道我磕磕絆絆寫出了個大概第三道直接卡住這里詳細(xì)說說。第一道是手寫防抖函數(shù)要求支持立即執(zhí)行選項。我一開始寫成了節(jié)流的樣子被面試官點了一下“你再想想你這段代碼是防抖嗎”我趕緊改回來。最終版本大概是function debounce(fn, wait 300, immediate false) { let timer null; return function (...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); }; }寫完之后面試官追問了兩個問題為什么要用apply為什么用timer null而不是clearTimeout之后直接賦初值。這兩個都是我平時沒細(xì)想的點第一問還好知道要綁定 this 和傳參第二問我支支吾吾他就直接解釋了置空 timer 是為了讓下一次 immediate 判斷生效不然 callNow 永遠(yuǎn)都是 false。這個細(xì)節(jié)后來我記下來了確實是防抖實現(xiàn)里容易漏的點。第二道是深拷貝要求考慮循環(huán)引用、Symbol 和 Date。我平時背過很多版深拷貝但現(xiàn)場寫的時候還是只能寫出JSON.parse(JSON.stringify(obj))然后在面試官的引導(dǎo)下補了遞歸。注意深拷貝的遞歸版本判斷對象類型時不要只寫typeof obj object還要排除 null并且要用 WeakMap 來保存已經(jīng)拷貝過的引用否則對象里面有循環(huán)引用會直接爆棧。后來我寫出了一個支持基礎(chǔ)循環(huán)引用的版本但對 Symbol 和 Date 的處理是在提示下才寫出來的。這道題我只能算拿了三分。第三道是手寫Promise.all要求支持?jǐn)?shù)組項不是 Promise 的情況并且錯誤要 reject。我現(xiàn)場寫了基礎(chǔ)版但忘了一個關(guān)鍵點結(jié)果的順序要和輸入的順序一致不能用 Promise 完成的先后順序來 push。面試官說“你的代碼能跑但結(jié)果順序是亂的”我這下才反應(yīng)過來。回看這段自己確實太混了平時用Promise.all用得飛起但從來沒想過它的內(nèi)部實現(xiàn)要保證順序。2.3 CSS 與瀏覽器問題真不是背個八股就行一面中間還穿插了一些 CSS 和瀏覽器的基礎(chǔ)題。CSS 問了“flex: 1 是什么含義”和“實現(xiàn)一個左側(cè)固定、右側(cè)自適應(yīng)的兩欄布局”。flex 那個我答得還行說了flex-grow: 1; flex-shrink: 1; flex-basis: 0%但面試官追問“flex-basis 默認(rèn)值是什么”我答錯了默認(rèn)應(yīng)該是 auto。這個知識點不偏但屬于容易忽略的細(xì)節(jié)。兩欄布局我提供了一個 float 加 margin 的方案面試官又問“還有什么方案”我說 flex他說“還有嗎”我一時沒想起來 grid。其實這些都是前端面試常客我的問題在于只準(zhǔn)備了答案沒有準(zhǔn)備“多個方案橫向?qū)Ρ取彼悦康李}只能說出一種解法給面試官一種“知其然不知其所以然”的感覺。瀏覽器部分問了強緩存和協(xié)商緩存的區(qū)別還問了Cache-Control有哪些常見字段。這個我工作中常跟后端對接口時研究過答得比較細(xì)包括max-age、no-cache、no-store、must-revalidate以及ETag和Last-Modified的優(yōu)先級。我覺得就是這部分拉回了一點印象分讓面試官覺得這個人雖然手寫代碼拉胯但工程常識還是有的。一面結(jié)束后我的感受是大概率掛了。因為手寫題太拉胯而且有些基礎(chǔ)細(xì)節(jié)答得很虛。結(jié)果第二天 HR 告訴我一面通過了我后來分析可能是因為項目經(jīng)驗描述比較貼合崗位需求加上網(wǎng)絡(luò)和緩存那塊答得不錯面試官給了個 borderline。3. 二面項目深挖與原理拷問沒有項目就只能挨打3.1 項目復(fù)盤混子項目里唯一能拿得出手的模塊二面約在一面后第三天這次面試官明顯資歷更老問的問題完全圍繞著簡歷上的項目。我已經(jīng)反復(fù)準(zhǔn)備了兩個主線項目大文件分片上傳和表格虛擬滾動。先說大文件分片上傳。這個項目我做的時候主要用的是 web worker 來計算文件的md5哈希然后把大文件切成固定大小的分片逐個上傳全部上傳成功后后端合并。面試官聽完我的介紹連珠炮似的問了幾個問題為什么要在 worker 里計算哈希直接在主線程算不行嗎分片大小是怎么確定的為什么選 5MB 而不是 10MB 或 1MB如果一個分片上傳失敗怎么處理要不要重試文件的唯一標(biāo)識怎么生成如果兩個文件內(nèi)容一樣但文件名不同算一個文件還是兩個文件第一個問題我答得還行說計算大文件哈希會阻塞主線程導(dǎo)致頁面卡頓和滾動掉幀所以放到 worker 里。第二個問題我其實沒仔細(xì)想過當(dāng)時就是拍腦袋定的 5MB面試官追問后我硬編了一個理由網(wǎng)絡(luò)波動大太小會頻繁請求太大會導(dǎo)致單次失敗重試成本高。這個回答勉強算合理但被面試官聽出了我沒有做過實際壓測。他補了一句一般會根據(jù)網(wǎng)絡(luò)環(huán)境和文件大小動態(tài)調(diào)整分片大小有些方案會在秒傳時先用 HEAD 請求咨詢后端已存在的分片。這句話被我記到了筆記里。第三個問題我答了失敗重試 重新上傳該分片的方案面試官追問“并發(fā)上傳分片的話怎么控制最大并發(fā)數(shù)”我說可以用 p-limit 之類的庫或者自己維護(hù)一個并發(fā)池他就沒繼續(xù)追。第四個問題我答的是用內(nèi)容哈希作為文件唯一標(biāo)識所以兩個文件內(nèi)容相同但文件名不同會被識別成同一個文件秒傳直接返回結(jié)果。這塊我比較熟因為他問的正好是我做過的核心邏輯。3.2 性能優(yōu)化從 Network 面板到 Lighthouse 的實戰(zhàn)回答項目深挖之后面試官很自然地把話題引到了性能優(yōu)化上“你在這個表格虛擬滾動里除了虛擬列表還做了哪些前端性能優(yōu)化”我當(dāng)時心里一緊因為簡歷里寫了“首屏加載優(yōu)化”但實際做的比較淺。我回答了幾個點路由懶加載、組件異步加載、圖片懶加載、打包時關(guān)閉 sourcemap、公共依賴抽成 CDN。面試官表示認(rèn)可但接著問了一句讓我有點慌的話“那你有沒有真正研究過首屏性能指標(biāo)比如 FCP、LCP 這些你知道它們分別代表什么嗎”好在我在面試前一周刷到了一個關(guān)于 Core Web Vitals 的文章勉強能說出來FCP 是首次內(nèi)容繪制LCP 是最大內(nèi)容繪制LCP 通常比 FCP 更能反映用戶感知的加載速度。面試官還追問了怎么優(yōu)化 LCP我說了三個方向優(yōu)化圖片體積和格式、預(yù)加載關(guān)鍵資源、減少首屏 JavaScript 體積。他點點頭沒有再深挖。這輪的小心得是面試官并不指望你把所有性能指標(biāo)說得倒背如流但作為一個有項目經(jīng)驗的前端你需要對自己項目里做了哪些性能優(yōu)化有清晰的量化認(rèn)知比如圖片減少了多少字節(jié)、LCP 降低了多少毫秒哪怕只是估算也比只說“我做了懶加載”強得多。提個醒如果簡歷上寫了“性能優(yōu)化”四個字一定要準(zhǔn)備一個可以量化的case不然面試官只要追一句“優(yōu)化前多少、優(yōu)化后多少”就很容易暴露出你只是嘴上說說。3.3 Vue 原理與響應(yīng)式背了那么久終于用到了一次二面后半段基本是 Vue 原理的天下。面試官看了我的項目是用 Vue 2 寫的但 JD 要求里有 Vue 3于是從 Vue 2 一直問到 Vue 3。他先問 Vue 2 響應(yīng)式原理。這個我熟Object.defineProperty 對每個屬性做 getter/setter 劫持實現(xiàn)依賴收集和派發(fā)更新。他接著問“數(shù)組的響應(yīng)式是怎么處理的”我說 Vue 2 重寫了數(shù)組的七個方法push、pop、shift、unshift、splice、sort、reverse然后他問“為什么直接通過下標(biāo)修改數(shù)組不能觸發(fā)視圖更新”我回答是因為 defineProperty 只能劫持對象屬性而下標(biāo)修改沒法觸發(fā)。這個答得還算順。然后他問 Vue 3 和 Vue 2 的響應(yīng)式有什么區(qū)別。我答了 Proxy 和 defineProperty 的區(qū)別Proxy 可以攔截對象的增刪和屬性修改不需要像 Vue 2 那樣遍歷對象屬性還可以攔截數(shù)組索引賦值所以不需要 hack 數(shù)組方法。面試官追問“Proxy 的兼容性怎么看”我說 es6 之后現(xiàn)代瀏覽器基本都支持但老瀏覽器需要 polyfill 或者降級 —— 正好這也是項目選型時需要考慮的點。最后他問了一個我完全沒想到的問題“Vue 的 nextTick 原理是什么如果讓你實現(xiàn)一個簡易版你會怎么做”我在項目中用過 nextTick也知道它跟 DOM 更新后的回調(diào)有關(guān)但真正要我說原理就垮了。我只能說跟微任務(wù)有關(guān)然后就卡住了。面試官沒太難為我告訴我核心是利用 Promise.then 或者 MutationObserver 把回調(diào)放進(jìn)微任務(wù)隊列等 DOM 更新后執(zhí)行。這道題我后來認(rèn)真補了絕對是 Vue 源碼里最值得深入的一塊因為它牽扯到事件循環(huán)、異步更新、組件渲染機制。4. 三面leader 面的終極問題不是技術(shù)是「思考」4.1 業(yè)務(wù)與技術(shù)的關(guān)系混子如何急中生智二面過后的第三面面試官已經(jīng)明顯是技術(shù) leader 級別開場完全不問代碼先問我“你在這個項目里有沒有過跟產(chǎn)品經(jīng)理或者后端發(fā)生分歧的時候你最后怎么處理的”這種問題對于混子來說是最容易翻車的因為平時我就是那個“行行行你說啥我做啥”的人。但這次我急中生智講了一個真實但稍微潤色過的故事之前有一次產(chǎn)品提了一個需求要求前端做大量數(shù)據(jù)的即時篩選和排序我預(yù)估了一下如果按需求直接實現(xiàn)頁面會有明顯卡頓于是我沒有直接拒絕而是先做了一版 demo用一萬條數(shù)據(jù)實測截了性能面板的圖給產(chǎn)品看然后提出了虛擬滾動 服務(wù)端篩選的替代方案最終產(chǎn)品接受了。面試官接著問了一句特別有價值的話“你覺得自己在這個過程中除了開發(fā)還承擔(dān)了什么角色”我說其實前端不只是把設(shè)計稿變成頁面還需要充當(dāng)技術(shù)方案和業(yè)務(wù)訴求之間的翻譯官。這句話后來想想有點裝但在當(dāng)時居然贏得了面試官的點頭。4.2 成長性問題你怎么學(xué)習(xí)、怎么復(fù)盤leader 面后半段偏“軟素質(zhì)”了。問題包括平時怎么學(xué)習(xí)前端的未來三年的規(guī)劃是什么最近有沒有關(guān)注什么前端新技術(shù)學(xué)習(xí)路線我是這么說的日常以項目為主遇到問題先查文檔、再查 issue、最后翻源碼業(yè)余會看一些前端社區(qū)的高質(zhì)量文章重點關(guān)注工程化和性能優(yōu)化方向偶爾會動手寫點小 demo 來驗證想法。面試官追問“那你最近看過印象最深的一篇文章是什么”我愣了一下臨時想到前端工程化里的微前端方案說最近在研究微前端的沙箱機制。其實那篇文章我只看了半篇但為了圓場我硬是把 main 應(yīng)用和子應(yīng)用之間的樣式隔離、js 沙箱概念講了個大概。這輪的心得是不要給自己挖坑。面試官問你看過什么一定要挑一個你真的熟悉的技術(shù)不然他順著你的回答連續(xù)追問下去你就會像我一樣啞火。后來面試官真的追問了“沙箱是怎么實現(xiàn) js 隔離的”我答得很虛只能說出 with Proxy 的 eval 方式因為他提了我就順藤摸瓜說了兩句屬于運氣比較好。4.3 反問環(huán)節(jié)別問沒營養(yǎng)的問題三面最后留了幾分鐘反問面試官很客氣地說“你有什么想問我的”。我之前看過不少面經(jīng)知道反問環(huán)節(jié)不能回答“沒有”但也不能問太淺的問題。我問了兩個問題一個是“團隊目前的前端技術(shù)棧和工程化建設(shè)到什么程度”另一個是“如果我有幸加入您覺得我當(dāng)前最需要補足的能力是什么”。這兩個問題的好處是第一表現(xiàn)出你對團隊感興趣第二能通過面試官的回答反推自己哪些方面弱即便沒拿到 offer也是很有價值的反饋。面試官回答第二個問題時說了一句我印象很深的話“你基礎(chǔ)不算差但學(xué)習(xí)方式偏零散如果你能把一個知識點吃透到能主動教會別人的程度會好很多。”這句話后來被我當(dāng)成很長一段時間的座右銘也徹底改變了我刷前端面試題的方式。5. HR 面聊薪資與 offer 的博弈5.1 HR 面的套路不是聊天是談判HR 面放在三輪技術(shù)面之后大概 30 分鐘。很多人以為 HR 面就是聊聊天其實不是HR 面是有明確目的的她要知道你的期望薪資、最快到崗時間、手里的其他 offer、離職原因、穩(wěn)定性、學(xué)歷背景等每一項都可能影響定級和薪資。HR 第一個問題就是“為什么從上家公司離職”。我提前準(zhǔn)備過沒抱怨加班多、沒說領(lǐng)導(dǎo)不好而是說“做了兩年業(yè)務(wù)型前端覺得技術(shù)成長變慢了想換一個技術(shù)氛圍更濃的平臺”。這個答案既真實又不招黑。她接著問“目前手里有其他 offer 嗎”。我當(dāng)時其實手里只有一個中小廠的 offer薪資還沒談但我沒有撒謊也沒有把話說死就說“有一個在流程中的機會但更傾向于這邊因為更想做技術(shù)深耕”。后來我復(fù)盤覺得這個回答還行既表明了競爭力也給對方留了空間。5.2 談薪話術(shù)混子的不算技巧的技巧薪資環(huán)節(jié)是 HR 面最核心的部分。我因為上一家薪資不高所以在定期望值之前做了一點功課查了市場行情、問了一圈朋友最后報了一個比當(dāng)前薪資高大概 25% 的數(shù)字留了 5% 的還價空間。HR 問“你期望薪資為什么是這個數(shù)”我說了三層邏輯第一基于當(dāng)前市場行情和崗位要求這個區(qū)間在合理范圍第二對比我現(xiàn)在的能力和項目經(jīng)驗?zāi)塥毩⒇?fù)責(zé)復(fù)雜模塊第三如果定級和期望有差距也可以考慮其他綜合福利和成長空間。整個過程沒有硬剛但也沒有一上來就自降身價。這里有個細(xì)節(jié)HR 問“能不能接受定級低一些”我說“如果定級對應(yīng)的工作內(nèi)容是我感興趣的可以談但薪資上希望盡量靠到某個區(qū)間”。這種“定級可以讓步薪資不能太離譜”的回答方式既顯得務(wù)實也給 HR 留下了協(xié)商空間。最后 offer 給的薪資雖然比期望少了 2K但綜合下來比我上家漲了不少我接受了。6. 面后復(fù)盤混子進(jìn)場帶著什么離場6.1 面試中暴露的問題清單雖然最后拿到了口頭 offer但我清楚這輪面經(jīng)里我的表現(xiàn)不是“穩(wěn)”而是“懸”。回看整個流程我暴露的問題非常典型也很有參考價值。手寫代碼基本功不扎實防抖、深拷貝、Promise.all 都屬于高頻題但我寫得不快且不規(guī)范尤其 Promise.all 的實現(xiàn)順序問題暴露了我對 Promise 內(nèi)部機制的淺層理解。知識點碎片化不成體系flex-basis 默認(rèn)值、nextTick 原理、宏任務(wù)微任務(wù)調(diào)度這些點單獨問都能聊幾句但一旦被追問“為什么”就卡殼。項目中的技術(shù)決策缺乏數(shù)據(jù)支撐分片大小為什么選 5MB、優(yōu)化效果具體是多少我說不出來這是面試官最敏感的部分。學(xué)習(xí)方式偏被動leader 面問我看過什么文章我只記得大概是某個方向但沒有真正消化成自己的知識結(jié)構(gòu)。Vue 3 知識儲備不足JD 里明確寫了 Vue 3我只知道 Proxy 比 defineProperty 強但組合式 API 的底層設(shè)計邏輯、編譯優(yōu)化等內(nèi)容基本空白。這些問題不是面試失敗者的專屬反而是很多“能干活但說不出來”的前端共通的短板。我把它列出來是想讓大家明白混子不可怕可怕的是不知道自己混在哪。只要能定位到具體的能力缺口接下來補就是了。6.2 給下一批「混子」的4條實在建議結(jié)合我這次經(jīng)歷給同樣準(zhǔn)備大廠前端面試的同學(xué)幾條建議第一把簡歷上的每一條項目經(jīng)歷都準(zhǔn)備成一個 5 分鐘的故事。故事要包含背景、難點、你的方案、踩過的坑、最終效果。這樣面試官問什么你都能往這個故事上引不會出現(xiàn)“你做過什么”和“你會什么”兩張皮的情況。第二手寫題必須脫離背誦真正動筆跑一遍。我現(xiàn)在都記得 Promise.all 那道題給我?guī)淼那琛＝ㄗh把防抖、節(jié)流、深拷貝、Promise.all、Promise.race、數(shù)組扁平化、柯里化、new、call/apply/bind、instanceof、EventEmitter 這類高頻手寫題全部在本地跑過三遍以上直到閉上眼睛能寫出來。第三建立一個“為什么”清單。每刷一道八股文就追問自己三次“為什么”。比如事件循環(huán)不僅要背宏任務(wù)微任務(wù)的順序還要知道為什么要區(qū)分宏任務(wù)和微任務(wù)比如 Vue 響應(yīng)式不僅要背 Proxy還要知道 Vue 2 為什么不用 Proxy。面試官最愛追問的點往往都在三次“為什么”之后。第四視頻面試一定要錄音。我面完之后回聽錄音才發(fā)現(xiàn)自己有大量的“嗯”“那個”“就是”這類停頓詞而且很多題明明答到了關(guān)鍵點但因為表達(dá)不清晰聽起來像沒答到。錄音復(fù)盤是成本最低、提升最明顯的練習(xí)方式。6.3 復(fù)盤表格哪些題該拿分卻沒拿住我把整場面試的題目和自己的表現(xiàn)整理成了表格方便大家直觀感受大廠面試的考察密度面試輪次核心題目我的表現(xiàn)丟分點得分點一面閉包與防抖手寫中偏下防抖節(jié)流條件寫反this 綁定不清能給出防抖的應(yīng)用場景一面深拷貝手寫偏下循環(huán)引用和特殊類型處理不當(dāng)知道 JSON 方案的局限一面Promise.all 手寫偏下結(jié)果順序錯誤邊界處理不全能寫出基本框架一面瀏覽器緩存良好無明顯丟分Cache-Control 字段和協(xié)商緩存優(yōu)先級二面大文件分片上傳中上分片大小的技術(shù)依據(jù)不足對哈希、秒傳、并發(fā)控制有實踐二面性能優(yōu)化指標(biāo)中缺少量化數(shù)據(jù)知道 LCP/FCP 的基本概念二面Vue 響應(yīng)式原理中上nextTick 原理不清晰Vue2/Vue3 對比答得較完整三面業(yè)務(wù)分歧處理良好無明顯丟分有實際案例表達(dá)清晰三面學(xué)習(xí)方式與技術(shù)趨勢中技術(shù)文章印象不深微前端細(xì)節(jié)經(jīng)不起追問能表達(dá)學(xué)習(xí)方向HR面期望薪資與穩(wěn)定性良好無明顯丟分談薪有策略表達(dá)務(wù)實表格里能看出來我的優(yōu)勢在“有真實項目經(jīng)歷支撐的實戰(zhàn)問題”劣勢在“純基礎(chǔ)概念的深度和手寫能力”。如果你也打算面大廠可以先自己模擬打一次分看自己到底屬于哪類選手然后針對短板集中突破。回看整個面試過程我最大的感受是混子不混、只是平時沒把知識形成體系。真正讓我通過這輪面試的不是面試前那兩周背了多少題而是過去兩年在項目里踩坑時留下的肌肉記憶以及對項目細(xì)節(jié)的認(rèn)真復(fù)盤。如果你也是一枚混子別慌把我踩過的坑避開把我僥幸過關(guān)的地方變成你的穩(wěn)定項大廠的門沒有想象中那么窄。最后再分享一個小技巧面試被問到不會的題別直接說“不會”試著說出你的思考路徑比如“我對這個問題不了解但我從另外一個角度推測可能是……”。面試官要的不是滿分答案而是看你遇到未知問題時的反應(yīng)。這個能力恰恰是混子最容易被低估的地方。