2026年前端開發(fā)面試題及答案解析一、單選題（共5題，每題2分，共10分）1.以下哪個HTTP狀態(tài)碼表示請求成功且資源被正確處理？A.301B.304C.200D.4042.在React中，以下哪個鉤子用于在組件掛載后執(zhí)行副作用？A.`useState`B.`useEffect`C.`useContext`D.`useRef`3.以下哪個CSS選擇器優(yōu)先級最高？A.`#id`B.`.class`C.`element`D.`element>child`4.在Vue3中，以下哪個指令用于條件渲染元素？A.`v-if`B.`v-for`C.`v-bind`D.`v-on`5.以下哪個WebAPI用于在瀏覽器中存儲數(shù)據(jù)？A.`XMLHttpRequest`B.`FetchAPI`C.`localStorage`D.`WebSocket`二、多選題（共5題，每題3分，共15分）1.以下哪些屬于前端性能優(yōu)化的方法？A.代碼壓縮B.CDN加速C.緩存利用D.預(yù)加載資源E.頻繁使用`alert`2.以下哪些是JavaScript中的原始數(shù)據(jù)類型？A.`null`B.`undefined`C.`array`D.`boolean`E.`object`3.以下哪些是CSS布局模型？A.FlexboxB.GridC.FloatD.TableE.Inline4.以下哪些是React的生命周期方法？A.`componentDidMount`B.`render`C.`componentWillUnmount`D.`useState`E.`useEffect`5.以下哪些是Web安全常見漏洞？A.XSSB.CSRFC.SQL注入D.點擊劫持E.JSONP三、填空題（共5題，每題2分，共10分）1.CSS中，`position:fixed;`屬性用于實現(xiàn)_______定位。2.在JavaScript中，`===`運算符用于_______判斷。3.Vue中的`computed`屬性是基于_______的響應(yīng)式數(shù)據(jù)。4.HTTP請求方法中，`PUT`用于_______資源。5.CSS中，`box-sizing:border-box;`屬性將_______包含在內(nèi)。四、簡答題（共5題，每題4分，共20分）1.簡述HTTP和HTTPS的區(qū)別。2.解釋React中的虛擬DOM是什么，以及其優(yōu)點。3.描述CSS盒模型（BoxModel）的基本組成部分。4.說明Vue中的`props`和`data`有什么區(qū)別。5.解釋前端性能優(yōu)化的意義，并列出三種常見優(yōu)化方法。五、代碼題（共5題，每題6分，共30分）1.JavaScript代碼：實現(xiàn)一個函數(shù)`reverseStr`，將輸入的字符串反轉(zhuǎn)，并返回反轉(zhuǎn)后的結(jié)果。javascript//示例：reverseStr('hello')→'olleh'2.React代碼：創(chuàng)建一個React組件`Counter`，包含一個按鈕，點擊按鈕時計數(shù)器加1，并顯示當(dāng)前計數(shù)。3.CSS代碼：使用Flexbox布局，創(chuàng)建一個包含三個子元素的容器，子元素高度不同，但需保持容器垂直居中。4.Vue代碼：創(chuàng)建一個Vue組件，包含一個輸入框和一個按鈕。輸入框用于輸入文本，按鈕點擊時將文本顯示在頁面上。5.HTML+JavaScript代碼：創(chuàng)建一個簡單的表單，包含用戶名和密碼輸入框，以及一個提交按鈕。提交時，使用JavaScript驗證用戶名和密碼是否為空，若為空則提示錯誤信息。六、論述題（共1題，10分）解釋前端工程化的重要性，并列舉三個前端工程化工具及其作用。答案解析一、單選題1.C.200解析：HTTP狀態(tài)碼200表示請求成功，資源被正確處理。301：永久重定向；304：未修改；404：資源不存在。2.B.useEffect解析：`useEffect`用于在組件掛載后執(zhí)行副作用操作，如數(shù)據(jù)獲取、DOM操作等。`useState`：用于聲明響應(yīng)式狀態(tài)；`useContext`：用于獲取上下文值；`useRef`：用于引用DOM元素或存儲數(shù)據(jù)。3.A.#id解析：CSS選擇器優(yōu)先級從高到低為：`id>class>element>attribute>inlinestyle`。`#id`優(yōu)先級最高，其次是`.class`，然后是`element`，`element>child`是后代選擇器的特殊形式。4.A.v-if解析：`v-if`用于條件渲染元素，只有當(dāng)條件為`true`時才顯示元素。`v-for`：循環(huán)渲染列表；`v-bind`：綁定屬性；`v-on`：綁定事件。5.C.localStorage解析：`localStorage`用于在瀏覽器中存儲鍵值對數(shù)據(jù)，即使關(guān)閉瀏覽器數(shù)據(jù)也不會丟失。`XMLHttpRequest`：用于網(wǎng)絡(luò)請求；`FetchAPI`：現(xiàn)代網(wǎng)絡(luò)請求API；`WebSocket`：實時雙向通信；`localStorage`：本地存儲。二、多選題1.A.代碼壓縮B.CDN加速C.緩存利用D.預(yù)加載資源解析：-代碼壓縮：減少文件大小，提升加載速度。-CDN加速：通過分布式節(jié)點加速資源加載。-緩存利用：利用瀏覽器或服務(wù)端緩存減少請求次數(shù)。-預(yù)加載資源：提前加載關(guān)鍵資源，提升首屏加載速度。-頻繁使用`alert`：會阻塞用戶操作，降低用戶體驗。2.A.nullB.undefinedD.boolean解析：JavaScript原始數(shù)據(jù)類型包括：`null`、`undefined`、`boolean`、`number`、`string`、`symbol`、`bigint`。`array`和`object`是引用數(shù)據(jù)類型。3.A.FlexboxB.GridC.FloatD.Table解析：CSS布局模型包括：Flexbox、Grid、Float、Table、Inline。Inline布局是基本布局方式，不屬于獨立模型。4.A.componentDidMountB.renderC.componentWillUnmount解析：React經(jīng)典生命周期方法：-`componentDidMount`：組件掛載后調(diào)用。-`render`：組件渲染方法。-`componentWillUnmount`：組件卸載前調(diào)用。`useState`和`useEffect`是鉤子函數(shù)，不屬于生命周期方法。5.A.XSSB.CSRFC.點擊劫持解析：前端常見安全漏洞：-XSS（跨站腳本攻擊）：惡意腳本注入。-CSRF（跨站請求偽造）：欺騙用戶執(zhí)行非預(yù)期操作。-點擊劫持：誘導(dǎo)用戶點擊隱藏的惡意鏈接。SQL注入是后端常見漏洞；JSONP是舊時代跨域方案，現(xiàn)代多用CORS。三、填空題1.絕對解析：`position:fixed;`使元素相對于瀏覽器窗口固定，滾動頁面時不移動。2.嚴(yán)格類型和值解析：`===`運算符進(jìn)行嚴(yán)格比較，即類型和值都相同。`==`運算符會進(jìn)行類型轉(zhuǎn)換。3.依賴解析：`computed`屬性是基于依賴的響應(yīng)式數(shù)據(jù)，任何依賴的值變化都會重新計算。4.更新或替換解析：`PUT`方法用于更新或替換指定URL的資源。`GET`：獲取資源；`POST`：創(chuàng)建資源。5.邊框和內(nèi)邊距解析：`box-sizing:border-box;`將邊框和內(nèi)邊距包含在寬度和高度內(nèi)，避免額外計算。四、簡答題1.HTTP和HTTPS的區(qū)別：-HTTP：明文傳輸，數(shù)據(jù)易被竊取，不安全。-HTTPS：加密傳輸，使用SSL/TLS協(xié)議，更安全，但需證書和少量性能損耗。-HTTPS能防止中間人攻擊，適用于涉及登錄、支付等敏感操作的場景。2.虛擬DOM是什么及其優(yōu)點：-虛擬DOM是React的核心概念，是一個輕量級的DOM樹副本，用于在內(nèi)存中模擬DOM操作。-優(yōu)點：-減少真實DOM操作次數(shù)，提升性能。-組件化開發(fā)，代碼可維護(hù)性高。-跨平臺支持（如ReactNative）。3.CSS盒模型：-內(nèi)容（Content）：元素的實際內(nèi)容區(qū)域。-內(nèi)邊距（Padding）：內(nèi)容邊緣到邊框的空白區(qū)域。-邊框（Border）：圍繞內(nèi)邊距的邊框。-外邊距（Margin）：邊框外部的空白區(qū)域。-標(biāo)準(zhǔn)模型：寬高僅包含內(nèi)容；`box-sizing:border-box`模型包含邊框和內(nèi)邊距。4.`props`和`data`的區(qū)別：-`props`：組件間傳遞數(shù)據(jù)，從父組件到子組件，不可修改。-`data`：組件內(nèi)部狀態(tài)，可修改，用于渲染。-`props`是輸入，`data`是輸出。5.前端性能優(yōu)化的意義及方法：-意義：提升用戶體驗、降低服務(wù)器壓力、提高SEO排名。-方法：-代碼壓縮和合并（如Webpack）。-CDN加速靜態(tài)資源。-緩存利用（瀏覽器緩存、服務(wù)端緩存）。五、代碼題1.JavaScript代碼：javascriptfunctionreverseStr(str){returnstr.split('').reverse().join('');}//示例：reverseStr('hello')→'olleh'2.React代碼：jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><p>{count}</p><buttononClick={()=>setCount(count+1)}>Add</button></div>);}3.CSS代碼：css.container{display:flex;justify-content:center;align-items:center;height:100vh;}.child{margin:10px;height:50px;background-color:lightblue;}4.Vue代碼：vue<template><div><inputv-model="inputText"placeholder="Entertext"><button@click="displayText">Display</button><p>{{display}}</p></div></template><script>exportdefault{data(){return{inputText:'',display:''};},methods:{displayText(){this.display=this.inputText;}}};</script>5.HTML+JavaScript代碼：html<formid="form"><inputtype="text"id="username"placeholder="Username"><inputtype="password"id="password"placeholder="Password"><buttontype="submit">Submit</button><pid="error"style="color:red;"></p></form><script>document.getElementById('form').addEventListener('submit',function(e){e.preventDefault();constusername=document.getElementById('username').value;constpassword=document.getElementById('password').value;if(!username||!password){document.getElementById('error').textContent='Usernameandpasswordcannotbeempty';}else{document.getElementById('error').textContent='';//處理表單提交邏輯}});</script>六、論述題前端工程化的重要性及工具：前端工程化是指將前端開發(fā)流程規(guī)范化、自動化，提升開發(fā)效率和代碼質(zhì)量。其重要性包括：1.提升開發(fā)效率：通過自動化工具（如Webpac