2025年web補(bǔ)充代碼考試題及答案一、單項(xiàng)選擇題（每題4分，共40分）1.以下HTML5新增的語(yǔ)義化標(biāo)簽中，用于表示頁(yè)面中獨(dú)立的、完整的內(nèi)容區(qū)域的是？A.`<nav>`B.`<aside>`C.`<article>`D.`<section>`答案：C2.關(guān)于CSS選擇器的優(yōu)先級(jí)，以下排序正確的是？A.內(nèi)聯(lián)樣式>ID選擇器>類選擇器>元素選擇器B.ID選擇器>內(nèi)聯(lián)樣式>類選擇器>元素選擇器C.類選擇器>ID選擇器>內(nèi)聯(lián)樣式>元素選擇器D.元素選擇器>類選擇器>ID選擇器>內(nèi)聯(lián)樣式答案：A3.以下JavaScript代碼的輸出結(jié)果是？```javascriptconsole.log(1);setTimeout(()=>console.log(2),0);Promise.resolve().then(()=>console.log(3));console.log(4);```A.1432B.1342C.1423D.1234答案：A4.關(guān)于ES6中`let`和`var`的區(qū)別，以下描述錯(cuò)誤的是？A.`let`聲明的變量具有塊級(jí)作用域，`var`是函數(shù)作用域B.`let`存在暫時(shí)性死區(qū)，`var`會(huì)變量提升C.`let`在同一作用域內(nèi)不能重復(fù)聲明，`var`可以D.`let`聲明的變量會(huì)掛載到`window`對(duì)象上，`var`不會(huì)答案：D5.以下哪種方式不能解決跨域問題？A.CORS（跨域資源共享）B.JSONP（JSONwithPadding）C.服務(wù)端反向代理D.前端直接修改`document.domain`答案：D（注：`document.domain`僅適用于主域相同的子域，且存在安全限制，并非通用解決方案）6.響應(yīng)式設(shè)計(jì)中，媒體查詢`@media(max-width:768px)`的作用是？A.當(dāng)視口寬度大于768px時(shí)應(yīng)用樣式B.當(dāng)視口寬度小于等于768px時(shí)應(yīng)用樣式C.當(dāng)視口高度小于768px時(shí)應(yīng)用樣式D.當(dāng)設(shè)備像素比為2時(shí)應(yīng)用樣式答案：B7.以下哪項(xiàng)是防范XSS攻擊的有效措施？A.對(duì)用戶輸入的HTML內(nèi)容進(jìn)行轉(zhuǎn)義（如將`<`轉(zhuǎn)為`<`）B.不使用`innerHTML`動(dòng)態(tài)插入內(nèi)容，改用`textContent`C.設(shè)置HTTP頭`Content-Security-Policy`限制資源來(lái)源D.以上都是答案：D8.HTTP/2相比HTTP/1.1的核心改進(jìn)不包括？A.二進(jìn)制分幀傳輸B.多路復(fù)用（同一連接處理多個(gè)請(qǐng)求）C.頭部壓縮（HPACK算法）D.支持`GET`和`POST`以外的請(qǐng)求方法答案：D（HTTP/1.1已支持多種方法）9.Vue3組件中，使用組合式API時(shí)，`onMounted`生命周期鉤子的執(zhí)行時(shí)機(jī)是？A.組件實(shí)例創(chuàng)建前B.組件模板編譯完成后、DOM掛載前C.組件DOM節(jié)點(diǎn)首次渲染到頁(yè)面后D.組件卸載前答案：C10.Webpack配置中，`module.rules`里使用`file-loader`的主要目的是？A.處理CSS文件中的`@import`和`url()`B.將JavaScript模塊打包為瀏覽器可識(shí)別的代碼C.對(duì)圖片、字體等靜態(tài)資源進(jìn)行路徑處理和輸出D.壓縮HTML文件答案：C二、填空題（每題4分，共20分）1.CSS中聲明自定義屬性（變量）的語(yǔ)法是`--屬性名:值;`，例如聲明主色調(diào)應(yīng)寫作__________。答案：`--main-color:ff0000;`（示例值不唯一）2.JavaScript中，`Array`對(duì)象的`__________`方法可以合并多個(gè)數(shù)組并返回新數(shù)組，原數(shù)組不受影響。答案：`concat()`3.正則表達(dá)式`/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/`的作用是匹配__________格式。答案：電子郵件（郵箱）4.HTTP狀態(tài)碼`403`表示__________，`503`表示__________。答案：禁止訪問（權(quán)限不足）；服務(wù)不可用（服務(wù)器臨時(shí)過載或維護(hù)）5.React函數(shù)組件中，使用`useState`聲明狀態(tài)的語(yǔ)法是：`const[state,setState]=useState(__________);`。答案：初始值（或`initialValue`）三、編程題（每題20分，共60分）1.請(qǐng)使用HTML、CSS和原生JavaScript實(shí)現(xiàn)一個(gè)圖片輪播組件，要求：包含3張以上圖片，自動(dòng)切換（間隔3秒）；支持左右箭頭點(diǎn)擊切換；鼠標(biāo)懸停時(shí)暫停自動(dòng)切換，移出后恢復(fù)；響應(yīng)式布局（圖片寬度隨容器自適應(yīng)）。參考代碼及關(guān)鍵注釋：```html<!-HTML結(jié)構(gòu)--><divclass="slider-container"><divclass="slider-wrapper"><imgsrc="img1.jpg"alt="圖1"class="slider-img"><imgsrc="img2.jpg"alt="圖2"class="slider-img"><imgsrc="img3.jpg"alt="圖3"class="slider-img"></div><buttonclass="prev-btn">←</button><buttonclass="next-btn">→</button></div><style>.slider-container{position:relative;max-width:1200px;/最大寬度/margin:0auto;overflow:hidden;}.slider-wrapper{display:flex;transition:transform0.5sease;}.slider-img{width:100%;/響應(yīng)式：圖片寬度占滿容器/height:auto;flex-shrink:0;/防止圖片被壓縮/}.prev-btn,.next-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;padding:10px15px;cursor:pointer;}.prev-btn{left:10px;}.next-btn{right:10px;}</style><script>constsliderWrapper=document.querySelector('.slider-wrapper');constimgs=document.querySelectorAll('.slider-img');constprevBtn=document.querySelector('.prev-btn');constnextBtn=document.querySelector('.next-btn');letcurrentIndex=0;letautoTimer=null;//自動(dòng)切換函數(shù)functionautoSwitch(){currentIndex=(currentIndex+1)%imgs.length;updateSlider();}//更新輪播位置functionupdateSlider(){sliderWrapper.style.transform=`translateX(-${currentIndex100}%)`;}//手動(dòng)切換：上一張prevBtn.addEventListener('click',()=>{currentIndex=(currentIndex1+imgs.length)%imgs.length;updateSlider();});//手動(dòng)切換：下一張nextBtn.addEventListener('click',()=>{currentIndex=(currentIndex+1)%imgs.length;updateSlider();});//鼠標(biāo)懸停暫停sliderContainer.addEventListener('mouseenter',()=>{clearInterval(autoTimer);});//鼠標(biāo)移出恢復(fù)sliderContainer.addEventListener('mouseleave',()=>{autoTimer=setInterval(autoSwitch,3000);});//初始化自動(dòng)切換autoTimer=setInterval(autoSwitch,3000);</script>```2.使用Vue3組合式API（`<scriptsetup>`語(yǔ)法）實(shí)現(xiàn)一個(gè)待辦事項(xiàng)列表組件，要求：包含輸入框和“添加”按鈕，輸入內(nèi)容非空時(shí)可添加；列表項(xiàng)顯示待辦內(nèi)容、完成狀態(tài)（勾選框）；支持點(diǎn)擊刪除按鈕移除待辦；使用`localStorage`持久化存儲(chǔ)待辦數(shù)據(jù)（頁(yè)面刷新后數(shù)據(jù)保留）。參考代碼及核心邏輯：```vue<template><divclass="todo-list"><divclass="input-group"><inputv-model="newTodo"placeholder="輸入待辦事項(xiàng)"@keyup.enter="addTodo"><button@click="addTodo":disabled="!newTodo.trim()">添加</button></div><ulv-if="todos.length"><liv-for="(todo,index)intodos":key="index"class="todo-item"><inputtype="checkbox"v-model="todo.done"@change="saveToLocalStorage"><span:class="{'done-text':todo.done}">{{todo.text}}</span><button@click="deleteTodo(index)">刪除</button></li></ul><pv-else>暫無(wú)待辦事項(xiàng)</p></div></template><scriptsetup>import{ref,onMounted}from'vue';//從localStorage讀取初始數(shù)據(jù)constloadFromLocalStorage=()=>{constdata=localStorage.getItem('todos');returndata?JSON.parse(data):[];};//初始化待辦列表和輸入內(nèi)容consttodos=ref(loadFromLocalStorage());constnewTodo=ref('');//添加待辦constaddTodo=()=>{consttext=newTodo.value.trim();if(!text)return;todos.value.push({text,done:false});newTodo.value='';saveToLocalStorage();};//刪除待辦constdeleteTodo=(index)=>{todos.value.splice(index,1);saveToLocalStorage();};//保存到localStorageconstsaveToLocalStorage=()=>{localStorage.setItem('todos',JSON.stringify(todos.value));};//組件掛載時(shí)加載數(shù)據(jù)（已通過loadFromLocalStorage初始化，此處可選）onMounted(()=>{todos.value=loadFromLocalStorage();});</script><style>.done-text{text-decoration:line-through;color:999;}.todo-item{margin:8px0;display:flex;align-items:center;gap:10px;}</style>```核心邏輯說(shuō)明：通過`ref`聲明響應(yīng)式數(shù)據(jù)`todos`和`newTodo`，使用`localStorage`的`getItem`和`setItem`實(shí)現(xiàn)數(shù)據(jù)持久化；添加和刪除操作后調(diào)用`saveToLocalStorage`更新存儲(chǔ)；勾選狀態(tài)變化時(shí)通過`@change`觸發(fā)存儲(chǔ)，確保狀態(tài)同步。3.某電商首頁(yè)加載緩慢（首屏加載時(shí)間5秒以上），請(qǐng)分析可能的性能瓶頸并給出至少5種優(yōu)化措施；同時(shí)，編寫一個(gè)基于`IntersectionObserverAPI`的圖片懶加載指令（要求支持`v-lazy`指令，圖片未進(jìn)入視口時(shí)顯示占位圖，進(jìn)入后加載真實(shí)圖片）。（1）性能瓶頸分析與優(yōu)化措施：瓶頸1：首屏資源體積過大（如未壓縮的圖片、JS/CSS文件）。優(yōu)化：使用`WebP`/`AVIF`格式圖片（比JPG小20%-50%），通過`ImageMagick`或在線工具壓縮；對(duì)JS/CSS進(jìn)行`Terser`壓縮、`CSSNano`優(yōu)化。瓶頸2：關(guān)鍵資源加載順序不合理（如非首屏JS阻塞渲染）。優(yōu)化：將非關(guān)鍵JS標(biāo)記為`async`或`defer`；使用`preload`優(yōu)先加載首屏關(guān)鍵CSS/字體。瓶頸3：HTTP請(qǐng)求過多（如大量小圖片、未合并的CSS/JS）。優(yōu)化：合并同類資源（如CSSSprites合并小圖標(biāo)）；使用`HTTP/2`多路復(fù)用減少連接開銷；配置`CDN`加速靜態(tài)資源。瓶頸4：前端渲染效率低（如大量DOM節(jié)點(diǎn)、頻繁重排重繪）。優(yōu)化：使用虛擬列表（如`react-virtualized`）減少渲染節(jié)點(diǎn)；避免直接操作`style`屬性，改用`class`批量修改樣式；使用`requestAnimationFrame`優(yōu)化動(dòng)畫。瓶頸5：服務(wù)端響應(yīng)慢（如接口查詢耗時(shí)、未緩存）。優(yōu)化：后端接口添加`Redis`緩存（如商品列表）；啟用`HTTPCache`（設(shè)置`Cache-Control:max-age=3600`）；使用服務(wù)端渲染（SSR）減少客戶端渲染時(shí)間。（2）圖片懶加載指令實(shí)現(xiàn)：```java