2025年高頻前端面試題(含答案)1.如何理解Vue3組合式API（CompositionAPI）與選項(xiàng)式API（OptionsAPI）的核心差異？實(shí)際項(xiàng)目中如何選擇？Vue3組合式API與選項(xiàng)式API的核心差異體現(xiàn)在代碼組織方式和邏輯復(fù)用能力上。選項(xiàng)式API以data、methods、computed等選項(xiàng)劃分代碼塊，適合小型項(xiàng)目，邏輯按功能類型分散在不同選項(xiàng)中；組合式API通過setup函數(shù)和自定義hook（如useFetch、useCounter）將關(guān)聯(lián)邏輯聚合，解決了復(fù)雜組件中“邏輯關(guān)注點(diǎn)分散”的問題（例如一個(gè)組件同時(shí)涉及數(shù)據(jù)請求、表單驗(yàn)證、動(dòng)畫控制時(shí)，選項(xiàng)式API會(huì)導(dǎo)致同一邏輯的代碼分散在data、methods、watch等不同選項(xiàng)里）。選擇依據(jù)：小型項(xiàng)目或需要快速上手時(shí)推薦選項(xiàng)式API，其結(jié)構(gòu)符合直覺；中大型項(xiàng)目或需要高復(fù)用性邏輯（如跨組件共享的表單驗(yàn)證邏輯）時(shí)，組合式API通過自定義hook實(shí)現(xiàn)邏輯抽離更高效。需注意組合式API對TypeScript支持更友好，若項(xiàng)目使用TS，優(yōu)先選擇組合式API。2.React18中Concurrent模式的核心改進(jìn)是什么？如何影響組件渲染行為？Concurrent模式的核心是“可中斷的異步渲染”，通過優(yōu)先級(jí)調(diào)度（Lane模型）和時(shí)間分片（基于requestIdleCallback優(yōu)化）實(shí)現(xiàn)更平滑的用戶體驗(yàn)。傳統(tǒng)同步渲染（Legacy模式）中，組件渲染一旦開始就無法中斷，若組件樹復(fù)雜會(huì)導(dǎo)致主線程阻塞超過50ms，出現(xiàn)卡頓；Concurrent模式下，渲染過程可根據(jù)任務(wù)優(yōu)先級(jí)中斷，優(yōu)先處理用戶輸入（如點(diǎn)擊、滾動(dòng)）等高優(yōu)先級(jí)任務(wù)，待空閑時(shí)恢復(fù)低優(yōu)先級(jí)渲染。具體影響：①組件渲染可能被中斷并重新開始（需保證組件純函數(shù)特性，避免副作用在渲染階段執(zhí)行）；②支持Suspense組件的異步邊界（如數(shù)據(jù)加載時(shí)顯示加載狀態(tài)，數(shù)據(jù)就緒后無縫切換）；③自動(dòng)批處理（Batching）范圍擴(kuò)大，即使在setTimeout、Promise回調(diào)中調(diào)用setState也會(huì)合并更新（React18前僅事件回調(diào)內(nèi)批處理）。3.簡述Vite4.x相比Webpack5的核心優(yōu)勢，以及各自適用場景。Vite4.x基于ES模塊原生支持（ESModules），開發(fā)階段使用esbuild預(yù)構(gòu)建依賴（速度比Webpack的babel快10-100倍），并通過HTTP服務(wù)器直接提供ES模塊（無需打包），實(shí)現(xiàn)秒級(jí)冷啟動(dòng)和即時(shí)熱更新（HMR耗時(shí)<100ms）。生產(chǎn)環(huán)境使用Rollup打包，利用Tree-shaking和現(xiàn)代瀏覽器的原生支持優(yōu)化產(chǎn)物。Webpack5通過持久化緩存（cache:{type:'filesystem'}）、模塊聯(lián)邦（ModuleFederation）、更智能的tree-shaking等特性提升構(gòu)建性能，但開發(fā)階段需完整打包，冷啟動(dòng)時(shí)間隨項(xiàng)目增大而增加（大型項(xiàng)目可能超過10秒）。適用場景對比：Vite適合現(xiàn)代框架（Vue/React/Svelte）的中大型前端項(xiàng)目（尤其注重開發(fā)體驗(yàn)）、靜態(tài)網(wǎng)站（SSG）或輕量級(jí)應(yīng)用；Webpack適合需要復(fù)雜插件生態(tài)（如傳統(tǒng)多頁應(yīng)用、需要IE兼容）、微前端（模塊聯(lián)邦跨應(yīng)用共享組件）或需要深度定制構(gòu)建流程（如自定義優(yōu)化器、多環(huán)境變量處理）的項(xiàng)目。4.如何實(shí)現(xiàn)一個(gè)高性能的前端圖片加載方案？需考慮哪些關(guān)鍵指標(biāo)？高性能圖片加載方案需結(jié)合格式優(yōu)化、加載策略、懶加載和緩存策略：（1）格式優(yōu)化：優(yōu)先使用WebP（比JPEG小25-35%），對不支持的瀏覽器降級(jí)為AVIF（更高壓縮率）或JPEGXL；圖標(biāo)類圖片使用SVG（矢量無失真）或壓縮后的PNG（通過ImageOptim工具壓縮）。（2）加載策略：①響應(yīng)式圖片（srcset+sizes）：根據(jù)設(shè)備分辨率和視口寬度加載合適尺寸的圖片（如<imgsrcset="small.jpg480w,medium.jpg768w,large.jpg1200w"sizes="(max-width:600px)480px,800px">）；②占位圖（低質(zhì)量模糊圖LQIP或SVG占位）：在圖片加載前顯示模糊預(yù)覽，減少白屏?xí)r間。（3）懶加載：使用IntersectionObserverAPI監(jiān)聽圖片是否進(jìn)入視口（替代傳統(tǒng)的scroll事件監(jiān)聽），僅當(dāng)圖片接近可視區(qū)域時(shí)加載。注意設(shè)置loading="lazy"屬性（現(xiàn)代瀏覽器支持）作為補(bǔ)充。（4）緩存策略：通過HTTP頭設(shè)置長緩存（Cache-Control:max-age=31536000），圖片哈希命名（如image-abc123.jpg）實(shí)現(xiàn)內(nèi)容變化時(shí)自動(dòng)失效；使用ServiceWorker緩存高頻訪問圖片，離線時(shí)仍可顯示。關(guān)鍵指標(biāo)：①首屏圖片加載時(shí)間（需<1.5s）；②圖片總字節(jié)數(shù)（建議首屏圖片總大小<150KB）；③CLS（累積布局偏移）：通過aspect-ratio屬性或padding-top占位符固定圖片容器尺寸，避免加載時(shí)布局跳動(dòng)；④LCP（最大內(nèi)容ful填充時(shí)間）：首屏最大圖片需優(yōu)化至<2.5s。5.解釋JavaScript事件循環(huán)（EventLoop）的執(zhí)行機(jī)制，微任務(wù)（Microtask）和宏任務(wù)（Macrotask）的執(zhí)行順序如何？事件循環(huán)是JavaScript處理異步任務(wù)的核心機(jī)制，主線程執(zhí)行完同步代碼后，會(huì)不斷循環(huán)從任務(wù)隊(duì)列中取出任務(wù)執(zhí)行。具體步驟：（1）執(zhí)行全局同步代碼，創(chuàng)建執(zhí)行上下文棧。（2）執(zhí)行完同步代碼后，檢查微任務(wù)隊(duì)列（MicrotaskQueue），按順序執(zhí)行所有微任務(wù)（包括Promise.then/catch/finally、MutationObserver回調(diào)、queueMicrotask()添加的任務(wù)）。（3）微任務(wù)隊(duì)列清空后，進(jìn)行一次瀏覽器重渲染（UpdatetheRender），包括重排（Reflow）和重繪（Repaint）。（4）渲染完成后，從宏任務(wù)隊(duì)列（MacrotaskQueue）中取出一個(gè)宏任務(wù)執(zhí)行（包括setTimeout、setInterval、setImmediate（Node.js）、I/O操作、UI事件回調(diào)）。（5）重復(fù)步驟（2）-（4），形成循環(huán)。執(zhí)行順序示例：```javascriptconsole.log('scriptstart');//同步任務(wù)，立即執(zhí)行setTimeout(()=>{//宏任務(wù)console.log('setTimeout');},0);Promise.resolve().then(()=>{//微任務(wù)console.log('promise1');}).then(()=>{console.log('promise2');});console.log('scriptend');//同步任務(wù)，立即執(zhí)行//輸出順序：//scriptstart→scriptend→promise1→promise2→setTimeout```6.如何實(shí)現(xiàn)一個(gè)通用的前端錯(cuò)誤監(jiān)控方案？需捕獲哪些類型的錯(cuò)誤？通用錯(cuò)誤監(jiān)控方案需覆蓋運(yùn)行時(shí)錯(cuò)誤、資源加載錯(cuò)誤、Promise未捕獲拒絕、全局未捕獲異常，并支持錯(cuò)誤上報(bào)和上下文信息收集。（1）運(yùn)行時(shí)錯(cuò)誤（RuntimeErrors）：通過window.addEventListener('error',callback)捕獲，可獲取錯(cuò)誤信息（message）、堆棧（stack）、發(fā)生位置（filename、lineno、colno）。注意：該事件也會(huì)捕獲資源加載錯(cuò)誤（如img、script加載失?。?，需通過event.type區(qū)分（資源錯(cuò)誤的event.target為具體元素）。（2）Promise未捕獲拒絕（UnhandledPromiseRejections）：通過window.addEventListener('unhandledrejection',callback)捕獲，可獲取拒絕原因（reason）和Promise對象。（3）全局未捕獲異常（Node環(huán)境適用，但前端可通過類似思路）：前端主要依賴上述兩種事件，配合框架特定錯(cuò)誤邊界（如React的ErrorBoundary、Vue的errorHandler）捕獲組件級(jí)錯(cuò)誤。（4）上下文信息收集：需記錄用戶信息（UID、設(shè)備類型）、環(huán)境信息（瀏覽器版本、操作系統(tǒng)、屏幕分辨率）、頁面信息（URL、路由、Referrer）、錯(cuò)誤發(fā)生時(shí)的DOM狀態(tài)（如當(dāng)前點(diǎn)擊的元素）、性能指標(biāo)（如FCP、LCP）。（5）錯(cuò)誤上報(bào)：通過BeaconAPI（navigator.sendBeacon）或XMLHttpRequest發(fā)送到后端，確保頁面卸載時(shí)仍能成功上報(bào)。對高頻錯(cuò)誤需做防抖（如同一錯(cuò)誤5分鐘內(nèi)只上報(bào)一次）和采樣（如只上報(bào)10%的錯(cuò)誤），避免服務(wù)器壓力。7.簡述WebAssembly（Wasm）在前端中的典型應(yīng)用場景，以及與JavaScript的協(xié)作方式。WebAssembly是一種二進(jìn)制指令格式，設(shè)計(jì)目標(biāo)是在瀏覽器中實(shí)現(xiàn)接近原生的執(zhí)行速度（比JS快10-100倍），適用于計(jì)算密集型任務(wù)。典型場景：（1）圖形處理：如圖片/視頻編解碼（WebAssembly實(shí)現(xiàn)WebP編碼比JS快3倍）、3D渲染（替代部分WebGL的JS膠水代碼）。（2）科學(xué)計(jì)算：如物理引擎（游戲中的碰撞檢測）、金融風(fēng)控的復(fù)雜算法（實(shí)時(shí)計(jì)算大量數(shù)據(jù)）。（3）跨語言移植：將C/C++/Rust編寫的庫（如FFmpeg、SQLite）編譯為Wasm，在前端調(diào)用（如視頻編輯工具直接使用FFmpeg的Wasm版本進(jìn)行轉(zhuǎn)碼）。與JavaScript的協(xié)作方式：（1）導(dǎo)入/導(dǎo)出函數(shù)：Wasm模塊可導(dǎo)出函數(shù)供JS調(diào)用（如C函數(shù)通過EMSCRIPTEN_KEEPALIVE標(biāo)記后，編譯為Wasm的exports對象），JS也可向Wasm導(dǎo)入函數(shù)（如傳遞DOM操作回調(diào)）。（2）內(nèi)存共享：Wasm使用線性內(nèi)存（ArrayBuffer）與JS共享數(shù)據(jù)，JS通過WebAssembly.Memory對象訪問Wasm內(nèi)存，需注意類型轉(zhuǎn)換（如將JS字符串轉(zhuǎn)為UTF-8字節(jié)數(shù)組存入Wasm內(nèi)存）。（3）異步調(diào)用：Wasm本身不支持異步（如網(wǎng)絡(luò)請求），需通過JS橋接（如在Wasm中調(diào)用導(dǎo)入的JS函數(shù)，由JS執(zhí)行fetch后回調(diào)Wasm）。8.如何優(yōu)化React組件的渲染性能？請列舉至少5種具體方法。（1）使用React.memo緩存組件：對純函數(shù)組件（輸入props不變則輸出不變），用React.memo包裹，避免重復(fù)渲染（默認(rèn)淺比較props，可通過第二個(gè)參數(shù)自定義比較函數(shù)）。（2）優(yōu)化state粒度：避免將大對象作為state（如整個(gè)表單數(shù)據(jù)），拆分為多個(gè)小state（如單獨(dú)管理inputValue和isValid），減少不必要的重新渲染。（3）使用useCallback和useMemo緩存函數(shù)/計(jì)算值：通過useCallback緩存?zhèn)鬟f給子組件的回調(diào)函數(shù)（避免父組件渲染時(shí)函數(shù)引用變化導(dǎo)致子組件重新渲染），useMemo緩存耗時(shí)計(jì)算的結(jié)果（如列表過濾后的數(shù)組）。（4）虛擬化長列表：使用react-window或react-virtualized庫，僅渲染可視區(qū)域內(nèi)的列表項(xiàng)（如1000條數(shù)據(jù)只渲染20條），減少DOM節(jié)點(diǎn)數(shù)量。（5）避免在渲染階段執(zhí)行副作用：將數(shù)據(jù)請求、定時(shí)器等副作用移至useEffect，避免在組件函數(shù)體中執(zhí)行（會(huì)導(dǎo)致每次渲染都重新執(zhí)行，浪費(fèi)性能）。（6）使用useDeferredValue延遲更新：對非緊急的狀態(tài)更新（如搜索結(jié)果高亮），用useDeferredValue包裹，允許React推遲更新，優(yōu)先響應(yīng)高優(yōu)先級(jí)任務(wù)（如用戶輸入）。9.解釋Vue3響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理（基于Proxy），并說明與Vue2的Object.defineProperty的區(qū)別。Vue3響應(yīng)式系統(tǒng)核心是通過Proxy對象攔截目標(biāo)對象的屬性訪問（get）和修改（set）操作，關(guān)聯(lián)依賴（Dep）和觸發(fā)更新（Trigger）。具體流程：（1）當(dāng)訪問響應(yīng)式對象的屬性（如obj.foo）時(shí)，Proxy的get陷阱被觸發(fā)，調(diào)用track函數(shù)，將當(dāng)前活躍的副作用函數(shù)（effect）添加到該屬性的依賴集合（Dep）中。（2）當(dāng)修改屬性值（如obj.foo='bar'）時(shí)，Proxy的set陷阱被觸發(fā)，調(diào)用trigger函數(shù)，遍歷該屬性的依賴集合，執(zhí)行所有副作用函數(shù)（重新渲染組件或更新計(jì)算屬性）。與Vue2的Object.defineProperty的區(qū)別：（1）支持深層響應(yīng)式：Vue2需遞歸遍歷對象屬性并為每個(gè)屬性添加getter/setter，對數(shù)組的push、pop等方法需重寫；Vue3的Proxy可直接攔截對象的所有屬性（包括新增、刪除），無需遞歸初始化，對數(shù)組的原生方法（如push）也能自動(dòng)觸發(fā)更新（通過攔截length屬性的變化）。（2）支持Symbol類型屬性：Object.defineProperty無法監(jiān)聽Symbol類型的屬性，而Proxy可以攔截所有類型的屬性鍵。（3）性能優(yōu)化：Vue3的響應(yīng)式系統(tǒng)在初始化時(shí)無需深度遍歷對象（僅在訪問嵌套屬性時(shí)動(dòng)態(tài)創(chuàng)建響應(yīng)式），減少了初始化時(shí)間，尤其適合大型對象。10.編寫一個(gè)函數(shù)實(shí)現(xiàn)數(shù)組扁平化（flatten），要求支持深度控制，且盡可能高效。```javascriptfunctionflatten(arr,depth=1){returnarr.reduce((acc,val)=>{if(Array.isArray(val)&&depth>0){//遞歸展開，深度減1returnacc.concat(flatten(val,depth1));}else{returnacc.concat(val);}},[]);}//測試用例console.log(flatten([1,[2,[3,[4]],5]],2));//[1,2,3,[4],5]console.log(flatten([1,[2,[3,[4]],5]],Infinity));//[1,2,3,4,5]```優(yōu)化說明：使用reduce方法遍歷數(shù)組，避免了push的多次調(diào)用（concat更高效）；通過深度參數(shù)控制展開層級(jí)，默認(rèn)展開1層；當(dāng)depth為Infinity時(shí)，遞歸展開所有層級(jí)（通過判斷depth>0，Infinity1仍為Infinity）。相比循環(huán)+棧的實(shí)現(xiàn)，reduce的遞歸方式更簡潔，且在現(xiàn)代JS引擎中尾遞歸優(yōu)化（部分引擎支持）可避免棧溢出。11.如何理解前端中的“虛擬DOM（VirtualDOM）”？React和Vue的虛擬DOM實(shí)現(xiàn)有何差異？虛擬DOM是用JS對象模擬真實(shí)DOM結(jié)構(gòu)的輕量級(jí)描述（如{tag:'div',props:{id:'app'},children:[...]}），通過比較新舊虛擬DOM的差異（diff算法），僅更新需要變化的真實(shí)DOM節(jié)點(diǎn)，減少DOM操作次數(shù)（DOM操作比JS計(jì)算昂貴得多）。React與Vue虛擬DOM的差異：（1）diff策略：React采用“全量diff”，對同一層級(jí)的節(jié)點(diǎn)進(jìn)行key比較（列表需唯一key），不同層級(jí)節(jié)點(diǎn)直接刪除重建；Vue3采用“快速diff”算法，結(jié)合最長遞增子序列（LIS）優(yōu)化，減少移動(dòng)操作（如列表順序變化時(shí)，僅移動(dòng)實(shí)際變化的節(jié)點(diǎn)）。（2）觸發(fā)更新的粒度：React組件級(jí)更新（state變化觸發(fā)整個(gè)組件重新渲染，通過shouldComponentUpdate或React.memo優(yōu)化）；Vue3細(xì)粒度更新（響應(yīng)式系統(tǒng)追蹤具體依賴的屬性，僅重新渲染依賴該屬性的組件）。（3）虛擬DOM創(chuàng)建方式：React通過JSX（Babel編譯為createElement）；Vue通過h函數(shù)（或模板編譯為render函數(shù)，模板語法更接近HTML）。12.簡述HTTP/3相比HTTP/2的核心改進(jìn)，前端開發(fā)中需要注意哪些適配問題？HTTP/3基于QUIC協(xié)議（UDP之上的可靠傳輸），核心改進(jìn)：（1）解決隊(duì)頭阻塞（Head-of-LineBlocking）：HTTP/2在TCP連接上multiplexing（多路復(fù)用），但TCP層丟包會(huì)導(dǎo)致后續(xù)所有流阻塞；QUIC基于UDP，每個(gè)流獨(dú)立編號(hào)，丟包僅影響當(dāng)前流，其他流可繼續(xù)傳輸。（2）更快的連接建立：QUIC使用TLS1.3加密，首次連接僅需1-RTT（往返時(shí)間），后續(xù)連接通過會(huì)話恢復(fù)（0-RTT）；TCP+TLS1.3需2-3-RTT。（3）更好的移動(dòng)網(wǎng)絡(luò)支持：QUIC通過連接ID（而非IP+端口）標(biāo)識(shí)連接，移動(dòng)設(shè)備切換Wi-Fi/4G時(shí)（IP變化），可無縫恢復(fù)連接；TCP連接會(huì)因IP變化而斷開。前端適配注意點(diǎn)：（1）服務(wù)器支持：需部署支持HTTP/3的服務(wù)器（如Nginx1.23+、Cloudflare），并配置QUIC監(jiān)聽端口（通常443）。（2）客戶端兼容：現(xiàn)代瀏覽器（Chrome89+、Firefox90+）已支持，但舊瀏覽器（如Safari15-）可能僅支持HTTP/2，需通過Alt-Svc頭（如Alt-Svc:h3=":443";ma=86400）告知客戶端HTTP/3可用，客戶端自動(dòng)降級(jí)。（3）Cookie和緩存：QUIC連接的會(huì)話恢復(fù)依賴客戶端緩存的會(huì)話票證，需確保Cookie策略（SameSite、Secure）不會(huì)意外阻止會(huì)話恢復(fù)。（4）性能測試：使用ChromeDevTools的“Network”面板查看協(xié)議版本（顯示h3），驗(yàn)證是否啟用HTTP/3；對比HTTP/3與HTTP/2的加載時(shí)間（尤其在弱網(wǎng)環(huán)境下）。13.如何實(shí)現(xiàn)一個(gè)線程安全的前端本地存儲(chǔ)方案（支持高并發(fā)寫入）？前端本地存儲(chǔ)（localStorage/sessionStorage）是單線程同步的，多標(biāo)簽頁或高并發(fā)寫入時(shí)可能出現(xiàn)數(shù)據(jù)覆蓋問題。實(shí)現(xiàn)線程安全需結(jié)合以下機(jī)制：（1）使用IndexedDB替代localStorage：IndexedDB是異步、事務(wù)性的存儲(chǔ)，支持ACID特性，可通過事務(wù)（transaction）保證原子性。例如，寫入時(shí)創(chuàng)建只讀事務(wù)檢查數(shù)據(jù)，再創(chuàng)建讀寫事務(wù)更新，避免臟讀。（2）加鎖機(jī)制：通過localStorage的storage事件實(shí)現(xiàn)跨標(biāo)簽頁鎖。例如，寫入前嘗試在localStorage中設(shè)置鎖鍵（如lock:key=timestamp），監(jiān)聽storage事件確認(rèn)其他標(biāo)簽頁是否釋放鎖，超時(shí)（如500ms）則強(qiáng)制獲取鎖。（3）隊(duì)列處理：在單頁面內(nèi)，將寫入操作加入隊(duì)列，使用setTimeout或微任務(wù)按順序執(zhí)行，避免同步寫入阻塞主線程。示例代碼（基于IndexedDB和隊(duì)列）：```javascriptclassThreadSafeStorage{constructor(dbName='safeStorage',storeName='data'){this.db=null;this.queue=[];this.isProcessing=false;//初始化IndexedDBconstrequest=indexedDB.open(dbName,1);request.onupgradeneeded=(e)=>{constdb=e.target.result;if(!db.objectStoreNames.contains(storeName)){db.createObjectStore(storeName,{keyPath:'id'});}};request.onsuccess=(e)=>{this.db=e.target.result;cessQueue();};}asyncsetItem(id,value){returnnewPromise((resolve)=>{this.queue.push({type:'set',id,value,resolve});cessQueue();});}asyncprocessQueue(){if(this.isProcessing||this.queue.length===0||!this.db)return;this.isProcessing=true;consttask=this.queue.shift();consttransaction=this.db.transaction(task.storeName||'data','readwrite');conststore=transaction.objectStore('data');try{if(task.type==='set'){awaitnewPromise((res,rej)=>{constrequest=store.put({id:task.id,value:task.value});request.onsuccess=res;request.onerror=rej;});task.resolve();}}finally{this.isProcessing=false;cessQueue();//處理下一個(gè)任務(wù)}}}```14.解釋CSS中BFC（塊格式化上下文）的概念，列舉觸發(fā)BFC的條件及常見應(yīng)用場景。BFC（BlockFormattingContext）是Web頁面中CSS盒模型的一種渲染區(qū)域，其中塊級(jí)盒子（blockbox）按垂直方向排列，內(nèi)部元素的布局不受外部影響，也不會(huì)與外部浮動(dòng)元素重疊。觸發(fā)BFC的條件（滿足其一即可）：（1）根元素（<html>）；（2）float屬性不為none（left/right）；（3）position為absolute或fixed；（4）display為inline-block、table-cell、table-caption、flex、grid；（5）overflow不為visible（hidden/auto/scroll）。常見應(yīng)用場景：（1）解決浮動(dòng)元素導(dǎo)致的父容器高度塌陷：父容器觸發(fā)BFC后，會(huì)包含內(nèi)部的浮動(dòng)元素（