2026年前端程序員面試題含答案一、選擇題（共5題，每題2分）考察方向：基礎(chǔ)知識、HTML/CSS/JavaScript核心概念1.下列哪個CSS選擇器優(yōu)先級最高？A.`id`選擇器B.`class`選擇器C.`tag`選擇器D.`attr`選擇器答案：A解析：`id`選擇器的優(yōu)先級最高（權(quán)重100），其次是`class`（10）、`tag`（1）、`attr`（屬性選擇器優(yōu)先級較低）。2.以下哪個JavaScript方法用于異步處理數(shù)據(jù)？A.`setTimeout`B.`setInterval`C.`Promise`D.`for...of`答案：C解析：`Promise`是JavaScript中處理異步的核心機(jī)制，`setTimeout`和`setInterval`是定時器，`for...of`是遍歷迭代器。3.CSS中`flex`布局的默認(rèn)對齊方式是？A.`flex-start`B.`center`C.`flex-end`D.`space-between`答案：A解析：`flex`布局默認(rèn)將子項沿主軸從起點對齊（`flex-start`），除非設(shè)置`justify-content`。4.React中，以下哪個鉤子用于在組件卸載時執(zhí)行清理操作？A.`useEffect`B.`useContext`C.`useCallback`D.`useMemo`+`useEffect`的返回函數(shù)答案：D解析：`useEffect`的返回函數(shù)會在組件卸載時調(diào)用，用于清理操作（如取消訂閱、清除定時器等）。5.以下哪個HTTP狀態(tài)碼表示“請求超時”？A.404B.500C.408D.302答案：C解析：404表示“未找到資源”，500表示“服務(wù)器內(nèi)部錯誤”，408表示“請求超時”，302表示“臨時重定向”。二、填空題（共5題，每題2分）考察方向：前端工程化、性能優(yōu)化、瀏覽器原理1.在Webpack中，用于打包CSS文件的加載器是__________。答案：css-loader解析：`css-loader`解析CSS中的`@import`和`url()`，`style-loader`則將其注入DOM。2.瀏覽器緩存HTTP請求的默認(rèn)有效期由響應(yīng)頭中的__________字段控制。答案：Cache-Control解析：`Cache-Control`決定資源是否被緩存及緩存時長，`Expires`已不推薦使用。3.React中的`key`屬性主要用于__________，避免重新渲染性能問題。答案：列表組件的優(yōu)化解析：`key`幫助React識別組件變化，提高渲染效率，通常綁定列表項的`id`或唯一標(biāo)識。4.CSS中`calc()`函數(shù)用于__________，支持?jǐn)?shù)學(xué)運算。答案：動態(tài)計算長度值解析：如`width:calc(100%-20px)`，可用于減法、乘法等運算。5.Webpack中，用于代碼壓縮和混淆的工具是__________。答案：TerserPlugin解析：`TerserPlugin`是Webpack默認(rèn)的JS壓縮插件，比`UglifyJS`更高效。三、簡答題（共5題，每題4分）考察方向：實際工程問題、代碼實現(xiàn)、設(shè)計思想1.簡述前端性能優(yōu)化的常見方法（至少3種）。答案：-資源壓縮：減少文件體積（如JS/CSS壓縮、圖片Base64化）。-懶加載：延遲加載非首屏資源（如`IntersectionObserver`實現(xiàn)圖片懶加載）。-CDN加速：將靜態(tài)資源部署到CDN，減少請求延遲。-緩存策略：利用HTTP緩存（`Cache-Control`）或本地存儲（`localStorage`）。-代碼分割：Webpack按需加載（`SplitChunksPlugin`）。2.解釋React中的虛擬DOM是什么，及其優(yōu)勢。答案：-虛擬DOM：是React在內(nèi)存中構(gòu)建的DOM樹副本，實際DOM操作前先在虛擬DOM中模擬更新。-優(yōu)勢：-減少直接操作DOM的性能開銷。-避免不必要的DOM重繪（React通過差異比較減少更新）。-提高跨平臺開發(fā)能力（如ReactNative使用虛擬DOM渲染原生界面）。3.如何實現(xiàn)一個簡單的防抖（Debounce）函數(shù)？答案：javascriptfunctiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);timer=setTimeout(()=>fn.apply(this,args),delay);};}解析：在設(shè)定延遲內(nèi)多次觸發(fā)只會執(zhí)行最后一次，適用于搜索框輸入、窗口縮放等場景。4.CSSGrid布局和Flexbox的區(qū)別是什么？答案：-Flexbox：一維布局（行或列），適合組件內(nèi)部對齊。-Grid：二維布局（行+列），適合整體頁面布局。-使用場景：Flexbox用于行/列容器，Grid用于復(fù)雜網(wǎng)格結(jié)構(gòu)。5.前端如何處理跨域問題？答案：-CORS：服務(wù)器返回`Access-Control-Allow-Origin`頭允許跨域。-JSONP：通過`<script>`標(biāo)簽請求，僅支持GET請求。-代理：后端API代理（如Nginx反向代理）。-WebSocket：無同源策略限制，適用于實時通信。四、編程題（共3題，每題10分）考察方向：代碼實現(xiàn)、算法、工程實踐1.實現(xiàn)一個簡單的`Atotype.map`函數(shù)（不使用內(nèi)置方法）。答案：javascriptAtotype.myMap=function(fn){constresult=[];for(leti=0;i<this.length;i++){result.push(fn(this[i],i,this));}returnresult;};解析：遍歷數(shù)組，對每個元素執(zhí)行`fn`，將結(jié)果存入新數(shù)組。2.編寫一個函數(shù)，檢查字符串是否為回文（忽略大小寫和空格）。答案：javascriptfunctionisPalindrome(str){constcleanStr=str.toLowerCase().replace(/\s+/g,'');constlen=cleanStr.length;for(leti=0;i<Math.floor(len/2);i++){if(cleanStr[i]!==cleanStr[len-1-i])returnfalse;}returntrue;}解析：清理字符串后，從首尾向中間比較字符是否對稱。3.用ReactHooks實現(xiàn)一個計數(shù)器組件（支持手動增減和定時自增）。答案：jsxfunctionCounter(){const[count,setCount]=useState(0);const[timer,setTimer]=useState(null);useEffect(()=>{constid=setInterval(()=>setCount(c=>c+1),1000);setTimer(id);return()=>clearInterval(id);},[]);return(<div><span>{count}</span><buttononClick={()=>setCount(c=>c+1)}>Increment</button><buttononClick={()=>setCount(c=>c-1)}>Decrement</button><buttononClick={()=>clearInterval(timer)}>StopTimer</button></div>);}解析：使用`useState`管理計數(shù)，`useEffect`創(chuàng)建定時器，支持手動操作和自動增減。五、開放題（共2題，每題15分）考察方向：架構(gòu)設(shè)計、團(tuán)隊協(xié)作、問題解決1.如果你負(fù)責(zé)優(yōu)化一個訪問量百萬級別的單頁應(yīng)用（SPA），你會從哪些方面入手？答案：-代碼分割：Webpack按路由或組件拆分JS/CSS（`React.lazy`、`Suspense`）。-骨架屏+懶加載：提升首屏加載感知速度（`IntersectionObserver`加載圖片/組件）。-預(yù)加載關(guān)鍵資源：使用`<linkrel="preload">`加載首屏必要組件。-服務(wù)端渲染（SSR）：如Next.js，提升首屏渲染速度和SEO。-性能監(jiān)控：搭建Lighthouse/Apm工具，定位瓶頸。2.描述一次你解決前端兼容性問題的經(jīng)歷（包括問題、原因及解決方案）。答案：-問題：在移動端H5頁面，部分瀏覽器不支持`flex`的`align-items:center`。-原因：部分舊版iOS/Android瀏覽器CSS解析差異。-解決方案：-