2026年前端工程師面試題及JavaScript進(jìn)階技巧含答案一、HTML與CSS基礎(chǔ)（共5題，每題2分）1.請解釋HTML5中的`<video>`和`<audio>`標(biāo)簽的常用屬性及其作用。答案：`<video>`和`<audio>`是HTML5中的多媒體標(biāo)簽，常用屬性如下：-`src`：指定媒體文件的路徑。-`controls`：顯示播放控件（播放、暫停、音量等）。-`autoplay`：頁面加載后自動播放。-`loop`：循環(huán)播放。-`muted`：靜音播放。-`poster`：視頻加載前顯示的圖片。-`preload`：設(shè)置預(yù)加載策略（`auto`、`metadata`、`none`）。解析：這些屬性是前端開發(fā)中常用的多媒體控制手段，需熟悉其作用以優(yōu)化用戶體驗(yàn)。2.如何實(shí)現(xiàn)一個水平垂直居中的布局，要求兼容IE10及以上瀏覽器？答案：方法一：使用Flexbox（兼容IE10+）：html<divclass="container"><divclass="content">居中內(nèi)容</div></div><style>.container{display:flex;align-items:center;/垂直居中/justify-content:center;/水平居中/height:100vh;}</style>方法二：使用傳統(tǒng)定位（兼容IE10+）：html<divclass="container"><divclass="content">居中內(nèi)容</div></div><style>.container{position:relative;height:100vh;}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</style>解析：Flexbox更簡潔，但傳統(tǒng)定位兼容性更廣。需根據(jù)項(xiàng)目需求選擇。3.CSS3動畫的`transition`和`animation`有什么區(qū)別？答案：-`transition`：用于簡單的狀態(tài)變化（如hover效果），支持`trigger-event`觸發(fā)。-`animation`：支持多個關(guān)鍵幀（@keyframes），可獨(dú)立觸發(fā)，更復(fù)雜。示例：css/transition/.element:hover{transition:all0.3sease;}/animation/@keyframesrotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.element{animation:rotate2sinfinite;}解析：`transition`適合簡單效果，`animation`適合復(fù)雜序列動畫。4.CSS中的`box-sizing`屬性有哪些值？默認(rèn)值是什么？答案：-`content-box`（默認(rèn)）：寬度僅包含內(nèi)容。-`border-box`：寬度包含內(nèi)容、邊框、內(nèi)邊距。示例：css.box-sizing:border-box;/width=content+border+padding/解析：`border-box`在響應(yīng)式設(shè)計(jì)中更常用，避免寬度計(jì)算誤差。5.如何實(shí)現(xiàn)一個兩欄布局，左側(cè)固定寬度，右側(cè)自適應(yīng)？答案：方法一：傳統(tǒng)定位：html<divclass="layout"><divclass="sidebar">固定寬度</div><divclass="content">自適應(yīng)</div></div><style>.sidebar{width:200px;float:left;}.content{margin-left:200px;}</style>方法二：Flexbox：css.layout{display:flex;}.sidebar{width:200px;}.content{flex-grow:1;}解析：Flexbox更現(xiàn)代，傳統(tǒng)方法兼容性更廣。二、JavaScript基礎(chǔ)（共8題，每題3分）6.解釋JavaScript中的`undefined`和`null`的區(qū)別。答案：-`undefined`：未定義的變量或缺失的屬性值。-`null`：顯式清空變量或表示“空值”。示例：javascriptleta;//undefinedletb=null;//顯式空值解析：`undefined`是JavaScript的原始類型，`null`是對象類型，用于區(qū)分“未賦值”和“清空值”。7.`let`和`const`的區(qū)別是什么？答案：-`let`：塊級作用域，可重新賦值。-`const`：塊級作用域，不可重新賦值，但對象屬性可修改。示例：javascriptletx=1;x=2;//可consty=1;y=2;//報(bào)錯constobj={a:1};obj.a=2;//可解析：`const`用于聲明不可變變量，提高代碼安全性。8.`==`和`===`的區(qū)別是什么？答案：-`==`：自動類型轉(zhuǎn)換后比較。-`===`：嚴(yán)格比較（值和類型都相同）。示例：javascript"0"==0;//true"0"===0;//false解析：建議使用`===`避免隱式類型轉(zhuǎn)換錯誤。9.解釋JavaScript中的閉包（Closure）及其應(yīng)用場景。答案：閉包是函數(shù)及其詞法環(huán)境的組合，可訪問外部作用域變量。應(yīng)用場景：-防止全局變量污染。-實(shí)現(xiàn)私有變量。示例：javascriptfunctioncreateCounter(){letcount=0;returnfunction(){count++;console.log(count);};}constcounter=createCounter();counter();//1counter();//2解析：閉包常用于模塊化開發(fā)。10.`setTimeout`和`setInterval`的區(qū)別是什么？如何避免`setInterval`的潛在問題？答案：-`setTimeout`：執(zhí)行一次。-`setInterval`：循環(huán)執(zhí)行。問題：`setInterval`在函數(shù)執(zhí)行時間過長時可能導(dǎo)致延遲。解決方案：javascriptsetInterval(()=>{//長時間操作},1000);改為：javascriptfunctionlongTask(){//執(zhí)行操作}setInterval(longTask,1000);解析：避免直接在`setInterval`中執(zhí)行復(fù)雜邏輯。11.解釋JavaScript中的原型鏈（PrototypeChain）。答案：對象通過`__proto__`或`Object.getPrototypeOf()`訪問原型，最終指向`Ototype`。示例：javascriptconstobj={};console.log(obj.__proto__===Ototype);//true解析：原型鏈?zhǔn)荍avaScript繼承的基礎(chǔ)。12.`JSON.stringify`和`JSON.parse`的作用是什么？答案：-`JSON.stringify(obj)`：對象轉(zhuǎn)JSON字符串。-`JSON.parse(str)`：JSON字符串轉(zhuǎn)對象。示例：javascriptconstobj={a:1};conststr=JSON.stringify(obj);//'{"a":1}'constparsed=JSON.parse(str);//{a:1}解析：用于前后端數(shù)據(jù)傳輸。13.如何判斷一個變量是否為數(shù)組？答案：方法一：`Array.isArray()`（推薦）。方法二：`instanceofArray`。方法三：`Ototype.toString.call(x)==='[objectArray]'`。示例：javascriptArray.isArray([]);//true解析：`Array.isArray()`是最可靠的方法。三、JavaScript進(jìn)階技巧（共7題，每題4分）14.解釋`async/await`的原理及其優(yōu)勢。答案：`async/await`是語法糖，基于Promise實(shí)現(xiàn)。優(yōu)勢：-代碼可讀性高，類似同步寫法。-錯誤處理用`try/catch`。示例：javascriptasyncfunctionfetchUser(){try{constres=awaitfetch('/user');returnawaitres.json();}catch(err){console.error(err);}}解析：簡化異步編程，但需注意Promise的執(zhí)行機(jī)制。15.如何實(shí)現(xiàn)一個防抖（Debounce）函數(shù)？答案：防抖指連續(xù)操作只在最后一次觸發(fā)后執(zhí)行。javascriptfunctiondebounce(fn,delay){lettimer;returnfunction(){clearTimeout(timer);timer=setTimeout(()=>{fn.apply(this,arguments);},delay);};}解析：適用于搜索框輸入、窗口調(diào)整等場景。16.解釋事件委托（EventDelegation）的原理及優(yōu)缺點(diǎn)。答案：原理：利用事件冒泡，在父元素上綁定事件，減少事件綁定數(shù)量。優(yōu)點(diǎn)：-減少內(nèi)存占用。-動態(tài)添加元素?zé)o需重新綁定。缺點(diǎn)：-事件處理邏輯較復(fù)雜。示例：javascriptdocument.getElementById('container').addEventListener('click',(e)=>{if(e.target.matches('.item')){console.log(e.target.textContent);}});解析：適用于動態(tài)列表或大量元素的場景。17.如何實(shí)現(xiàn)一個深度克?。―eepClone）函數(shù)？答案：方法一：遞歸（需注意循環(huán)引用）：javascriptfunctiondeepClone(obj,hash=newWeakMap()){if(obj===null)returnnull;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(typeofobj!=='object')returnobj;if(hash.has(obj))returnhash.get(obj);constclone=newobj.constructor();hash.set(obj,clone);for(constkeyinobj){clone[key]=deepClone(obj[key],hash);}returnclone;}解析：需處理特殊對象（如Date、RegExp）和循環(huán)引用。18.解釋Promise的`all`、`race`方法及其應(yīng)用場景。答案：-`Promise.all(promises)`：所有Promise成功返回?cái)?shù)組，任一失敗即拒絕。-`Promise.race(promises)`：最快完成的Promise決定結(jié)果。示例：javascriptPromise.all([p1,p2]).then(res=>console.log(res));Promise.race([p1,p2]).then(res=>console.log(res));解析：`all`用于并行任務(wù)，`race`用于超時控制。19.如何實(shí)現(xiàn)一個柯里化（Currying）函數(shù)？答案：柯里化將多參數(shù)函數(shù)轉(zhuǎn)化為單參數(shù)函數(shù)鏈。javascriptfunctioncurry(fn){returnfunction(...args){if(args.length>=fn.length){returnfn.apply(this,args);}returnfunction(...moreArgs){returncurry(fn.bind(this,...args,...moreArgs));};};}示例：javascriptconstadd=curry((a,b,c)=>a+b+c);add(1)(2)(3);//6解析：提高函數(shù)的靈活性和復(fù)用性。四、前端框架與工程化（共5題，每題4分）20.Vue3的CompositionAPI相比OptionsAPI有什么優(yōu)勢？答案：-命名更清晰（如`setup`、`computed`）。-邏輯復(fù)用更方便（如`provide/inject`）。-代碼組織更靈活。解析：CompositionAPI更適合復(fù)雜組件。21.React中的`memo`和`useMemo`有什么區(qū)別？答案：-`React.memo`：高階組件，優(yōu)化函數(shù)組件的渲染。-`useMemo`：Hook，緩存計(jì)算結(jié)果。示例：javascriptReact.memo(Component);constmemoizedValue=useMemo(()=>computeExpensiveValue(a),[a]);解析：`memo`用于組件，`useMemo`用于計(jì)算緩存。22.Webpack的`CodeSplitting`如何實(shí)現(xiàn)？答案：方法一：`SplitChunksPlugin`。方法二：動態(tài)導(dǎo)入（`import()`）。示例：javascript//Webpackconfigmodule.exports={optimization:{splitChunks:{chunks:'all',},},};解析：`CodeSplitting`可優(yōu)化加載速度。23.如何優(yōu)化前端性能（LCP、FID、CLS）？答案：-LCP：優(yōu)化首屏加載（圖片懶加載、骨架屏）。-FID：減少交互延遲（`requestAnimationFrame`、`debounce`）。-CLS：避免布局抖動（固定定位、`transform`）。解析：需關(guān)注性能指標(biāo)，針對性優(yōu)化。24.前端監(jiān)控（Sentry、Bugsnag）的作用是什么？答案：-收集錯誤日志、性能數(shù)據(jù)。-提供告警和修復(fù)建議。-