2025年前端面試題歸總(含答案)_第1頁
2025年前端面試題歸總(含答案)_第2頁
2025年前端面試題歸總(含答案)_第3頁
2025年前端面試題歸總(含答案)_第4頁
2025年前端面試題歸總(含答案)_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

2025年前端面試題歸總(含答案)HTML部分：Q：請解釋HTML語義化的意義，常見的語義化標簽有哪些？A：HTML語義化指通過合理使用具有明確含義的標簽描述內(nèi)容結構，而非僅依賴表現(xiàn)。意義包括：提升可訪問性（屏幕閱讀器能正確解析）、利于SEO（搜索引擎更易理解內(nèi)容層級）、增強代碼可維護性。常見標簽：`<header>`（頁面/區(qū)域頭部）、`<nav>`（導航）、`<main>`（主要內(nèi)容）、`<article>`（獨立內(nèi)容塊）、`<section>`（主題性分組）、`<aside>`（側邊欄）、`<footer>`（頁腳）、`<figure>`（圖文組合）、`<figcaption>`（圖注）。需注意`<div>`和`<span>`是無語義通用容器，應避免濫用。CSS部分：Q：CSS盒模型有哪幾種？如何切換？標準盒模型與IE盒模型的區(qū)別是什么？A：盒模型分為標準盒模型（content-box）和IE盒模型（border-box）。通過`box-sizing`屬性切換，默認值為`content-box`，設置`box-sizing:border-box`切換為IE盒模型。區(qū)別：標準盒模型的`width/height`僅包含內(nèi)容區(qū)（content），不包含內(nèi)邊距（padding）、邊框（border）；IE盒模型的`width/height`包含content+padding+border，實際顯示尺寸固定為設置值，內(nèi)邊距和邊框會向內(nèi)擠壓內(nèi)容區(qū)。Q：什么是BFC？觸發(fā)條件和應用場景有哪些？A：BFC（塊級格式化上下文）是CSS中一個獨立的渲染區(qū)域，內(nèi)部元素的布局不受外部影響，且區(qū)域內(nèi)元素會按塊級盒標準布局。觸發(fā)條件包括：根元素（`<html>`）、`float`不為none、`position`為absolute或fixed、`display`為inline-block/table-cell/table-caption/flex/grid、`overflow`不為visible。應用場景：解決浮動元素導致的父容器高度塌陷（父元素觸發(fā)BFC后會包含浮動子元素）、避免相鄰塊級元素的margin重疊（同一BFC內(nèi)的相鄰塊級元素margin會合并，不同BFC則不會）、防止文字環(huán)繞（BFC元素與浮動元素并列時，內(nèi)容不會被浮動元素覆蓋）。JavaScript部分：Q：簡述事件循環(huán)（EventLoop）的執(zhí)行機制，瀏覽器與Node.js的事件循環(huán)有何區(qū)別？A：事件循環(huán)是JS處理異步任務的核心機制，分為同步任務和異步任務。執(zhí)行流程：1.執(zhí)行調用棧中的同步任務；2.同步任務執(zhí)行完畢后，遍歷微任務隊列（MicrotaskQueue），執(zhí)行所有微任務；3.微任務執(zhí)行完畢后，根據(jù)當前渲染時機（如瀏覽器的重繪階段），可能觸發(fā)UI渲染；4.渲染完成后，從宏任務隊列（MacrotaskQueue）中取出一個宏任務執(zhí)行，重復步驟2-4。瀏覽器與Node.js的區(qū)別主要在微任務和宏任務的分類及執(zhí)行順序：-瀏覽器的微任務包括`Promise.then()`、`MutationObserver`、`process.nextTick`（僅Node）；宏任務包括`setTimeout`、`setInterval`、`setImmediate`（僅Node）、I/O、UI事件。-Node.js在事件循環(huán)中增加了`check`階段（執(zhí)行`setImmediate`）和`closecallbacks`階段（處理關閉事件）。特別地，Node的`process.nextTick`會在當前階段結束后立即執(zhí)行，早于其他微任務（如`Promise.then`），屬于“次微任務”。Q：原型鏈的作用是什么？如何實現(xiàn)繼承？A：原型鏈是JS實現(xiàn)繼承的核心機制。每個對象（除`null`）都有一個`__proto__`屬性指向其原型對象，原型對象又有自己的原型，最終指向`Ototype`，其`__proto__`為`null`，形成原型鏈。作用：當訪問對象屬性時，若對象自身無該屬性，會沿原型鏈向上查找，直到找到或到達`null`。實現(xiàn)繼承的常見方式：1.原型鏈繼承：`Ctotype=newParent()`，缺點是子實例共享父實例的引用類型屬性；2.構造函數(shù)繼承：`functionChild(){Parent.call(this);}`，缺點是無法繼承原型方法；3.組合繼承（最常用）：結合原型鏈和構造函數(shù)繼承，`Ctotype=newParent();Ctotype.constructor=Child;`，但會調用兩次父構造函數(shù)；4.寄生組合繼承（優(yōu)化版）：通過`Object.create(Ptotype)`創(chuàng)建原型，避免重復調用父構造函數(shù)；5.ES6`class`繼承：`classChildextendsParent{constructor(){super();}}`，本質是語法糖，內(nèi)部使用寄生組合繼承。React部分：Q：React18中并發(fā)模式（Concurrency）的核心改進是什么？`useTransition`和`useDeferredValue`的作用？A：并發(fā)模式的核心是讓React能中斷、恢復渲染，優(yōu)先處理高優(yōu)先級任務（如用戶輸入），提升交互流暢性。傳統(tǒng)渲染是同步的，一旦開始就無法中斷，可能導致長任務阻塞UI。并發(fā)模式通過Fiber架構實現(xiàn)異步可中斷渲染，將渲染拆分為多個小任務，利用空閑時間執(zhí)行，支持任務優(yōu)先級調度。`useTransition`用于標記一個狀態(tài)更新為“可中斷”的低優(yōu)先級任務，返回`[isPending,startTransition]`，其中`isPending`表示過渡狀態(tài)，`startTransition`包裹的更新會讓步于高優(yōu)先級任務（如輸入）。例如：```jsxconst[text,setText]=useState('');const[isPending,startTransition]=useTransition();consthandleInput=(e)=>{setText(e.target.value);//高優(yōu)先級（輸入）startTransition(()=>{setSearchQuery(e.target.value);//低優(yōu)先級（搜索）});};````useDeferredValue`用于延遲更新非緊急的UI值，返回一個延遲后的值，在高優(yōu)先級任務完成后再更新。例如：```jsxconstdeferredText=useDeferredValue(text);return<ExpensiveComponenttext={deferredText}/>;```當`text`變化時，`ExpensiveComponent`不會立即重新渲染，而是等待瀏覽器空閑時再更新，避免阻塞主線程。Q：React的Fiber是什么？它如何優(yōu)化渲染？A：Fiber是React16+引入的調和（Reconciliation）引擎的重新實現(xiàn)，本質是一個工作單元（對應組件、文本節(jié)點等）的鏈表結構。每個Fiber節(jié)點保存了組件的狀態(tài)、屬性、子節(jié)點等信息，并記錄了需要進行的操作（如插入、更新、刪除）。優(yōu)化機制：1.可中斷渲染：Fiber將渲染任務拆分為多個小單元，每個單元執(zhí)行完后檢查是否有更高優(yōu)先級的任務（如事件），若有則暫停當前任務，優(yōu)先處理高優(yōu)先級任務；2.任務優(yōu)先級：每個Fiber節(jié)點有優(yōu)先級（如用戶輸入觸發(fā)的更新優(yōu)先級高于數(shù)據(jù)獲?。?，調度器會優(yōu)先處理高優(yōu)先級任務；3.增量更新：通過`requestIdleCallback`（或`requestAnimationFrame`）在瀏覽器空閑時執(zhí)行部分任務，減少主線程阻塞，提升響應速度；4.雙緩沖技術：維護當前渲染的Fiber樹（current）和正在計算的Fiber樹（workInProgress），計算完成后替換current樹，避免中間狀態(tài)閃爍。Vue部分：Q：Vue3的響應式系統(tǒng)與Vue2有何不同？`ref`和`reactive`的區(qū)別及使用場景？A：Vue3使用`Proxy`替代Vue2的`Object.defineProperty`實現(xiàn)響應式，核心區(qū)別：-支持監(jiān)聽對象屬性的新增/刪除（`defineProperty`需手動`$set`/`$delete`）；-支持數(shù)組的所有操作（`defineProperty`無法檢測數(shù)組長度變化和通過索引賦值）；-支持Map、Set等復雜數(shù)據(jù)類型；-惰性響應化（僅訪問屬性時才遞歸代理子對象，提升性能）。`ref`和`reactive`的區(qū)別：-`reactive`用于對象（包括數(shù)組、Map等），返回其Proxy代理；`ref`用于原始值（如string、number）或對象，內(nèi)部通過`{value:xxx}`包裹實現(xiàn)響應式；-訪問時，`reactive`對象直接取屬性（`obj.foo`），`ref`需通過`.value`（模板中可省略）；-`reactive`不能直接替換整個對象（`obj=newObj`會丟失響應性），`ref`可通過`ref.value=newVal`替換；-當`ref`的值為對象時，`ref.value`會被自動轉為`reactive`代理。使用場景：原始值（如計數(shù)、輸入框內(nèi)容）用`ref`；對象/數(shù)組（如用戶信息、列表數(shù)據(jù)）用`reactive`；需要在組合式API中傳遞響應式數(shù)據(jù)時，`ref`更方便（避免解構`reactive`對象導致響應性丟失）。Q：Vue3的組合式API（Composables）相比選項式API有哪些優(yōu)勢？如何避免邏輯復用中的副作用？A：優(yōu)勢：1.邏輯復用更靈活：通過`composable`函數(shù)提取可復用邏輯（如`useFetch`、`useLocalStorage`），避免選項式API中`mixins`的命名沖突和來源不清晰問題；2.代碼組織更合理：按功能（如狀態(tài)管理、事件處理）而非選項（data、methods、watch）分組，復雜組件的代碼可讀性更高；3.類型推導更友好：組合式API基于函數(shù)參數(shù)和返回值，TypeScript能更準確推斷類型；4.更好的TreeShaking支持：未使用的`composable`函數(shù)可被打包工具移除，減少包體積。避免副作用的方法：-在`onUnmounted`中清理定時器、事件監(jiān)聽器等；-使用`watch`的`onInvalidate`回調處理異步請求取消（如AbortController）；-確保`composable`返回的函數(shù)/狀態(tài)在組件卸載時正確釋放資源；-避免在`composable`中直接修改全局變量或非響應式外部狀態(tài)，保持純函數(shù)邏輯。性能優(yōu)化部分：Q：前端性能優(yōu)化的常見指標有哪些？如何提升首屏加載速度？A：核心指標（基于WebVitals）：-LCP（最大內(nèi)容ful填充像素）：衡量加載性能，目標<2.5s；-FID（首次輸入延遲）：衡量交互響應性，目標<100ms；-CLS（累積布局偏移）：衡量視覺穩(wěn)定性，目標<0.1；其他指標：FCP（首次內(nèi)容渲染）、TTI（可交互時間）、TBT（總阻塞時間）。提升首屏速度的方法：1.資源壓縮：JS/CSS使用Terser/PostCSS壓縮，圖片用WebP/AVIF格式（比JPEG小25-50%），開啟Gzip/Brotli壓縮；2.按需加載：路由懶加載（`import()`）、組件懶加載（`Suspense`）、圖片懶加載（`IntersectionObserver`）；3.減少關鍵資源數(shù)量：合并CSS/JS（需權衡緩存失效問題），內(nèi)聯(lián)關鍵CSS（通過`CriticalCSS`提取首屏必需樣式）；4.緩存策略：設置`Cache-Control`（如`max-age=31536000`）、使用`ServiceWorker`實現(xiàn)離線緩存；5.優(yōu)化JS執(zhí)行：減少同步阻塞腳本（用`async`或`defer`加載），避免長任務（拆分任務為微任務或使用WebWorker）；6.服務端優(yōu)化：SSR/SSG（如Next.js、Nuxt.js）減少客戶端渲染時間，使用CDN加速靜態(tài)資源。工程化部分：Q：Webpack5相比Webpack4有哪些改進？如何優(yōu)化Webpack構建速度？A：Webpack5的核心改進：-持久化緩存（`cache:{type:'filesystem'}`）：緩存編譯結果到磁盤，二次構建速度提升；-模塊聯(lián)邦（ModuleFederation）：支持跨應用共享模塊（如微前端）；-內(nèi)置ESM支持：`output.module:true`輸出ESM格式，`experiments.outputModule`支持原生模塊加載；-移除Node.jspolyfill（需手動引入），減少包體積；-更智能的樹搖（TreeShaking），支持`sideEffects`標記優(yōu)化。優(yōu)化構建速度的方法：1.緩存：開啟`cache`配置，使用`hard-source-webpack-plugin`（Webpack4）或內(nèi)置緩存（Webpack5）；2.多進程編譯：`thread-loader`配合`babel-loader`/`ts-loader`，將耗時的loader放到子進程；3.縮小文件搜索范圍：`resolve.modules`指定第三方模塊路徑，`resolve.alias`縮短路徑解析，`exclude/include`限制loader作用范圍；4.優(yōu)化loader配置：`babel-loader`使用`cacheDirectory`緩存編譯結果，`image-webpack-loader`僅在生產(chǎn)環(huán)境壓縮圖片；5.按需加載插件：開發(fā)環(huán)境關閉`TerserPlugin`、`CssMinimizerPlugin`等壓縮插件；6.使用Webpack5的`experiments.futureDefaults:true`啟用新優(yōu)化策略。算法與數(shù)據(jù)結構部分：Q：實現(xiàn)一個快速排序算法，并說明其時間復雜度和空間復雜度。A：快速排序（分治思想）步驟：1.選擇基準值（通常選數(shù)組中間元素）；2.分區(qū)：將數(shù)組分為小于基準、等于基準、大于基準三部分；3.遞歸排序小于和大于基準的子數(shù)組。實現(xiàn)代碼（原地排序優(yōu)化版）：```javascriptfunctionquickSort(arr,left=0,right=arr.length-1){if(left>=right)returnarr;constpivotIndex=partition(arr,left,right);quickSort(arr,left,pivotIndex-1);quickSort(arr,pivotIndex+1,right);returnarr;}functionpartition(arr,left,right){constpivot=arr[Math.floor((left+right)/2)];//選中間值為基準leti=left,j=right;while(i<=j){while(arr[i]<pivot)i++;//找左半部分大于等于pivot的元素while(arr[j]>pivot)j--;//找右半部分小于等于pivot的元素if(i<=j){[arr[i],arr[j]]=[arr[j],arr[i]];//交換i++;j--;}}returni;//返回基準的最終位置}```時間復雜度：平均O(nlogn)，最壞O(n2)（數(shù)組已排序且每次選首尾為基準）；空間復雜度：平均O(logn)（遞歸棧深度），最壞O(n)。開放性問題：Q：如果讓你設計一個通用的React組件庫，需要考慮哪些方面？A：需從功能、性能、可維護性、擴展性、易用性等維度設計：1.組件設計：-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論