2025年高頻初級web工程師面試題及答案1.如何理解HTML語義化？常見的語義化標(biāo)簽有哪些？HTML語義化是指通過使用符合內(nèi)容語義的標(biāo)簽，讓頁面結(jié)構(gòu)更清晰，便于瀏覽器、搜索引擎解析，同時提升可訪問性。例如用`<header>`表示頁頭，`<nav>`表示導(dǎo)航，`<main>`表示主體內(nèi)容，`<article>`表示獨立文章，`<section>`表示章節(jié)，`<footer>`表示頁腳。避免全部使用`<div>`或`<span>`，能幫助屏幕閱讀器正確識別內(nèi)容結(jié)構(gòu)，也有利于SEO。2.CSS盒子模型有哪幾種？如何切換？盒子模型分為標(biāo)準(zhǔn)盒模型（content-box）和IE盒模型（border-box）。標(biāo)準(zhǔn)模型中元素總寬度=content寬度+padding+border+margin；IE模型中content寬度=總寬度paddingborder（即padding和border包含在content寬度內(nèi)）。通過`box-sizing`屬性切換，`box-sizing:content-box`為標(biāo)準(zhǔn)模型（默認(rèn)），`box-sizing:border-box`為IE模型。3.簡述Flex布局中justify-content和align-items的區(qū)別及常用值`justify-content`控制主軸方向的對齊方式，常用值有：flex-start（左對齊，默認(rèn)）、flex-end（右對齊）、center（居中）、space-between（兩端對齊，中間等距）、space-around（每個項目兩側(cè)等距）。`align-items`控制交叉軸方向的對齊方式，常用值包括：stretch（拉伸填充，默認(rèn)）、flex-start（交叉軸起點）、flex-end（交叉軸終點）、center（交叉軸居中）、baseline（基線對齊）。例如，主軸為水平方向時，justify-content控制水平對齊，align-items控制垂直對齊。4.實現(xiàn)元素垂直居中的5種方法（至少5種）（1）Flex布局：父元素設(shè)置`display:flex;align-items:center`；（2）絕對定位+transform：子元素`position:absolute;top:50%;transform:translateY(-50%)`；（3）表格布局：父元素`display:table`，子元素`display:table-cell;vertical-align:middle`；（4）Grid布局：父元素`display:grid;align-items:center`；（5）行內(nèi)塊級元素+行高：子元素`display:inline-block;vertical-align:middle`，父元素設(shè)置`line-height`等于自身高度。5.什么是BFC？觸發(fā)條件及應(yīng)用場景BFC（塊級格式化上下文）是一個獨立的渲染區(qū)域，內(nèi)部元素的布局不受外部影響。觸發(fā)條件包括：float不為none、position為absolute或fixed、display為inline-block/table-cell/table-caption、overflow不為visible（如hidden/auto）。應(yīng)用場景：解決浮動元素導(dǎo)致的父元素高度塌陷（父元素觸發(fā)BFC包裹浮動子元素）、避免相鄰塊級元素的margin重疊（兩個BFC元素的margin不會合并）、防止文字環(huán)繞浮動元素（BFC元素不會與浮動元素重疊）。6.解釋JavaScript的事件循環(huán)（EventLoop）機制事件循環(huán)是JS處理異步任務(wù)的核心機制。JS是單線程的，同步任務(wù)在調(diào)用棧中依次執(zhí)行，遇到異步任務(wù)（如setTimeout、Promise.then）會被放入任務(wù)隊列。任務(wù)隊列分為宏任務(wù)（macrotask，如setTimeout、setInterval、I/O、UI渲染）和微任務(wù)（microtask，如Promise.then、MutationObserver）。事件循環(huán)的執(zhí)行流程：（1）執(zhí)行調(diào)用棧中的同步任務(wù)；（2）執(zhí)行所有微任務(wù)隊列中的任務(wù)；（3）觸發(fā)UI渲染（如果有需要）；（4）從宏任務(wù)隊列中取出一個任務(wù)執(zhí)行，重復(fù)步驟（2）-（4）。例如，`setTimeout(()=>console.log(1),0)`是宏任務(wù)，`Promise.resolve().then(()=>console.log(2))`是微任務(wù)，輸出順序為2→1。7.原型鏈?zhǔn)鞘裁?？如何實現(xiàn)對象的繼承？原型鏈?zhǔn)荍S實現(xiàn)繼承的機制。每個對象（除null外）都有一個`__proto__`屬性指向其構(gòu)造函數(shù)的`prototype`對象，`prototype`對象又有自己的`__proto__`，最終指向`Ototype`，其`__proto__`為null，形成原型鏈。對象訪問屬性時，先查找自身，找不到則沿原型鏈向上查找。實現(xiàn)繼承的常見方式：（1）構(gòu)造函數(shù)繼承：子構(gòu)造函數(shù)中調(diào)用父構(gòu)造函數(shù)（`Parent.call(this)`），但無法繼承父原型方法；（2）原型鏈繼承：`Ctotype=newParent()`，但會共享父實例屬性；（3）組合繼承（最常用）：結(jié)合構(gòu)造函數(shù)繼承和原型鏈繼承；（4）ES6類繼承：`classChildextendsParent{...}`，底層基于原型鏈。8.閉包的定義、作用及常見應(yīng)用場景閉包是函數(shù)與其詞法環(huán)境的組合，使得函數(shù)能訪問外層函數(shù)的變量，即使外層函數(shù)已執(zhí)行完畢。作用：保護私有變量（避免全局污染）、延長變量生命周期。常見場景：（1）封裝私有方法（如模塊模式）；（2）事件處理函數(shù)中保留當(dāng)前狀態(tài)（如循環(huán)中綁定事件）；（3）函數(shù)柯里化（返回一個接收剩余參數(shù)的函數(shù)）；（4）防抖/節(jié)流函數(shù)（通過閉包保存定時器或時間戳）。示例：```javascriptfunctioncounter(){letcount=0;returnfunction(){count++;returncount;};}constadd=counter();add();//1add();//2（閉包保留了count的值）```9.如何實現(xiàn)數(shù)組去重？至少寫出3種方法（1）Set去重：`[...newSet(arr)]`（簡單高效，無法處理對象去重）；（2）filter+indexOf：`arr.filter((item,index)=>arr.indexOf(item)===index)`（兼容性好，時間復(fù)雜度O(n2)）；（3）reduce+對象記錄：```javascriptarr.reduce((acc,cur)=>{if(!acc.has(cur)){//若用對象需處理類型，如typeofcur+curacc.push(cur);}returnacc;},[]);```（4）Map去重（可處理對象）：```javascriptconstmap=newMap();arr.forEach(item=>map.set(JSON.stringify(item),item));[...map.values()];```10.簡述Promise的狀態(tài)和常用方法Promise有三種狀態(tài)：pending（等待）、fulfilled（成功）、rejected（失?。?，狀態(tài)一旦改變不可逆。常用方法：（1）`then(onFulfilled,onRejected)`：返回新Promise，處理成功/失?。唬?）`catch(onRejected)`：等價于`then(undefined,onRejected)`；（3）`finally(onFinally)`：無論成功/失敗都會執(zhí)行；（4）`Promise.all(iterable)`：所有Promise成功則返回成功數(shù)組，任一失敗則立即拒絕；（5）`Promise.race(iterable)`：返回第一個完成（成功或失?。┑腜romise；（6）`Promise.resolve(value)`：返回一個已解決的Promise；（7）`Promise.reject(reason)`：返回一個已拒絕的Promise。11.Vue中data為什么是函數(shù)而不是對象？Vue組件的data必須是函數(shù)，因為組件可能被多次實例化，若data是對象，所有實例會共享同一個對象引用，導(dǎo)致狀態(tài)污染。而函數(shù)返回的對象是獨立的，每個實例的data都是新對象，避免了數(shù)據(jù)共享問題。根實例（newVue）的data可以是對象，因為根實例只創(chuàng)建一次，不存在多個實例共享的問題。12.React中useState的更新是同步還是異步？為什么？useState的更新在合成事件和生命周期函數(shù)中是異步的，在原生事件（如setTimeout、Promise.then）中是同步的。異步更新是為了優(yōu)化性能，將多個狀態(tài)更新合并為一次渲染（批處理）。例如，在點擊事件中連續(xù)調(diào)用`setCount(count+1)`兩次，React會合并為一次更新（count只增加1）；而在setTimeout中調(diào)用兩次，會觸發(fā)兩次渲染（count增加2）。13.如何解決跨域問題？至少寫出4種方法（1）CORS（跨域資源共享）：服務(wù)端設(shè)置響應(yīng)頭`Access-Control-Allow-Origin:`（或指定域名），`Access-Control-Allow-Methods:GET,POST`等；（2）JSONP：利用`<script>`標(biāo)簽無跨域限制，服務(wù)端返回包裹在回調(diào)函數(shù)中的數(shù)據(jù)（如`callback({data:1})`）；（3）代理服務(wù)器：前端請求本地服務(wù)器（如webpack-dev-server的proxy配置），本地服務(wù)器轉(zhuǎn)發(fā)請求到目標(biāo)地址；（4）postMessage：用于跨窗口通信（如iframe與父窗口），通過`window.postMessage(data,targetOrigin)`和`onmessage`事件監(jiān)聽；（5）WebSocket：基于TCP的全雙工通信協(xié)議，無跨域限制。14.瀏覽器的渲染流程是怎樣的？如何優(yōu)化？渲染流程：（1）解析HTML提供DOM樹；（2）解析CSS提供CSSOM樹；（3）合并DOM和CSSOM提供渲染樹（RenderTree，排除不可見元素如display:none）；（4）布局（Layout）：計算渲染樹中各元素的位置和尺寸；（5）繪制（Paint）：將布局后的元素繪制到屏幕（填充顏色、陰影等）；（6）合成（Composite）：將各層繪制結(jié)果合并為最終圖像。優(yōu)化方向：（1）減少阻塞渲染的資源：CSS用`media`屬性指定媒體類型（如`media="print"`）避免阻塞，JS用`async`或`defer`異步加載；（2）減少DOM節(jié)點數(shù)量和深度；（3）使用CSS的transform/opacity屬性（觸發(fā)合成層，避免回流/重繪）；（4）緩存頻繁變化的元素（如使用`will-change:transform`提示瀏覽器優(yōu)化）。15.Webpack的loader和plugin有什么區(qū)別？常見loader和plugin舉例loader用于處理非JS文件（如將CSS、圖片、TS轉(zhuǎn)換為JS模塊），本質(zhì)是一個函數(shù)，接收源文件內(nèi)容并返回轉(zhuǎn)換后的內(nèi)容。常見loader：`babel-loader`：將ES6+代碼轉(zhuǎn)換為ES5；`css-loader`：解析CSS中的`@import`和`url()`；`style-loader`：將CSS插入到DOM的`<style>`標(biāo)簽；`file-loader`：處理文件路徑，輸出到指定目錄；`url-loader`：類似file-loader，小文件轉(zhuǎn)為base64。plugin用于擴展Webpack功能，作用于整個構(gòu)建過程（如打包優(yōu)化、資源管理）。常見plugin：`HtmlWebpackPlugin`：提供HTML文件并自動注入打包后的JS/CSS；`CleanWebpackPlugin`：打包前清空輸出目錄；`MiniCssExtractPlugin`：將CSS提取為獨立文件（替代style-loader）；`UglifyJsPlugin`：壓縮JS代碼；`DefinePlugin`：定義環(huán)境變量。16.解釋JavaScript的this指向規(guī)則this的指向在函數(shù)調(diào)用時確定，規(guī)則如下：（1）默認(rèn)綁定：非嚴(yán)格模式下指向全局對象（瀏覽器為window），嚴(yán)格模式下為undefined；（2）隱式綁定：函數(shù)作為對象方法調(diào)用時，this指向該對象（如`obj.fn()`中this是obj）；（3）顯式綁定：通過`call`/`apply`/`bind`指定this（`fn.call(obj,arg)`中this是obj）；（4）new綁定：通過new調(diào)用構(gòu)造函數(shù)時，this指向新創(chuàng)建的實例；（5）箭頭函數(shù)：沒有自己的this，繼承外層作用域的this（定義時確定，非調(diào)用時）。示例：```javascriptconstobj={name:'obj',fn:function(){console.log();//隱式綁定，輸出'obj'}};constfn=obj.fn;fn();//默認(rèn)綁定，非嚴(yán)格模式輸出undefined（瀏覽器為）```17.如何實現(xiàn)對象的深拷貝？深拷貝需遞歸復(fù)制所有層級的屬性，處理引用類型（對象、數(shù)組、函數(shù)等）。簡單實現(xiàn)（未處理函數(shù)、Date等特殊對象）：```javascriptfunctiondeepClone(obj,hash=newWeakMap()){if(obj===null||typeofobj!=='object')returnobj;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(hash.has(obj))returnhash.get(obj);//處理循環(huán)引用constclone=Array.isArray(obj)?[]:{};hash.set(obj,clone);for(constkeyinobj){if(obj.hasOwnProperty(key)){clone[key]=deepClone(obj[key],hash);}}returnclone;}```也可使用`JSON.parse(JSON.stringify(obj))`，但無法處理函數(shù)、undefined、Symbol、循環(huán)引用等。18.Vue的響應(yīng)式原理是什么？Vue3為什么改用Proxy？Vue2通過`Object.defineProperty`監(jiān)聽對象屬性的`get`和`set`。初始化時遍歷對象所有屬性，為每個屬性添加`getter`（收集依賴）和`setter`（觸發(fā)更新）。但存在缺陷：無法檢測對象新增/刪除屬性（需用`Vue.set`/`this.$set`），無法檢測數(shù)組索引和長度的變化（重寫了數(shù)組的7個方法如push、splice）。Vue3改用Proxy，Proxy可以監(jiān)聽整個對象（包括新增/刪除屬性），支持?jǐn)?shù)組索引和長度修改，