2025年web补充代码考试题及答案

2025年web补充代码考试题及答案一、单项选择题（每题4分，共40分）1.以下HTML5新增的语义化标签中，用于表示页面中独立的、完整的内容区域的是？A.`<nav>`B.`<aside>`C.`<article>`D.`<section>`答案：C2.关于CSS选择器的优先级，以下排序正确的是？A.内联样式>ID选择器>类选择器>元素选择器B.ID选择器>内联样式>类选择器>元素选择器C.类选择器>ID选择器>内联样式>元素选择器D.元素选择器>类选择器>ID选择器>内联样式答案：A3.以下JavaScript代码的输出结果是？```javascriptconsole.log(1);setTimeout(()=>console.log(2),0);Promise.resolve().then(()=>console.log(3));console.log(4);```A.1432B.1342C.1423D.1234答案：A4.关于ES6中`let`和`var`的区别，以下描述错误的是？A.`let`声明的变量具有块级作用域，`var`是函数作用域B.`let`存在暂时性死区，`var`会变量提升C.`let`在同一作用域内不能重复声明，`var`可以D.`let`声明的变量会挂载到`window`对象上，`var`不会答案：D5.以下哪种方式不能解决跨域问题？A.CORS（跨域资源共享）B.JSONP（JSONwithPadding）C.服务端反向代理D.前端直接修改`document.domain`答案：D（注：`document.domain`仅适用于主域相同的子域，且存在安全限制，并非通用解决方案）6.响应式设计中，媒体查询`@media(max-width:768px)`的作用是？A.当视口宽度大于768px时应用样式B.当视口宽度小于等于768px时应用样式C.当视口高度小于768px时应用样式D.当设备像素比为2时应用样式答案：B7.以下哪项是防范XSS攻击的有效措施？A.对用户输入的HTML内容进行转义（如将`<`转为`<`）B.不使用`innerHTML`动态插入内容，改用`textContent`C.设置HTTP头`Content-Security-Policy`限制资源来源D.以上都是答案：D8.HTTP/2相比HTTP/1.1的核心改进不包括？A.二进制分帧传输B.多路复用（同一连接处理多个请求）C.头部压缩（HPACK算法）D.支持`GET`和`POST`以外的请求方法答案：D（HTTP/1.1已支持多种方法）9.Vue3组件中，使用组合式API时，`onMounted`生命周期钩子的执行时机是？A.组件实例创建前B.组件模板编译完成后、DOM挂载前C.组件DOM节点首次渲染到页面后D.组件卸载前答案：C10.Webpack配置中，`module.rules`里使用`file-loader`的主要目的是？A.处理CSS文件中的`@import`和`url()`B.将JavaScript模块打包为浏览器可识别的代码C.对图片、字体等静态资源进行路径处理和输出D.压缩HTML文件答案：C二、填空题（每题4分，共20分）1.CSS中声明自定义属性（变量）的语法是`--属性名:值;`，例如声明主色调应写作__________。答案：`--main-color:ff0000;`（示例值不唯一）2.JavaScript中，`Array`对象的`__________`方法可以合并多个数组并返回新数组，原数组不受影响。答案：`concat()`3.正则表达式`/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/`的作用是匹配__________格式。答案：电子邮件（邮箱）4.HTTP状态码`403`表示__________，`503`表示__________。答案：禁止访问（权限不足）；服务不可用（服务器临时过载或维护）5.React函数组件中，使用`useState`声明状态的语法是：`const[state,setState]=useState(__________);`。答案：初始值（或`initialValue`）三、编程题（每题20分，共60分）1.请使用HTML、CSS和原生JavaScript实现一个图片轮播组件，要求：包含3张以上图片，自动切换（间隔3秒）；支持左右箭头点击切换；鼠标悬停时暂停自动切换，移出后恢复；响应式布局（图片宽度随容器自适应）。参考代码及关键注释：```html<!-HTML结构--><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%;/响应式：图片宽度占满容器/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;//自动切换函数functionautoSwitch(){currentIndex=(currentIndex+1)%imgs.length;updateSlider();}//更新轮播位置functionupdateSlider(){sliderWrapper.style.transform=`translateX(-${currentIndex100}%)`;}//手动切换：上一张prevBtn.addEventListener('click',()=>{currentIndex=(currentIndex1+imgs.length)%imgs.length;updateSlider();});//手动切换：下一张nextBtn.addEventListener('click',()=>{currentIndex=(currentIndex+1)%imgs.length;updateSlider();});//鼠标悬停暂停sliderContainer.addEventListener('mouseenter',()=>{clearInterval(autoTimer);});//鼠标移出恢复sliderContainer.addEventListener('mouseleave',()=>{autoTimer=setInterval(autoSwitch,3000);});//初始化自动切换autoTimer=setInterval(autoSwitch,3000);</script>```2.使用Vue3组合式API（`<scriptsetup>`语法）实现一个待办事项列表组件，要求：包含输入框和“添加”按钮，输入内容非空时可添加；列表项显示待办内容、完成状态（勾选框）；支持点击删除按钮移除待办；使用`localStorage`持久化存储待办数据（页面刷新后数据保留）。参考代码及核心逻辑：```vue<template><divclass="todo-list"><divclass="input-group"><inputv-model="newTodo"placeholder="输入待办事项"@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>暂无待办事项</p></div></template><scriptsetup>import{ref,onMounted}from'vue';//从localStorage读取初始数据constloadFromLocalStorage=()=>{constdata=localStorage.getItem('todos');returndata?JSON.parse(data):[];};//初始化待办列表和输入内容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));};//组件挂载时加载数据（已通过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>```核心逻辑说明：通过`ref`声明响应式数据`todos`和`newTodo`，使用`localStorage`的`getItem`和`setItem`实现数据持久化；添加和删除操作后调用`saveToLocalStorage`更新存储；勾选状态变化时通过`@change`触发存储，确保状态同步。3.某电商首页加载缓慢（首屏加载时间5秒以上），请分析可能的性能瓶颈并给出至少5种优化措施；同时，编写一个基于`IntersectionObserverAPI`的图片懒加载指令（要求支持`v-lazy`指令，图片未进入视口时显示占位图，进入后加载真实图片）。（1）性能瓶颈分析与优化措施：瓶颈1：首屏资源体积过大（如未压缩的图片、JS/CSS文件）。优化：使用`WebP`/`AVIF`格式图片（比JPG小20%-50%），通过`ImageMagick`或在线工具压缩；对JS/CSS进行`Terser`压缩、`CSSNano`优化。瓶颈2：关键资源加载顺序不合理（如非首屏JS阻塞渲染）。优化：将非关键JS标记为`async`或`defer`；使用`preload`优先加载首屏关键CSS/字体。瓶颈3：HTTP请求过多（如大量小图片、未合并的CSS/JS）。优化：合并同类资源（如CSSSprites合并小图标）；使用`HTTP/2`多路复用减少连接开销；配置`CDN`加速静态资源。瓶颈4：前端渲染效率低（如大量DOM节点、频繁重排重绘）。优化：使用虚拟列表（如`react-virtualized`）减少渲染节点；避免直接操作`style`属性，改用`class`批量修改样式；使用`requestAnimationFrame`优化动画。瓶颈5：服务端响应慢（如接口查询耗时、未缓存）。优化：后端接口添加`Redis`缓存（如商品列表）；启用`HTTPCache`（设置`Cache-Control:max-age=3600`）；使用服务端渲染（SSR）减少客户端渲染时间。（2）图片懒加载指令实现：```java