2026年前端開發(fā)工程師技能考核試題一、單選題（共10題，每題2分，合計(jì)20分）1.在React中，以下哪個(gè)鉤子用于在組件卸載時(shí)執(zhí)行清理操作？A.`useEffect()`B.`useLayoutEffect()`C.`useCallback()`D.`useMemo()`2.以下哪個(gè)CSS布局方案最適合實(shí)現(xiàn)復(fù)雜的網(wǎng)格布局？A.FlexboxB.GridC.FloatD.Position3.在Vue3中，以下哪個(gè)指令用于動(dòng)態(tài)綁定樣式？A.`v-bind:style`B.`v-style`C.`v-bind:`style`D.`v-for-style`4.以下哪個(gè)HTTP狀態(tài)碼表示“請(qǐng)求超時(shí)”？A.408B.429C.504D.5035.在TypeScript中，以下哪個(gè)關(guān)鍵字用于聲明不可變數(shù)組？A.`const`B.`readonly`C.`final`D.`immutably`6.以下哪個(gè)前端框架支持服務(wù)器端渲染（SSR）？A.AngularB.SvelteC.Next.jsD.Vue.js7.在Webpack中，以下哪個(gè)插件用于壓縮CSS文件？A.`MiniCssExtractPlugin`B.`TerserPlugin`C.`OptimizeCSSAssetsPlugin`D.`CSSMinimizerPlugin`8.以下哪個(gè)API用于在瀏覽器中存儲(chǔ)離線數(shù)據(jù)？A.`localStorage`B.`sessionStorage`C.`indexedDB`D.`CacheStorage`9.在JavaScript中，以下哪個(gè)運(yùn)算符用于嚴(yán)格等于？A.`==`B.`===`C.`=`D.`!=`10.以下哪個(gè)庫(kù)用于前端性能監(jiān)控？A.`Lighthouse`B.`WebPageTest`C.`Sentry`D.`NewRelic`二、多選題（共5題，每題3分，合計(jì)15分）1.以下哪些技術(shù)可用于實(shí)現(xiàn)前端性能優(yōu)化？A.CodeSplittingB.LazyLoadingC.CachingD.MinificationE.WebWorkers2.以下哪些是CSS預(yù)處理器？A.SassB.LessC.StylusD.SCSSE.Bootstrap3.在React中，以下哪些生命周期鉤子已廢棄？A.`componentWillMount()`B.`componentWillUpdate()`C.`componentWillUnmount()`D.`componentDidMount()`E.`getSnapshotBeforeUpdate()`4.以下哪些是Web安全常見漏洞？A.XSSB.CSRFC.SQLInjectionD.CSRFE.DoS5.在Vue3中，以下哪些屬于響應(yīng)式系統(tǒng)的一部分？A.`ref`B.`reactive`C.`computed`D.`watch`E.`watchEffect`三、判斷題（共10題，每題1分，合計(jì)10分）1.Flexbox只能實(shí)現(xiàn)一維布局。2.Webpack是VueCLI的默認(rèn)構(gòu)建工具。3.TypeScript是JavaScript的超集，必須編譯后才能運(yùn)行。4.CSSGrid可以嵌套使用，但Flexbox不能。5.CORS是跨域資源共享的簡(jiǎn)稱。6.JWT是一種常用的身份驗(yàn)證機(jī)制。7.ReactHooks只能在函數(shù)組件中使用。8.WebP格式比JPEG更適合照片類圖片。9.Babel是用于將ES6+代碼轉(zhuǎn)換為瀏覽器兼容代碼的工具。10.`window.onclick`事件可以代替`document.onclick`。四、簡(jiǎn)答題（共5題，每題5分，合計(jì)25分）1.簡(jiǎn)述React中的`useContext`鉤子及其應(yīng)用場(chǎng)景。2.解釋CSS中的`box-sizing:border-box`是什么意思，并說明其作用。3.簡(jiǎn)述HTTP和HTTPS的區(qū)別，并說明HTTPS的優(yōu)勢(shì)。4.在Vue3中，`ref`和`reactive`有什么區(qū)別？分別適用于哪些場(chǎng)景？5.簡(jiǎn)述前端性能優(yōu)化的五個(gè)關(guān)鍵點(diǎn)。五、編程題（共3題，合計(jì)30分）1.（10分）編寫一個(gè)React函數(shù)組件，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表。要求：-支持添加待辦事項(xiàng)（輸入框+按鈕）。-支持刪除待辦事項(xiàng)（每個(gè)待辦事項(xiàng)右側(cè)有刪除按鈕）。-使用`useState`和`useEffect`鉤子管理狀態(tài)。2.（10分）編寫一個(gè)Vue3組件，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輪播圖。要求：-包含三張圖片，自動(dòng)輪播（間隔3秒）。-支持手動(dòng)切換（左右箭頭按鈕）。-使用`ref`和`watch`實(shí)現(xiàn)輪播邏輯。3.（10分）編寫一個(gè)JavaScript函數(shù)，實(shí)現(xiàn)以下功能：-接收一個(gè)字符串參數(shù)，返回該字符串中所有單詞的長(zhǎng)度。-例如，輸入`"Helloworld"`，返回`[5,5]`。-要求使用`reduce`方法實(shí)現(xiàn)。答案與解析一、單選題1.D.`useMemo()`解析：`useMemo`用于緩存計(jì)算結(jié)果，避免不必要的重新計(jì)算；`useEffect`用于副作用操作；`useLayoutEffect`在DOM變更后同步執(zhí)行；`useCallback`用于緩存函數(shù)。2.B.`Grid`解析：Grid布局適合復(fù)雜二維網(wǎng)格，F(xiàn)lexbox適合一維布局。3.A.`v-bind:style`解析：Vue中綁定樣式使用`v-bind:style`或簡(jiǎn)寫為`:`。4.C.504解析：504表示“網(wǎng)關(guān)超時(shí)”，408是請(qǐng)求超時(shí)，429是過多請(qǐng)求，503是服務(wù)不可用。5.B.`readonly`解析：TypeScript中使用`readonly`修飾符聲明不可變屬性。6.C.Next.js解析：Next.js基于React，支持SSR，Angular和Vue.js沒有原生SSR，Svelte編譯后性能更優(yōu)但無SSR。7.A.`MiniCssExtractPlugin`解析：用于提取CSS到單獨(dú)文件，其他插件用于壓縮或優(yōu)化。8.C.`indexedDB`解析：`localStorage`和`sessionStorage`是鍵值存儲(chǔ)，`indexedDB`是數(shù)據(jù)庫(kù)，`CacheStorage`用于PWA緩存。9.B.`===`解析：`==`是弱類型比較，`===`是嚴(yán)格比較。10.C.`Sentry`解析：Sentry是前端錯(cuò)誤監(jiān)控工具，Lighthouse是性能測(cè)試，WebPageTest是網(wǎng)絡(luò)性能測(cè)試，NewRelic是全棧監(jiān)控。二、多選題1.A,B,C,D,E解析：CodeSplitting、LazyLoading、Caching、Minification、WebWorkers都是性能優(yōu)化手段。2.A,B,C,D解析：Bootstrap是CSS框架，不是預(yù)處理器。3.A,B,E解析：`componentWillMount`、`componentWillUpdate`、`getSnapshotBeforeUpdate`已廢棄，`componentDidMount`和`componentWillUnmount`仍在使用。4.A,B,C,E解析：DoS是拒絕服務(wù)攻擊，不是漏洞類型。5.A,B,C,D,E解析：`ref`、`reactive`、`computed`、`watch`、`watchEffect`都是Vue3的響應(yīng)式系統(tǒng)。三、判斷題1.×解析：Flexbox可以實(shí)現(xiàn)一維和二維布局（嵌套）。2.√解析：VueCLI默認(rèn)使用Webpack。3.√解析：TypeScript需要編譯為JavaScript。4.×解析：Flexbox和Grid都可以嵌套使用。5.√解析：CORS是跨域資源共享。6.√解析：JWT常用于身份驗(yàn)證。7.√解析：Hooks只能在函數(shù)組件中使用。8.√解析：WebP支持透明背景且壓縮率更高。9.√解析：Babel用于轉(zhuǎn)譯ES6+代碼。10.×解析：`window.onclick`會(huì)觸發(fā)所有窗口事件，建議使用`document.onclick`。四、簡(jiǎn)答題1.`useContext`鉤子及其應(yīng)用場(chǎng)景答：`useContext`用于跨組件傳遞數(shù)據(jù)，避免多層嵌套。應(yīng)用場(chǎng)景：全局狀態(tài)管理（如用戶認(rèn)證、主題）、減少props傳遞層級(jí)。2.`box-sizing:border-box`的作用答：`border-box`表示元素的寬高包含padding和border，默認(rèn)是`content-box`（只包含內(nèi)容寬高）。使用`border-box`可以簡(jiǎn)化布局計(jì)算。3.HTTP與HTTPS的區(qū)別及優(yōu)勢(shì)答：HTTP是明文傳輸，HTTPS通過TLS加密傳輸。HTTPS優(yōu)勢(shì)：安全性更高、SEO友好、防止中間人攻擊。4.`ref`與`reactive`的區(qū)別答：`ref`用于單個(gè)值（如字符串、數(shù)字），`reactive`用于對(duì)象或數(shù)組。`ref`需要`.value`訪問，`reactive`直接訪問屬性。5.前端性能優(yōu)化五個(gè)關(guān)鍵點(diǎn)答：代碼壓縮（Minification）、懶加載（LazyLoading）、緩存（Caching）、減少重繪重排（使用`transform`替代`top`/`left`）、使用CDN。五、編程題1.React待辦事項(xiàng)列表jsxfunctionTodoList(){const[todos,setTodos]=useState([]);const[inputValue,setInputValue]=useState('');constaddTodo=()=>{if(inputValue.trim()){setTodos([...todos,inputValue]);setInputValue('');}};constdeleteTodo=(index)=>{constnewTodos=todos.filter((_,i)=>i!==index);setTodos(newTodos);};return(<div><inputtype="text"value={inputValue}onChange={(e)=>setInputValue(e.target.value)}/><buttononClick={addTodo}>添加</button><ul>{todos.map((todo,index)=>(<likey={index}>{todo}<buttononClick={()=>deleteTodo(index)}>刪除</button></li>))}</ul></div>);}2.Vue輪播圖vue<template><div><button@click="prev">上一張</button><divv-for="(img,index)inimages":key="index"><img:src="img"v-show="current===index"/></div><button@click="next">下一張</button></div></template><script>import{ref,watch}from'vue';exportdefault{setup(){constimages=ref(['img1.jpg','img2.jpg','img3.jpg']);constcurrent=ref(0);constinterval=ref(null);watch(current,(newVal)=>{if(interval.value)clearInterval(interval.value);interval.value=setInterval(()=>{current.value=(newVal+1)%images.value.length;},3000);});constnext=()=>{current.value=(current.value+1)%images.value.length;};constprev=()=>{current.value=(current.value-1+images.valu