說實話三天吃透前端八股文這個說法我自己當(dāng)年求職的時候也干過。那時候距離校招還有一個星期我抱著背不下來就完蛋的心態(tài)把事件循環(huán)、閉包、原型鏈這些考點翻來覆去啃了三遍最后確實拿到了幾個offer。但真正入職之后回頭看才發(fā)現(xiàn)八股文這東西背只是表面關(guān)鍵的還是把背后的原理串成體系。這篇文章我不打算給你一份標(biāo)準(zhǔn)的問答清單而是站在一個面試過別人、也被別人面過的人的角度拆一拆2024年Web前端面試八股文到底考什么、為什么考、以及怎么用三天時間把最核心的東西吃透。不管你是應(yīng)屆生、轉(zhuǎn)行者還是準(zhǔn)備跳槽的老手這篇文章都會對你有用。1. 前端八股文到底在考什么1.1 八股文的真實定位不是背題是搭知識骨架很多人一提八股文就皺眉覺得面試官只會念經(jīng)面試者只會背答案。但換個角度想八股文的本質(zhì)其實是前端這個行業(yè)十幾年沉淀下來的公共知識底座。它覆蓋了JavaScript語言機制、瀏覽器渲染原理、網(wǎng)絡(luò)協(xié)議、框架設(shè)計思想、工程化體系這幾個大板塊這些問題背后對應(yīng)的是一個前端工程師日常工作中真正會碰到的問題域。你寫業(yè)務(wù)代碼的時候可能一年都用不上幾次事件循環(huán)的手寫實現(xiàn)但如果線上頁面出現(xiàn)渲染卡頓、接口請求順序錯亂、內(nèi)存泄漏你腦子里沒有一個清晰的底層模型排查起來就是大海撈針。八股文的意義就是逼你在入場之前先把這張地圖畫出來——哪怕有些角落你暫時沒去過至少你知道方向在哪。所以我對背八股文這件事的態(tài)度是背但別死背。你把它當(dāng)成知識骨架來搭每個問題的答案背后都掛上幾個真實的業(yè)務(wù)場景這樣面試官追問起來你才不會當(dāng)場卡殼。1.2 2024年面試風(fēng)向從會不會用到懂不懂原理這兩年的前端面試明顯能感覺到一個變化考點還是那些考點但考法越來越刁了。以前問閉包是什么你能說出函數(shù)內(nèi)部訪問外部變量就能過關(guān)現(xiàn)在面試官會直接甩給你一段代碼讓你說出輸出結(jié)果然后追問如果這里換成let呢如果是異步回調(diào)呢內(nèi)存會泄漏嗎。我2024年初幫部門面了幾十個人感受特別深。八股文的題目幾乎沒變但評分維度已經(jīng)從知識的廣度轉(zhuǎn)向理解的深度。面試官更想知道的是你面對一個模糊問題時能不能用底層原理推演出正確結(jié)論。這意味著你光記住結(jié)論沒用得知道結(jié)論是怎么推出來的。再比如前兩年React 18、Vue 3全面鋪開之后Hooks的閉包陷阱、Fiber的可中斷渲染、Vue的Proxy響應(yīng)式限制這類問題已經(jīng)成了一線大廠和頭部中廠的必問項。這些考點沒有捷徑只能靠真正理解源碼層面的設(shè)計思路才能答得好。1.3 哪些人適合三天沖刺策略先潑一盆冷水三天時間不可能讓一個小白變成前端大牛。這個策略適合兩類人。第一類是已經(jīng)寫過不少項目、但知識體系比較零散的人你缺的不是代碼量而是一張把零散經(jīng)驗串起來的網(wǎng)第二類是即將面試、已經(jīng)系統(tǒng)學(xué)過一遍但需要快速回顧的人。如果你連JavaScript的基本語法都還沒搞熟那三天時間請老老實實回去補基礎(chǔ)別指望八股文能救你。在我?guī)н^的求職者里三天沖刺效果最好的往往是那些項目經(jīng)驗足夠、但一被追問原理就心虛的人。他們的代碼能力在線只是面試表達和底層原理這兩塊是短板而八股文恰恰能幫他們快速補齊這兩塊。2. 核心考點拆解JavaScript與瀏覽器機制2.1 事件循環(huán)面試官最愛的底層機制事件循環(huán)Event Loop可以說是前端面試里出現(xiàn)頻率最高的問題了基本上十個面試官里有九個會問。為什么這么偏愛因為它能把JavaScript的單線程模型、異步機制、宏任務(wù)微任務(wù)、渲染時機全部串起來一個題目就能考察你對語言核心機制的整體理解。面試時最常見的問法是看下面這段代碼說出輸出順序。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。但如果你只答到這里最多只能算及格。面試官一定會追問為什么Promise的回調(diào)先于setTimeout執(zhí)行這時候你要說的核心邏輯是同步代碼先執(zhí)行這是JavaScript執(zhí)行的第一步遇到微任務(wù)Promise.then、queueMicrotask、MutationObserver就放進微任務(wù)隊列遇到宏任務(wù)setTimeout、setInterval、I/O、事件回調(diào)就放進宏任務(wù)隊列同步代碼執(zhí)行完畢后瀏覽器會清空整個微任務(wù)隊列然后再取一個宏任務(wù)執(zhí)行循環(huán)往復(fù)。關(guān)鍵點在于每一輪事件循環(huán)只取一個宏任務(wù)但會清空全部的微任務(wù)隊列。這也就是為什么Promise的then回調(diào)會在setTimeout之前執(zhí)行——即使setTimeout的延遲時間是0。光講理論還不夠我建議你把下面這個變體也準(zhǔn)備好這是2024年很流行的一道變種題async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); async1(); new Promise((resolve) { console.log(promise1); resolve(); }).then(() { console.log(promise2); }); console.log(script end);這個題的輸出順序是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。注意await后面的代碼在語義上等同于Promise.then屬于微任務(wù)所以async1 end會排在promise2之前。注意Event Loop在不同環(huán)境下有差異。瀏覽器端是兩個隊列宏任務(wù)微任務(wù)Node.js的較新版本已經(jīng)和瀏覽器趨同但老版本還有process.nextTick和setImmediate的特殊邏輯。面試時如果被問到Node環(huán)境可以補充一句Node端現(xiàn)在也遵循類似的機制但還要注意nextTick優(yōu)先于Promise回調(diào)。2.2 閉包與作用域鏈必須能現(xiàn)場寫出來閉包是個典型的以為會了、一寫就廢的考點。你光能說出函數(shù)里返回函數(shù)、內(nèi)部函數(shù)持有外部函數(shù)作用域的引用是不夠的面試官大概率會讓你現(xiàn)場寫一個實際場景。最常見的場景是循環(huán)加事件綁定for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 100); }這個輸出是5、5、5、5、5因為var聲明的i是函數(shù)級作用域循環(huán)結(jié)束時i已經(jīng)變成5所有回調(diào)共享同一個i。如果你寫成let輸出就會變成0、1、2、3、4。但面試官不會滿足于這個答案他會追問如果用var怎么改成輸出0-4這就是閉包的經(jīng)典解法for (var i 0; i 5; i) { (function (j) { setTimeout(() { console.log(j); }, 100); })(i); }通過立即執(zhí)行函數(shù)創(chuàng)建一個新的函數(shù)作用域把當(dāng)前的i作為參數(shù)傳進去這樣每個回調(diào)捕獲的就是自己那一輪的值。背這個答案很容易但要真正理解你需要在腦子里記住一個模型閉包是函數(shù)定義時所在作用域鏈的保留。也就是說內(nèi)部函數(shù)被返回之后它的作用域鏈仍然保存著對外部函數(shù)變量的引用這些變量不會被垃圾回收機制清除直到閉包本身也不再有引用。面試官還會追問閉包的內(nèi)存泄漏問題。經(jīng)典的場景是在事件監(jiān)聽器里使用了閉包但組件銷毀時沒有移除監(jiān)聽器導(dǎo)致外部作用域的變量一直存活?；卮鸬臅r候可以主動提到閉包本身不泄漏內(nèi)存泄漏是因為使用不當(dāng)導(dǎo)致引用無法被釋放這樣會顯得你的理解更到位。2.3 原型鏈與繼承一張圖講清楚原型鏈?zhǔn)荍avaScript面向?qū)ο蟮暮诵臋C制幾乎所有大廠面試都會涉及。最常見的開場問題是創(chuàng)建一個對象有哪幾種方式new一個對象的過程中發(fā)生了什么new的機制必須能脫口而出創(chuàng)建一個新對象將新對象的__proto__指向構(gòu)造函數(shù)的prototype將構(gòu)造函數(shù)內(nèi)部的this綁定到新對象如果構(gòu)造函數(shù)沒有顯式返回對象則返回這個新對象。function myNew(Constructor, ...args) { const obj Object.create(Constructor.prototype); const result Constructor.apply(obj, args); return result instanceof Object ? result : obj; }這段代碼雖然短但考點密集Object.create用來設(shè)置原型、apply用來綁定this、instanceof用來判斷構(gòu)造函數(shù)是否返回了引用類型。面試官讓你手寫new的時候你把這三點講清楚基本就能過關(guān)。繼承的考點主要圍繞class語法糖和組合繼承展開。我建議你把下面這個組合式繼承的寫法爛熟于心function Animal(name) { this.name name; } Animal.prototype.sayName function () { console.log(this.name); }; function Dog(name, breed) { Animal.call(this, name); this.breed breed; } Dog.prototype Object.create(Animal.prototype); Dog.prototype.constructor Dog;這里Animal.call(this, name)解決屬性繼承Object.create(Animal.prototype)解決方法繼承同時用constructor指回Dog來修正原型鏈的構(gòu)造函數(shù)指向。面試官追問為什么不用new Animal()來繼承原型時你能答出因為new Animal()會執(zhí)行構(gòu)造函數(shù)里的賦值邏輯還會創(chuàng)建一個多余的實例就夠了。2.4 手寫Promise高頻中的高頻如果說Event Loop是瀏覽器機制的一姐那手寫Promise就是手寫代碼題的一哥。以我統(tǒng)計過的面試情況前端面到二輪之后手寫一個簡易Promise的概率超過六成。這里說的手寫Promise不是讓你把完整A規(guī)范全寫出來那至少幾百行而是寫一個能滿足基本鏈?zhǔn)秸{(diào)用、異步狀態(tài)轉(zhuǎn)換的簡化版class MyPromise { constructor(executor) { this.state pending; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; const resolve (value) { if (this.state pending) { this.state fulfilled; this.value value; this.onFulfilledCallbacks.forEach((fn) fn()); } }; const reject (reason) { if (this.state pending) { this.state rejected; this.reason reason; this.onRejectedCallbacks.forEach((fn) fn()); } }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { onFulfilled typeof onFulfilled function ? onFulfilled : (value) value; onRejected typeof onRejected function ? onRejected : (reason) { throw reason; }; const promise2 new MyPromise((resolve, reject) { if (this.state fulfilled) { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } // 類似處理 rejected 和 pending 狀態(tài) }); return promise2; } }寫的時候不要追求完美核心是展示你理解了幾個要點狀態(tài)一旦改變就不可逆、then可以鏈?zhǔn)秸{(diào)用、executor是同步執(zhí)行的、回調(diào)隊列用于處理異步場景。面試官更看重的是思路不是代碼能跑多復(fù)雜的用例。3. 框架與工程化React/Vue必問清單3.1 ReactFiber架構(gòu)、Hooks原理、diff算法2024年React相關(guān)的面試題基本聚焦在三個方向Fiber架構(gòu)解決了什么問題、Hooks的工作原理與使用限制、虛擬DOM的diff算法。Fiber這個問題我建議你用問題-方案的邏輯來答。先說問題React 15及之前的版本一旦開始遞歸渲染組件樹整個過程中JS線程會被占滿如果組件數(shù)量大、層級深超過16ms一幀的時間預(yù)算用戶就會感覺到頁面卡頓。Fiber的出現(xiàn)把不可中斷的遞歸改成可中斷的鏈表遍歷每個工作單元可以暫停、讓出主線程、再恢復(fù)配合時間切片實現(xiàn)在高優(yōu)先級任務(wù)比如用戶輸入和渲染任務(wù)之間的協(xié)調(diào)?；卮饡r如果還能提到Fiber節(jié)點上保存了return、sibling、child三個指針分別指向父節(jié)點、兄弟節(jié)點和子節(jié)點從而構(gòu)成一個鏈表結(jié)構(gòu)就已經(jīng)超出絕大多數(shù)候選人的水平了。Hooks的原理是另一個高頻題目。面試官常問為什么Hooks不能放在條件語句里背后的原因是React內(nèi)部通過一個類似鏈表的結(jié)構(gòu)來存儲每個Hook的狀態(tài)每次渲染時按順序讀取。如果你在條件里跳過某個Hook會導(dǎo)致React拿到的Hook順序和上次不一致狀態(tài)就會錯亂。能答到這個層面面試官基本就滿意了。diff算法這個問題關(guān)鍵是記住三條優(yōu)化策略只對同層級節(jié)點進行對比、不同類型的元素直接重建、通過key識別列表項是否可復(fù)用?？梢皂槺闾嵋幌聉ue和react的diff優(yōu)化策略略有不同React是從左到右遍歷Vue采用的是雙端對比但核心思路都是復(fù)用DOM節(jié)點、減少不必要的重建。3.2 Vue響應(yīng)式原理與組件通信Vue 3全面普及之后面試題的重點也從Object.defineProperty轉(zhuǎn)移到了Proxy上。最經(jīng)典的問題就是Vue 3為什么用Proxy替換Object.defineProperty標(biāo)準(zhǔn)答法是Object.defineProperty只能劫持對象已有的屬性新增和刪除屬性需要額外的Vue.set和Vue.delete來觸發(fā)響應(yīng)而Proxy可以直接監(jiān)聽整個對象的讀取、寫入、刪除、屬性枚舉等操作不需要遞歸遍歷每一個屬性。不過也要注意Proxy的惰性代理雖然能提升初始化性能但深層嵌套對象的響應(yīng)式轉(zhuǎn)換仍然需要在訪問時遞歸完成所以性能一定更好這個說法并不絕對能補充這一點顯得更專業(yè)。組件通信是另一個必問題。父子組件用props和emit跨層級用provide/inject復(fù)雜狀態(tài)用Vuex/Pinia面試時能一口氣把這個體系講清楚再結(jié)合自己的項目舉例這題基本上就穩(wěn)了。3.3 工程化Webpack/Vite的構(gòu)建優(yōu)化工程化問題最近兩年被問得越來越多因為前端團隊已經(jīng)不再滿足于能跑就行而是開始關(guān)注構(gòu)建速度和產(chǎn)物體積。最常考的是Webpack的構(gòu)建流程是什么Webpack和Vite有什么區(qū)別Webpack的構(gòu)建流程我建議按四步來答初始化參數(shù)、編譯階段、構(gòu)建模塊依賴圖、輸出結(jié)果。關(guān)鍵是理解Webpack一切皆模塊的打包理念以及Loader和Plugin的區(qū)別——Loader負責(zé)轉(zhuǎn)換文件內(nèi)容Plugin負責(zé)在構(gòu)建流程的各個生命周期里做擴展操作。面試官追問你用過哪些Loader和Plugin的時候你至少要舉出babel-loader處理ES6、css-loader和style-loader處理樣式、MiniCssExtractPlugin抽離CSS、HtmlWebpackPlugin生成HTML這幾個例子。Vite和Webpack的對比也是個好題。Vite利用瀏覽器原生ESModule開發(fā)階段不需要打包所以冷啟動速度極快生產(chǎn)構(gòu)建則默認使用Rollup。但要注意Vite生態(tài)在某些方面比如老牌插件的兼容性不如Webpack成熟選型時要結(jié)合團隊情況。能把Webpack的設(shè)計思想和Vite的設(shè)計思想都講清楚顯得你不是只背工具而是理解工具背后的取舍。4. 網(wǎng)絡(luò)協(xié)議與性能優(yōu)化4.1 HTTP緩存強緩存與協(xié)商緩存HTTP緩存是前端性能面試題里的常青樹也是我面試別人的時候一定會問的問題因為它直接關(guān)系到線上頁面的加載速度優(yōu)化?；卮鸬目蚣芸梢园磧尚值軄碛洀娋彺婧蛥f(xié)商緩存。強緩存對應(yīng)的響應(yīng)頭是Cache-Control比如max-age3600和Expires命中時瀏覽器直接從緩存讀取不發(fā)請求。協(xié)商緩存對應(yīng)的響應(yīng)頭是Last-Modified/If-Modified-Since和ETag/If-None-Match每次請求都會發(fā)到服務(wù)器服務(wù)器判斷資源沒變就返回304讓瀏覽器使用緩存。面試官一般會追問強緩存命中時到底是瀏覽器怎么判斷的以及Cache-Control和Expires哪個優(yōu)先級更高這類細節(jié)。你要答得出Cache-Control的優(yōu)先級更高并且能解釋no-cache是每次都要問服務(wù)器而不是不緩存——這兩個概念經(jīng)常被混淆能分清楚就比大多數(shù)人強。我建議你在項目里實際配置一次Nginx的緩存頭把強緩存和協(xié)商緩存都壓測一遍這比背一百遍理論都有用。面試時候還能順口說一句我們團隊之前把靜態(tài)資源的Cache-Control配成了max-age31536000, immutable然后把文件名改成帶hash的版本號成功減少了重復(fù)請求這就是把理論和實踐打通了。4.2 前端性能優(yōu)化清單性能優(yōu)化這個問題面試官往往不會只問一個點而是讓你聊一聊做過哪些性能優(yōu)化這時候你要是東一榔頭西一棒子就吃虧了。我建議你按加載時優(yōu)化、運行時優(yōu)化、感知優(yōu)化三個維度組織答案。加載時優(yōu)化的核心是減少請求體積和請求次數(shù)JavaScript和CSS代碼做壓縮和tree-shaking、圖片用WebP/AVIF格式并按需懶加載、路由級代碼分割加上預(yù)加載、關(guān)鍵CSS內(nèi)聯(lián)、靜態(tài)資源上CDN并配置合適的緩存策略。有一個我在項目中實測很有效的優(yōu)化是首屏只加載當(dāng)前路由需要的代碼把組件按路由動態(tài)import打包體積瞬間能降30%-50%。運行時優(yōu)化關(guān)注的是主線程不要被長任務(wù)占滿避免過深的嵌套渲染、大數(shù)據(jù)列表用虛擬滾動、復(fù)雜的計算放到Web Worker、頻繁觸發(fā)的操作做防抖和節(jié)流。感知優(yōu)化則包括骨架屏、首屏內(nèi)容的優(yōu)先渲染、用content-visibility跳過屏幕外元素的渲染?；卮饡r能帶上具體的數(shù)字更好比如我們項目之前首屏白屏?xí)r間是2.8秒優(yōu)化后降到了1.2秒面試官聽完記憶點會非常深。5. 三天突擊計劃這樣復(fù)習(xí)最高效5.1 Day1打基礎(chǔ)主攻JS與瀏覽器第一天只干一件事把JavaScript核心機制和瀏覽器工作原理這兩塊拿下。上午花3個小時過事件循環(huán)和異步編程下午花3個小時過閉包、原型鏈、this指向晚上用兩個小時寫手寫題手寫new、手寫bind、手寫深拷貝、手寫防抖節(jié)流。我建議第一天不要碰框架因為框架的原理都建立在JS基礎(chǔ)之上基礎(chǔ)不牢框架原理更記不住。學(xué)習(xí)的時候別只看文字每個知識點都去找一道對應(yīng)的面試題做一遍邊做邊思考面試官為什么這么問。5.2 Day2框架與工程化重點突破第二天上午主攻你主力框架的原理。如果你主攻React就重點過Fiber、Hooks、diff算法和狀態(tài)管理如果主攻Vue就重點過響應(yīng)式原理、虛擬DOM、組件通信和Composition API。晚上安排兩個小時看工程化內(nèi)容Webpack構(gòu)建流程、Loader/Plugin機制、Vite和Webpack的對比這三塊是重點。這一天你要逼自己輸出。找個沒人的地方對著空氣把什么是虛擬DOMReact的Fiber解決了什么問題這些問題講一遍。能順暢講出來說明你是真理解了講得磕磕巴巴就回頭再看一遍原理解析。5.3 Day3網(wǎng)絡(luò)、手寫代碼與模擬面試第三天上午過HTTP緩存、瀏覽器渲染原理和性能優(yōu)化這三大塊。下午的時間全部用來做模擬面試把前幾天復(fù)習(xí)過的每個知識點過一遍每個問題用結(jié)論-原理-舉例的結(jié)構(gòu)回答。提示模擬面試時可以用手機錄音事后回聽你會發(fā)現(xiàn)很多以為自己懂了、說出來就亂的地方。這是提升表達效率最快的方法比多刷十道題都有用。6. 面試現(xiàn)場常見問題與避坑實錄6.1 五大翻車現(xiàn)場我統(tǒng)計了一下自己參與過的幾十場技術(shù)面試候選人最容易翻車的地方其實高度集中。幫你一個個拆解你對照自己踩過哪些坑。第一個是背答案痕跡過重。有些候選人回答什么是閉包時像背課文一樣把函數(shù)和其詞法環(huán)境的組合這個標(biāo)準(zhǔn)定義一口氣灌出來一個字都不差。這種答法一聽就是背的面試官會立刻追加一個換個場景問你的變體題來驗證。破解方法是定義說完之后馬上補一個自己的例子哪怕是項目里一個簡單的計數(shù)器或者防抖函數(shù)都行這才能證明你是真的理解。第二個是手寫代碼時忽略邊界情況。寫防抖節(jié)流的時候忘了考慮this綁定和參數(shù)透傳寫深拷貝的時候沒處理循環(huán)引用寫數(shù)組去重的時候只考慮了數(shù)字沒考慮對象。這些都是很典型的扣分點。解決辦法是寫完代碼之后主動說一句我考慮一下邊界情況然后當(dāng)場補上。這個動作本身就會給面試官留下好印象。第三個是被追問就慌。很多候選人第一輪問題答得很好面試官一追問就支支吾吾。比如問到Promise.all和Promise.allSettled的區(qū)別你能答出來追問如果某一個請求已經(jīng)rejected了Promise.all會怎樣你答直接走catch再追問那其他還在pending的請求會繼續(xù)執(zhí)行嗎你就懵了。其實答案是可以繼續(xù)執(zhí)行只是結(jié)果不會被接收。這種追問本質(zhì)上考的是你對異步機制的熟練度不是考記憶力。第四個是對項目中的技術(shù)選型說不清理由。面試官問你們項目為什么用Vue不用React為什么不用TypeScript你的回答如果只是團隊之前就這么定的那基本就是送命題。哪怕真實原因確實是這樣也要補一句技術(shù)層面的考量比如Vue3的響應(yīng)式對中小型項目更友好團隊上手成本低不過現(xiàn)在回頭看如果狀態(tài)邏輯更復(fù)雜可能選React和Zustand會更合適。能說出權(quán)衡就比單純甩鍋給團隊強。第五個是網(wǎng)絡(luò)題目只會背狀態(tài)碼含義。問到HTTP狀態(tài)碼你能背出200、301、304、401、403、404、500但問304狀態(tài)碼是在什么協(xié)商條件下出現(xiàn)的如果沒帶ETag還能有304嗎就答不上來。這要求你在理解層面把整個緩存機制串起來而不是孤立背數(shù)字。6.2 被追問時怎么辦八股文的正確用法在面試現(xiàn)場被追問是常態(tài)而且是好事——說明面試官在給你機會展示理解的深度。我的應(yīng)對策略是三層回答法。第一層先正面回答把最核心的結(jié)論送到面試官耳朵里第二層主動補充原理層面解釋為什么會這樣第三層結(jié)合自己的實際項目給出一個真實場景。舉個例子面試官問你在項目里怎么處理大量數(shù)據(jù)的渲染第一層回答用虛擬滾動只渲染可視區(qū)域內(nèi)的item第二層解釋原理把總高度撐開作為滾動條的真實高度但只掛載視口內(nèi)加buffer的部分滾動時動態(tài)更新渲染范圍第三層說案例我們之前做一個日志查看器一次性要渲染5萬行數(shù)據(jù)直接渲染卡到?jīng)]法用用了虛擬滾動后滾動非常流暢。這個回答結(jié)構(gòu)的好處是無論面試官想聽到記憶層面的答案、原理層面的答案還是應(yīng)用層面的答案你全部覆蓋了。哪怕他只想聽第一層也不會扣分如果他深挖到底你也不會被他打在及格線以下。6.3 面試官視角什么樣的回答能拿高分坐過面試桌另一頭之后我對什么樣的候選人算優(yōu)秀有了更清晰的認識。說實話能把八股文全背下來的人很多但每個問題都能答出層次感的人很少。我心中的高分答案有三個特征。第一有自己的組織邏輯。同樣是回答瀏覽器從輸入URL到頁面渲染發(fā)生了什么優(yōu)秀候選人會用網(wǎng)絡(luò)請求、資源解析、渲染管線三段式來講而不是想到什么說什么。第二有為什么的思考。回答完是什么之后能補充一句之所以這樣設(shè)計是因為……這體現(xiàn)的是工程思維。第三敢于承認不知道。被問到一個冷門知識點時說這個我沒深入研究過但根據(jù)我的理解大概是……比硬編造一個錯誤答案要好得多。我們是來招同事的不是來招答題機器的真實和坦誠比完美更值錢。7. 最后再分享一個我自己用過的復(fù)習(xí)小技巧準(zhǔn)備面試那幾天我每天晚上睡覺前都會做一件事拿一張白紙不看書、不看筆記把當(dāng)天復(fù)習(xí)過的所有考點默寫成一棵知識樹。寫不出來的地方用紅筆打個圈第二天早上第一件事就是補這些漏掉的點。這個方法看起來土但效果極好。因為默寫的過程會強迫你的大腦做回憶而不是識別這恰恰是面試時最需要的狀態(tài)——面試不會像選擇題那樣給你選項它只會給你一個開放性問題然后看你能從腦子里調(diào)出多少東西。把這個習(xí)慣堅持三天你會驚喜地發(fā)現(xiàn)那些紅圈越來越少了。祝你好運。 2024前端面試八股文核心考點與三天沖刺策略
說實話三天吃透前端八股文這個說法我自己當(dāng)年求職的時候也干過。那時候距離校招還有一個星期我抱著背不下來就完蛋的心態(tài)把事件循環(huán)、閉包、原型鏈這些考點翻來覆去啃了三遍最后確實拿到了幾個offer。但真正入職之后回頭看才發(fā)現(xiàn)八股文這東西背只是表面關(guān)鍵的還是把背后的原理串成體系。這篇文章我不打算給你一份標(biāo)準(zhǔn)的問答清單而是站在一個面試過別人、也被別人面過的人的角度拆一拆2024年Web前端面試八股文到底考什么、為什么考、以及怎么用三天時間把最核心的東西吃透。不管你是應(yīng)屆生、轉(zhuǎn)行者還是準(zhǔn)備跳槽的老手這篇文章都會對你有用。1. 前端八股文到底在考什么1.1 八股文的真實定位不是背題是搭知識骨架很多人一提八股文就皺眉覺得面試官只會念經(jīng)面試者只會背答案。但換個角度想八股文的本質(zhì)其實是前端這個行業(yè)十幾年沉淀下來的公共知識底座。它覆蓋了JavaScript語言機制、瀏覽器渲染原理、網(wǎng)絡(luò)協(xié)議、框架設(shè)計思想、工程化體系這幾個大板塊這些問題背后對應(yīng)的是一個前端工程師日常工作中真正會碰到的問題域。你寫業(yè)務(wù)代碼的時候可能一年都用不上幾次事件循環(huán)的手寫實現(xiàn)但如果線上頁面出現(xiàn)渲染卡頓、接口請求順序錯亂、內(nèi)存泄漏你腦子里沒有一個清晰的底層模型排查起來就是大海撈針。八股文的意義就是逼你在入場之前先把這張地圖畫出來——哪怕有些角落你暫時沒去過至少你知道方向在哪。所以我對背八股文這件事的態(tài)度是背但別死背。你把它當(dāng)成知識骨架來搭每個問題的答案背后都掛上幾個真實的業(yè)務(wù)場景這樣面試官追問起來你才不會當(dāng)場卡殼。1.2 2024年面試風(fēng)向從會不會用到懂不懂原理這兩年的前端面試明顯能感覺到一個變化考點還是那些考點但考法越來越刁了。以前問閉包是什么你能說出函數(shù)內(nèi)部訪問外部變量就能過關(guān)現(xiàn)在面試官會直接甩給你一段代碼讓你說出輸出結(jié)果然后追問如果這里換成let呢如果是異步回調(diào)呢內(nèi)存會泄漏嗎。我2024年初幫部門面了幾十個人感受特別深。八股文的題目幾乎沒變但評分維度已經(jīng)從知識的廣度轉(zhuǎn)向理解的深度。面試官更想知道的是你面對一個模糊問題時能不能用底層原理推演出正確結(jié)論。這意味著你光記住結(jié)論沒用得知道結(jié)論是怎么推出來的。再比如前兩年React 18、Vue 3全面鋪開之后Hooks的閉包陷阱、Fiber的可中斷渲染、Vue的Proxy響應(yīng)式限制這類問題已經(jīng)成了一線大廠和頭部中廠的必問項。這些考點沒有捷徑只能靠真正理解源碼層面的設(shè)計思路才能答得好。1.3 哪些人適合三天沖刺策略先潑一盆冷水三天時間不可能讓一個小白變成前端大牛。這個策略適合兩類人。第一類是已經(jīng)寫過不少項目、但知識體系比較零散的人你缺的不是代碼量而是一張把零散經(jīng)驗串起來的網(wǎng)第二類是即將面試、已經(jīng)系統(tǒng)學(xué)過一遍但需要快速回顧的人。如果你連JavaScript的基本語法都還沒搞熟那三天時間請老老實實回去補基礎(chǔ)別指望八股文能救你。在我?guī)н^的求職者里三天沖刺效果最好的往往是那些項目經(jīng)驗足夠、但一被追問原理就心虛的人。他們的代碼能力在線只是面試表達和底層原理這兩塊是短板而八股文恰恰能幫他們快速補齊這兩塊。2. 核心考點拆解JavaScript與瀏覽器機制2.1 事件循環(huán)面試官最愛的底層機制事件循環(huán)Event Loop可以說是前端面試里出現(xiàn)頻率最高的問題了基本上十個面試官里有九個會問。為什么這么偏愛因為它能把JavaScript的單線程模型、異步機制、宏任務(wù)微任務(wù)、渲染時機全部串起來一個題目就能考察你對語言核心機制的整體理解。面試時最常見的問法是看下面這段代碼說出輸出順序。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。但如果你只答到這里最多只能算及格。面試官一定會追問為什么Promise的回調(diào)先于setTimeout執(zhí)行這時候你要說的核心邏輯是同步代碼先執(zhí)行這是JavaScript執(zhí)行的第一步遇到微任務(wù)Promise.then、queueMicrotask、MutationObserver就放進微任務(wù)隊列遇到宏任務(wù)setTimeout、setInterval、I/O、事件回調(diào)就放進宏任務(wù)隊列同步代碼執(zhí)行完畢后瀏覽器會清空整個微任務(wù)隊列然后再取一個宏任務(wù)執(zhí)行循環(huán)往復(fù)。關(guān)鍵點在于每一輪事件循環(huán)只取一個宏任務(wù)但會清空全部的微任務(wù)隊列。這也就是為什么Promise的then回調(diào)會在setTimeout之前執(zhí)行——即使setTimeout的延遲時間是0。光講理論還不夠我建議你把下面這個變體也準(zhǔn)備好這是2024年很流行的一道變種題async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); async1(); new Promise((resolve) { console.log(promise1); resolve(); }).then(() { console.log(promise2); }); console.log(script end);這個題的輸出順序是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。注意await后面的代碼在語義上等同于Promise.then屬于微任務(wù)所以async1 end會排在promise2之前。注意Event Loop在不同環(huán)境下有差異。瀏覽器端是兩個隊列宏任務(wù)微任務(wù)Node.js的較新版本已經(jīng)和瀏覽器趨同但老版本還有process.nextTick和setImmediate的特殊邏輯。面試時如果被問到Node環(huán)境可以補充一句Node端現(xiàn)在也遵循類似的機制但還要注意nextTick優(yōu)先于Promise回調(diào)。2.2 閉包與作用域鏈必須能現(xiàn)場寫出來閉包是個典型的以為會了、一寫就廢的考點。你光能說出函數(shù)里返回函數(shù)、內(nèi)部函數(shù)持有外部函數(shù)作用域的引用是不夠的面試官大概率會讓你現(xiàn)場寫一個實際場景。最常見的場景是循環(huán)加事件綁定for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 100); }這個輸出是5、5、5、5、5因為var聲明的i是函數(shù)級作用域循環(huán)結(jié)束時i已經(jīng)變成5所有回調(diào)共享同一個i。如果你寫成let輸出就會變成0、1、2、3、4。但面試官不會滿足于這個答案他會追問如果用var怎么改成輸出0-4這就是閉包的經(jīng)典解法for (var i 0; i 5; i) { (function (j) { setTimeout(() { console.log(j); }, 100); })(i); }通過立即執(zhí)行函數(shù)創(chuàng)建一個新的函數(shù)作用域把當(dāng)前的i作為參數(shù)傳進去這樣每個回調(diào)捕獲的就是自己那一輪的值。背這個答案很容易但要真正理解你需要在腦子里記住一個模型閉包是函數(shù)定義時所在作用域鏈的保留。也就是說內(nèi)部函數(shù)被返回之后它的作用域鏈仍然保存著對外部函數(shù)變量的引用這些變量不會被垃圾回收機制清除直到閉包本身也不再有引用。面試官還會追問閉包的內(nèi)存泄漏問題。經(jīng)典的場景是在事件監(jiān)聽器里使用了閉包但組件銷毀時沒有移除監(jiān)聽器導(dǎo)致外部作用域的變量一直存活?；卮鸬臅r候可以主動提到閉包本身不泄漏內(nèi)存泄漏是因為使用不當(dāng)導(dǎo)致引用無法被釋放這樣會顯得你的理解更到位。2.3 原型鏈與繼承一張圖講清楚原型鏈?zhǔn)荍avaScript面向?qū)ο蟮暮诵臋C制幾乎所有大廠面試都會涉及。最常見的開場問題是創(chuàng)建一個對象有哪幾種方式new一個對象的過程中發(fā)生了什么new的機制必須能脫口而出創(chuàng)建一個新對象將新對象的__proto__指向構(gòu)造函數(shù)的prototype將構(gòu)造函數(shù)內(nèi)部的this綁定到新對象如果構(gòu)造函數(shù)沒有顯式返回對象則返回這個新對象。function myNew(Constructor, ...args) { const obj Object.create(Constructor.prototype); const result Constructor.apply(obj, args); return result instanceof Object ? result : obj; }這段代碼雖然短但考點密集Object.create用來設(shè)置原型、apply用來綁定this、instanceof用來判斷構(gòu)造函數(shù)是否返回了引用類型。面試官讓你手寫new的時候你把這三點講清楚基本就能過關(guān)。繼承的考點主要圍繞class語法糖和組合繼承展開。我建議你把下面這個組合式繼承的寫法爛熟于心function Animal(name) { this.name name; } Animal.prototype.sayName function () { console.log(this.name); }; function Dog(name, breed) { Animal.call(this, name); this.breed breed; } Dog.prototype Object.create(Animal.prototype); Dog.prototype.constructor Dog;這里Animal.call(this, name)解決屬性繼承Object.create(Animal.prototype)解決方法繼承同時用constructor指回Dog來修正原型鏈的構(gòu)造函數(shù)指向。面試官追問為什么不用new Animal()來繼承原型時你能答出因為new Animal()會執(zhí)行構(gòu)造函數(shù)里的賦值邏輯還會創(chuàng)建一個多余的實例就夠了。2.4 手寫Promise高頻中的高頻如果說Event Loop是瀏覽器機制的一姐那手寫Promise就是手寫代碼題的一哥。以我統(tǒng)計過的面試情況前端面到二輪之后手寫一個簡易Promise的概率超過六成。這里說的手寫Promise不是讓你把完整A規(guī)范全寫出來那至少幾百行而是寫一個能滿足基本鏈?zhǔn)秸{(diào)用、異步狀態(tài)轉(zhuǎn)換的簡化版class MyPromise { constructor(executor) { this.state pending; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; const resolve (value) { if (this.state pending) { this.state fulfilled; this.value value; this.onFulfilledCallbacks.forEach((fn) fn()); } }; const reject (reason) { if (this.state pending) { this.state rejected; this.reason reason; this.onRejectedCallbacks.forEach((fn) fn()); } }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { onFulfilled typeof onFulfilled function ? onFulfilled : (value) value; onRejected typeof onRejected function ? onRejected : (reason) { throw reason; }; const promise2 new MyPromise((resolve, reject) { if (this.state fulfilled) { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } // 類似處理 rejected 和 pending 狀態(tài) }); return promise2; } }寫的時候不要追求完美核心是展示你理解了幾個要點狀態(tài)一旦改變就不可逆、then可以鏈?zhǔn)秸{(diào)用、executor是同步執(zhí)行的、回調(diào)隊列用于處理異步場景。面試官更看重的是思路不是代碼能跑多復(fù)雜的用例。3. 框架與工程化React/Vue必問清單3.1 ReactFiber架構(gòu)、Hooks原理、diff算法2024年React相關(guān)的面試題基本聚焦在三個方向Fiber架構(gòu)解決了什么問題、Hooks的工作原理與使用限制、虛擬DOM的diff算法。Fiber這個問題我建議你用問題-方案的邏輯來答。先說問題React 15及之前的版本一旦開始遞歸渲染組件樹整個過程中JS線程會被占滿如果組件數(shù)量大、層級深超過16ms一幀的時間預(yù)算用戶就會感覺到頁面卡頓。Fiber的出現(xiàn)把不可中斷的遞歸改成可中斷的鏈表遍歷每個工作單元可以暫停、讓出主線程、再恢復(fù)配合時間切片實現(xiàn)在高優(yōu)先級任務(wù)比如用戶輸入和渲染任務(wù)之間的協(xié)調(diào)?；卮饡r如果還能提到Fiber節(jié)點上保存了return、sibling、child三個指針分別指向父節(jié)點、兄弟節(jié)點和子節(jié)點從而構(gòu)成一個鏈表結(jié)構(gòu)就已經(jīng)超出絕大多數(shù)候選人的水平了。Hooks的原理是另一個高頻題目。面試官常問為什么Hooks不能放在條件語句里背后的原因是React內(nèi)部通過一個類似鏈表的結(jié)構(gòu)來存儲每個Hook的狀態(tài)每次渲染時按順序讀取。如果你在條件里跳過某個Hook會導(dǎo)致React拿到的Hook順序和上次不一致狀態(tài)就會錯亂。能答到這個層面面試官基本就滿意了。diff算法這個問題關(guān)鍵是記住三條優(yōu)化策略只對同層級節(jié)點進行對比、不同類型的元素直接重建、通過key識別列表項是否可復(fù)用?？梢皂槺闾嵋幌聉ue和react的diff優(yōu)化策略略有不同React是從左到右遍歷Vue采用的是雙端對比但核心思路都是復(fù)用DOM節(jié)點、減少不必要的重建。3.2 Vue響應(yīng)式原理與組件通信Vue 3全面普及之后面試題的重點也從Object.defineProperty轉(zhuǎn)移到了Proxy上。最經(jīng)典的問題就是Vue 3為什么用Proxy替換Object.defineProperty標(biāo)準(zhǔn)答法是Object.defineProperty只能劫持對象已有的屬性新增和刪除屬性需要額外的Vue.set和Vue.delete來觸發(fā)響應(yīng)而Proxy可以直接監(jiān)聽整個對象的讀取、寫入、刪除、屬性枚舉等操作不需要遞歸遍歷每一個屬性。不過也要注意Proxy的惰性代理雖然能提升初始化性能但深層嵌套對象的響應(yīng)式轉(zhuǎn)換仍然需要在訪問時遞歸完成所以性能一定更好這個說法并不絕對能補充這一點顯得更專業(yè)。組件通信是另一個必問題。父子組件用props和emit跨層級用provide/inject復(fù)雜狀態(tài)用Vuex/Pinia面試時能一口氣把這個體系講清楚再結(jié)合自己的項目舉例這題基本上就穩(wěn)了。3.3 工程化Webpack/Vite的構(gòu)建優(yōu)化工程化問題最近兩年被問得越來越多因為前端團隊已經(jīng)不再滿足于能跑就行而是開始關(guān)注構(gòu)建速度和產(chǎn)物體積。最常考的是Webpack的構(gòu)建流程是什么Webpack和Vite有什么區(qū)別Webpack的構(gòu)建流程我建議按四步來答初始化參數(shù)、編譯階段、構(gòu)建模塊依賴圖、輸出結(jié)果。關(guān)鍵是理解Webpack一切皆模塊的打包理念以及Loader和Plugin的區(qū)別——Loader負責(zé)轉(zhuǎn)換文件內(nèi)容Plugin負責(zé)在構(gòu)建流程的各個生命周期里做擴展操作。面試官追問你用過哪些Loader和Plugin的時候你至少要舉出babel-loader處理ES6、css-loader和style-loader處理樣式、MiniCssExtractPlugin抽離CSS、HtmlWebpackPlugin生成HTML這幾個例子。Vite和Webpack的對比也是個好題。Vite利用瀏覽器原生ESModule開發(fā)階段不需要打包所以冷啟動速度極快生產(chǎn)構(gòu)建則默認使用Rollup。但要注意Vite生態(tài)在某些方面比如老牌插件的兼容性不如Webpack成熟選型時要結(jié)合團隊情況。能把Webpack的設(shè)計思想和Vite的設(shè)計思想都講清楚顯得你不是只背工具而是理解工具背后的取舍。4. 網(wǎng)絡(luò)協(xié)議與性能優(yōu)化4.1 HTTP緩存強緩存與協(xié)商緩存HTTP緩存是前端性能面試題里的常青樹也是我面試別人的時候一定會問的問題因為它直接關(guān)系到線上頁面的加載速度優(yōu)化?；卮鸬目蚣芸梢园磧尚值軄碛洀娋彺婧蛥f(xié)商緩存。強緩存對應(yīng)的響應(yīng)頭是Cache-Control比如max-age3600和Expires命中時瀏覽器直接從緩存讀取不發(fā)請求。協(xié)商緩存對應(yīng)的響應(yīng)頭是Last-Modified/If-Modified-Since和ETag/If-None-Match每次請求都會發(fā)到服務(wù)器服務(wù)器判斷資源沒變就返回304讓瀏覽器使用緩存。面試官一般會追問強緩存命中時到底是瀏覽器怎么判斷的以及Cache-Control和Expires哪個優(yōu)先級更高這類細節(jié)。你要答得出Cache-Control的優(yōu)先級更高并且能解釋no-cache是每次都要問服務(wù)器而不是不緩存——這兩個概念經(jīng)常被混淆能分清楚就比大多數(shù)人強。我建議你在項目里實際配置一次Nginx的緩存頭把強緩存和協(xié)商緩存都壓測一遍這比背一百遍理論都有用。面試時候還能順口說一句我們團隊之前把靜態(tài)資源的Cache-Control配成了max-age31536000, immutable然后把文件名改成帶hash的版本號成功減少了重復(fù)請求這就是把理論和實踐打通了。4.2 前端性能優(yōu)化清單性能優(yōu)化這個問題面試官往往不會只問一個點而是讓你聊一聊做過哪些性能優(yōu)化這時候你要是東一榔頭西一棒子就吃虧了。我建議你按加載時優(yōu)化、運行時優(yōu)化、感知優(yōu)化三個維度組織答案。加載時優(yōu)化的核心是減少請求體積和請求次數(shù)JavaScript和CSS代碼做壓縮和tree-shaking、圖片用WebP/AVIF格式并按需懶加載、路由級代碼分割加上預(yù)加載、關(guān)鍵CSS內(nèi)聯(lián)、靜態(tài)資源上CDN并配置合適的緩存策略。有一個我在項目中實測很有效的優(yōu)化是首屏只加載當(dāng)前路由需要的代碼把組件按路由動態(tài)import打包體積瞬間能降30%-50%。運行時優(yōu)化關(guān)注的是主線程不要被長任務(wù)占滿避免過深的嵌套渲染、大數(shù)據(jù)列表用虛擬滾動、復(fù)雜的計算放到Web Worker、頻繁觸發(fā)的操作做防抖和節(jié)流。感知優(yōu)化則包括骨架屏、首屏內(nèi)容的優(yōu)先渲染、用content-visibility跳過屏幕外元素的渲染?；卮饡r能帶上具體的數(shù)字更好比如我們項目之前首屏白屏?xí)r間是2.8秒優(yōu)化后降到了1.2秒面試官聽完記憶點會非常深。5. 三天突擊計劃這樣復(fù)習(xí)最高效5.1 Day1打基礎(chǔ)主攻JS與瀏覽器第一天只干一件事把JavaScript核心機制和瀏覽器工作原理這兩塊拿下。上午花3個小時過事件循環(huán)和異步編程下午花3個小時過閉包、原型鏈、this指向晚上用兩個小時寫手寫題手寫new、手寫bind、手寫深拷貝、手寫防抖節(jié)流。我建議第一天不要碰框架因為框架的原理都建立在JS基礎(chǔ)之上基礎(chǔ)不牢框架原理更記不住。學(xué)習(xí)的時候別只看文字每個知識點都去找一道對應(yīng)的面試題做一遍邊做邊思考面試官為什么這么問。5.2 Day2框架與工程化重點突破第二天上午主攻你主力框架的原理。如果你主攻React就重點過Fiber、Hooks、diff算法和狀態(tài)管理如果主攻Vue就重點過響應(yīng)式原理、虛擬DOM、組件通信和Composition API。晚上安排兩個小時看工程化內(nèi)容Webpack構(gòu)建流程、Loader/Plugin機制、Vite和Webpack的對比這三塊是重點。這一天你要逼自己輸出。找個沒人的地方對著空氣把什么是虛擬DOMReact的Fiber解決了什么問題這些問題講一遍。能順暢講出來說明你是真理解了講得磕磕巴巴就回頭再看一遍原理解析。5.3 Day3網(wǎng)絡(luò)、手寫代碼與模擬面試第三天上午過HTTP緩存、瀏覽器渲染原理和性能優(yōu)化這三大塊。下午的時間全部用來做模擬面試把前幾天復(fù)習(xí)過的每個知識點過一遍每個問題用結(jié)論-原理-舉例的結(jié)構(gòu)回答。提示模擬面試時可以用手機錄音事后回聽你會發(fā)現(xiàn)很多以為自己懂了、說出來就亂的地方。這是提升表達效率最快的方法比多刷十道題都有用。6. 面試現(xiàn)場常見問題與避坑實錄6.1 五大翻車現(xiàn)場我統(tǒng)計了一下自己參與過的幾十場技術(shù)面試候選人最容易翻車的地方其實高度集中。幫你一個個拆解你對照自己踩過哪些坑。第一個是背答案痕跡過重。有些候選人回答什么是閉包時像背課文一樣把函數(shù)和其詞法環(huán)境的組合這個標(biāo)準(zhǔn)定義一口氣灌出來一個字都不差。這種答法一聽就是背的面試官會立刻追加一個換個場景問你的變體題來驗證。破解方法是定義說完之后馬上補一個自己的例子哪怕是項目里一個簡單的計數(shù)器或者防抖函數(shù)都行這才能證明你是真的理解。第二個是手寫代碼時忽略邊界情況。寫防抖節(jié)流的時候忘了考慮this綁定和參數(shù)透傳寫深拷貝的時候沒處理循環(huán)引用寫數(shù)組去重的時候只考慮了數(shù)字沒考慮對象。這些都是很典型的扣分點。解決辦法是寫完代碼之后主動說一句我考慮一下邊界情況然后當(dāng)場補上。這個動作本身就會給面試官留下好印象。第三個是被追問就慌。很多候選人第一輪問題答得很好面試官一追問就支支吾吾。比如問到Promise.all和Promise.allSettled的區(qū)別你能答出來追問如果某一個請求已經(jīng)rejected了Promise.all會怎樣你答直接走catch再追問那其他還在pending的請求會繼續(xù)執(zhí)行嗎你就懵了。其實答案是可以繼續(xù)執(zhí)行只是結(jié)果不會被接收。這種追問本質(zhì)上考的是你對異步機制的熟練度不是考記憶力。第四個是對項目中的技術(shù)選型說不清理由。面試官問你們項目為什么用Vue不用React為什么不用TypeScript你的回答如果只是團隊之前就這么定的那基本就是送命題。哪怕真實原因確實是這樣也要補一句技術(shù)層面的考量比如Vue3的響應(yīng)式對中小型項目更友好團隊上手成本低不過現(xiàn)在回頭看如果狀態(tài)邏輯更復(fù)雜可能選React和Zustand會更合適。能說出權(quán)衡就比單純甩鍋給團隊強。第五個是網(wǎng)絡(luò)題目只會背狀態(tài)碼含義。問到HTTP狀態(tài)碼你能背出200、301、304、401、403、404、500但問304狀態(tài)碼是在什么協(xié)商條件下出現(xiàn)的如果沒帶ETag還能有304嗎就答不上來。這要求你在理解層面把整個緩存機制串起來而不是孤立背數(shù)字。6.2 被追問時怎么辦八股文的正確用法在面試現(xiàn)場被追問是常態(tài)而且是好事——說明面試官在給你機會展示理解的深度。我的應(yīng)對策略是三層回答法。第一層先正面回答把最核心的結(jié)論送到面試官耳朵里第二層主動補充原理層面解釋為什么會這樣第三層結(jié)合自己的實際項目給出一個真實場景。舉個例子面試官問你在項目里怎么處理大量數(shù)據(jù)的渲染第一層回答用虛擬滾動只渲染可視區(qū)域內(nèi)的item第二層解釋原理把總高度撐開作為滾動條的真實高度但只掛載視口內(nèi)加buffer的部分滾動時動態(tài)更新渲染范圍第三層說案例我們之前做一個日志查看器一次性要渲染5萬行數(shù)據(jù)直接渲染卡到?jīng)]法用用了虛擬滾動后滾動非常流暢。這個回答結(jié)構(gòu)的好處是無論面試官想聽到記憶層面的答案、原理層面的答案還是應(yīng)用層面的答案你全部覆蓋了。哪怕他只想聽第一層也不會扣分如果他深挖到底你也不會被他打在及格線以下。6.3 面試官視角什么樣的回答能拿高分坐過面試桌另一頭之后我對什么樣的候選人算優(yōu)秀有了更清晰的認識。說實話能把八股文全背下來的人很多但每個問題都能答出層次感的人很少。我心中的高分答案有三個特征。第一有自己的組織邏輯。同樣是回答瀏覽器從輸入URL到頁面渲染發(fā)生了什么優(yōu)秀候選人會用網(wǎng)絡(luò)請求、資源解析、渲染管線三段式來講而不是想到什么說什么。第二有為什么的思考。回答完是什么之后能補充一句之所以這樣設(shè)計是因為……這體現(xiàn)的是工程思維。第三敢于承認不知道。被問到一個冷門知識點時說這個我沒深入研究過但根據(jù)我的理解大概是……比硬編造一個錯誤答案要好得多。我們是來招同事的不是來招答題機器的真實和坦誠比完美更值錢。7. 最后再分享一個我自己用過的復(fù)習(xí)小技巧準(zhǔn)備面試那幾天我每天晚上睡覺前都會做一件事拿一張白紙不看書、不看筆記把當(dāng)天復(fù)習(xí)過的所有考點默寫成一棵知識樹。寫不出來的地方用紅筆打個圈第二天早上第一件事就是補這些漏掉的點。這個方法看起來土但效果極好。因為默寫的過程會強迫你的大腦做回憶而不是識別這恰恰是面試時最需要的狀態(tài)——面試不會像選擇題那樣給你選項它只會給你一個開放性問題然后看你能從腦子里調(diào)出多少東西。把這個習(xí)慣堅持三天你會驚喜地發(fā)現(xiàn)那些紅圈越來越少了。祝你好運。