2026年软件技术(Web开发技术)试题及答案

2026年软件技术(Web开发技术)试题及答案一、单项选择题（每题2分，共30分）1.以下HTML5新增的语义化标签中，专门用于定义页面独立的、完整的内容块（如一篇博客文章、一个论坛帖子）的是A.<header>B.<article>C.<section>D.<aside>2.CSS3中，实现元素宽度根据内容长度自动适配，同时最大宽度不超出父容器的属性设置正确的是A.width:auto;max-width:100%;B.width:100%;min-width:auto;C.width:fit-content;max-width:100%;D.width:intrinsic;max-width:100%;3.以下关于JavaScript中闭包的描述，错误的是A.闭包可以让内部函数访问外部函数作用域的变量B.闭包会使变量一直保留在内存中，不合理使用会引发内存泄漏C.闭包只能读取外部函数变量，不能修改外部函数变量的值D.常见的模块化开发模式（如立即执行函数表达式IIFE）本质上运用了闭包特性4.以下HTTP请求方法中，符合RESTfulAPI设计规范，用于更新资源全量属性的方法是A.POSTB.PUTC.PATCHD.DELETE5.在Vue3的CompositionAPI中，可用于将一个普通JavaScript对象转换为深度响应式引用类型的API是A.refB.reactiveC.shallowReactiveD.toRef6.React18并发渲染模式下，用于将状态更新标记为低优先级可中断更新的Hook是A.startTransitionB.useTransitionC.useDeferredValueD.useEffect7.以下关于跨域资源共享（CORS）的描述，正确的是A.所有跨域请求都需要发送预检OPTIONS请求B.需要携带Cookie的跨域请求，前端需要将XMLHttpRequest的withCredentials属性设置为falseC.后端配置Access-Control-Allow-Origin为*时，允许携带身份凭证的跨域请求D.预检请求用于提前验证服务器是否允许当前跨域请求，避免非简单请求对服务器造成不符合预期的操作8.Node.js中，以下模块属于核心内置模块，无需单独安装即可使用的是A.expressB.lodashC.fsD.axios9.CSS中，以下选择器优先级从高到低排序正确的是A.!important>内联样式>ID选择器>类选择器>标签选择器B.内联样式>!important>ID选择器>类选择器>标签选择器C.!important>ID选择器>内联样式>类选择器>标签选择器D.!important>内联样式>类选择器>ID选择器>标签选择器10.以下关于前端工程化中Git操作的描述，正确的是A.gitfetch会自动将远程仓库的目标分支代码合并到当前本地分支B.gitreset--hardHEAD^会回退到上一个版本，且保留回退前的工作区修改C.gitrebase可以用于整理本地提交历史，将多个连续提交合并为一个提交，简化提交记录D.合并分支产生冲突后，Git可以自动解决所有冲突无需人工干预11.以下关于PWA（渐进式Web应用）的核心技术中，专门用于实现离线资源缓存、拦截网络请求的是A.ServiceWorkerB.WebWorkerC.IndexedDBD.WebAppManifest12.TypeScript中，以下类型修饰符表示“该变量可以接收任意类型的值”且关闭类型检查的是A.anyB.unknownC.neverD.void13.Node.js异步编程的发展历程中，最晚成为标准规范的异步处理方案是A.回调函数B.PromiseC.Generator+协程D.async/await14.CSSGrid布局中，属性grid-template-rows:1fr2fr;的含义是A.将网格分为两行，总宽度分为3等份，第一行占1份，第二行占2份B.将网格分为两行，总高度分为3等份，第一行高度占1份，第二行高度占2份C.第一行最小高度为1px，第二行最大高度为2pxD.第一行固定高度1像素，第二行固定高度2像素15.以下关于虚拟DOM的描述，错误的是A.虚拟DOM是用JavaScript对象来描述真实DOM节点的结构和属性B.虚拟DOM通过批量更新、差异比对减少直接操作DOM的次数，提升渲染性能C.虚拟DOM的抽象化支持跨端渲染，是ReactNative等跨端方案的基础D.虚拟DOM在任何应用场景下性能都优于直接操作真实DOM二、多项选择题（每题3分，多选、少选、错选均不得分，共15分）1.以下属于HTML5新增的input输入类型的有A.emailB.numberC.dateD.tel2.以下属于Vue3相对Vue2的核心改进的有A.原生提供更好的TypeScript类型支持B.新增CompositionAPI，解决大型项目的代码组织和逻辑复用问题C.重构了响应式系统，运行性能更快，打包体积更小D.完全移除了选项式API，不再支持Options写法3.以下优化手段中，可以有效提升Web页面加载性能的有A.静态资源部署到CDN节点，缩短资源请求延迟B.服务端开启Gzip或Brotli资源压缩，减少资源传输体积C.对非首屏图片使用懒加载，减少首屏请求数和加载体积D.将多个小图标合并为雪碧图，减少HTTP请求数量4.以下关于Vue官方状态管理工具Pinia的描述，正确的有A.Pinia是Vue官方推荐的新一代状态管理工具，用于取代VuexB.Pinia默认支持模块化开发，每个store单独定义，无需手动配置模块拆分C.Pinia原生完整支持TypeScript，类型推导友好D.Pinia移除了Vuex中的mutations概念，仅通过state、getters、actions完成状态管理5.以下关于HTTP/2相对HTTP/1.1的改进，描述正确的有A.HTTP/2采用二进制分帧传输，HTTP/1.1采用文本传输，二进制分帧解析效率更高B.HTTP/2支持同一TCP连接多路复用，解决了HTTP/1.1的队头阻塞问题C.HTTP/2支持服务器主动推送资源，无需客户端请求即可提前推送静态资源到客户端D.HTTP/2默认加密传输，安全性高于默认明文传输的HTTP/1.1三、简答题（每题5分，共25分）1.简述Cookie、SessionStorage、LocalStorage三者的核心区别。2.简述什么是CSRF攻击，列举至少两种常用的防护方式。3.简述Vue中虚拟DOM和Diff算法的核心原理。4.简述RESTfulAPI的核心概念和设计原则。5.简述前端工程化的核心含义，以及前端工程化主要解决了哪些问题。四、综合应用题（共30分）某开发团队需要开发一个轻量化用户信息管理单页应用，要求实现用户列表展示、新增用户、编辑用户信息、删除用户四个核心功能，前端技术栈采用Vue3+TypeScript，后端提供符合RESTful规范的接口，接口定义如下：获取用户列表：GET/api/users，返回值格式：{code:number,data:User[],message:string}新增用户：POST/api/users，请求体携带用户信息，返回新增后的用户信息编辑用户：PUT/api/users/:id，请求路径携带用户ID，请求体携带更新后的用户信息，返回更新后的用户信息删除用户：DELETE/api/users/:id，请求路径携带用户ID，返回操作状态其中User类型定义为{id:number,name:string,email:string,phone:string}。请结合上述需求完成以下要求：(1)设计前端核心组件结构，说明核心功能的实现流程（10分）(2)编写获取用户列表和删除用户两个功能的核心代码，要求使用CompositionAPI，符合TypeScript类型规范（12分）(3)列举该项目上线前至少3个性能优化方向，并说明具体优化手段（8分）参考答案及解析一、单项选择题参考答案及解析1.参考答案：B解析：<header>用于定义页面或区块的头部，<article>用于定义独立完整的内容块，<section>用于定义页面中的主题性区块，<aside>用于定义侧边栏内容，因此选B。2.参考答案：C解析：width:fit-content会根据内容长度自动调整宽度，内容短则宽度小，内容长则宽度跟随内容，配合max-width:100%可实现最大宽度不超出父容器，符合需求；auto默认宽度会撑满父容器，intrinsic不属于标准CSS属性，因此选C。3.参考答案：C解析：闭包既可以读取外部函数的变量，也可以修改外部函数变量的值，C选项描述错误，其余选项描述正确，因此选C。4.参考答案：B解析：POST用于新增资源，PUT用于全量更新资源，PATCH用于部分更新资源，DELETE用于删除资源，因此选B。5.参考答案：B解析：ref用于包装基础类型或引用类型，会将值包裹在ref对象中；reactive专门用于将普通对象转换为深度响应式；shallowReactive仅做浅响应，不对嵌套属性做响应式处理；toRef用于将响应式对象的属性转换为独立ref，因此选B。6.参考答案：B解析：startTransition是普通方法，不是Hook；useTransition是React18提供的用于标记低优先级可中断更新的Hook；useDeferredValue用于延迟值的更新，不符合题干要求，因此选B。7.参考答案：D解析：简单跨域请求（GET/HEAD/POST，无自定义请求头，Content-Type为三种常见类型）不需要发送预检请求，A错误；需要携带Cookie的跨域请求，withCredentials需要设置为true，B错误；Access-Control-Allow-Origin为*时，不允许携带身份凭证，C错误；D描述正确，因此选D。8.参考答案：C解析：express、lodash、axios均为第三方模块，需要npm安装后才能使用，fs是Node.js核心内置文件操作模块，无需安装，因此选C。9.参考答案：A解析：CSS选择器优先级标准排序为：!important>内联样式>ID选择器>类选择器/属性选择器/伪类选择器>标签选择器>通配选择器，因此选A。10.参考答案：C解析：gitfetch仅拉取远程分支更新到本地副本，不会自动合并到当前分支，A错误；gitreset--hard会清空工作区修改，B错误；gitrebase不仅可以合并分支，也可以用于变基整理提交历史，合并多个提交，C描述正确；Git冲突需要人工解决，D错误，因此选C。11.参考答案：A解析：ServiceWorker是运行在浏览器后台的脚本，负责拦截网络请求、缓存离线资源，是PWA离线能力的核心；WebWorker用于处理计算密集型任务，避免阻塞主线程，IndexedDB用于客户端存储大量数据，AppManifest用于定义PWA的安装属性，因此选A。12.参考答案：A解析：any类型允许变量接收任意类型的值，关闭TypeScript的类型检查；unknown也可以接收任意类型，但使用前需要做类型断言，是安全的任意类型；never表示不存在的值的类型，void表示没有返回值，因此选A。13.参考答案：D解析：异步处理方案发展顺序为：回调函数→Promise→Generator+协程→async/await，async/await是ES2017引入的标准规范，是最晚出现的方案，因此选D。14.参考答案：B解析：grid-template-rows用于定义行的大小，fr单位代表网格剩余空间的比例份数，1fr2fr表示将总高度分为3份，第一行占1份，第二行占2份，因此选B。15.参考答案：D解析：当页面DOM结构简单，更新频率极低时，虚拟DOM的差异比对和生成过程反而会带来额外性能开销，性能不如直接操作真实DOM，因此D描述错误，符合题干要求。二、多项选择题参考答案及解析1.参考答案：ABCD解析：email、number、date、tel均为HTML5新增的input输入类型，因此全选。2.参考答案：ABC解析：Vue3同时支持CompositionAPI和选项式API，并没有移除选项式API，D错误，ABC描述均正确。3.参考答案：ABCD解析：四个优化手段均可以有效提升页面加载性能，因此全选。4.参考答案：ABCD解析：Pinia的四个描述均正确，符合Pinia的设计特性，因此全选。5.参考答案：ABCD解析：四个选项均为HTTP/2相对HTTP/1.1的核心改进，描述正确，因此全选。三、简答题参考答案1.答：三者核心区别如下：(1)存储大小不同：Cookie存储大小最大为4KB左右，SessionStorage和LocalStorage存储大小最大可达5MB左右；(2)生命周期不同：Cookie可设置过期时间，会话Cookie在浏览器关闭后失效，持久Cookie在过期时间到后失效；SessionStorage在当前浏览器标签页关闭后自动失效；LocalStorage永久有效，除非手动调用JS清除或清除浏览器缓存；(3)网络请求携带不同：Cookie会被自动携带在同域的HTTP请求头中发送给服务端，SessionStorage和LocalStorage不会自动发送，仅存储在客户端；(4)作用域不同：Cookie共享在同域下所有窗口标签页；LocalStorage共享在同域下所有窗口标签页；SessionStorage仅作用于当前浏览器标签页，不同标签页不共享。(每点1.25分，答对4点得满分)2.答：CSRF攻击即跨站请求伪造攻击，攻击者诱导用户跳转到第三方恶意网站，利用用户在目标网站已登录的身份凭证，向目标网站发送伪造的请求，完成非用户意愿的操作（如修改密码、转账等）。(2分)常见防护方式：①在请求中添加Token验证，Token存储在客户端，服务端验证Token合法性，第三方网站无法获取Token；②验证请求头中的Referer，判断请求是否来自合法域名；③给关键操作添加验证码，要求用户二次验证。(答对任意2种得3分，满分5分)3.答：核心原理：虚拟DOM是用JavaScript对象来描述真实DOM的结构、属性和内容，作为真实DOM的轻量级抽象，当状态变化生成新的虚拟DOM后，通过Diff算法比对新旧虚拟DOM的差异，找到需要更新的节点，最终只更新变化的部分到真实DOM，减少不必要的DOM操作，提升性能。(2分)Vue的Diff算法核心采用双端比对策略，默认遵循同级比对、key复用节点的原则：①比对只在同一层级的节点之间进行，不跨层级比对；②给节点设置唯一key，Diff算法通过key识别节点，复用已存在的真实DOM节点，避免频繁创建销毁节点；③采用头尾指针的双端比对，优先比对头尾相同节点，快速完成差异查找，提升比对效率。(3分，满分5分)4.答：RESTfulAPI是一种基于HTTP协议的软件架构风格，用于设计网络应用的接口，核心是将所有后端资源都抽象为资源，通过HTTP方法对资源进行操作。(2分)核心设计原则：①以资源为中心，URL中使用名词表示资源，不使用动词；②利用HTTP方法对应资源操作，GET获取、POST新增、PUT全量更新、PATCH部分更新、DELETE删除；③利用HTTP状态码返回不同的操作结果，如200成功、400参数错误、401未授权、404资源不存在、500服务器错误；④接口版本化，不同版本的接口通过URL或请求头区分；⑤无状态，每个请求都包含所有需要的信息，服务端不存储请求状态。(答对3点及以上得3分，满分5分)5.答：前端工程化是将前端开发过程标准化、工程化、自动化的开发体系，从项目搭建、开发、构建、测试、部署等全流程提供规范化的解决方案。(2分)主要解决的问题：①解决了复杂项目的代码组织问题，实现模块化开发，提升代码可维护性；②通过自动化工具完成重复工作，如代码构建、压缩、打包，提升开发效率；③统一开发规范，通过ESLint、Prettier等工具统一代码风格，降低团队协作成本；④实现性能优化，打包过程中完成代码压缩、TreeShaking、代码分割等优化，提升线上项目性能；⑤支持依赖管理，通过npm/yarn等工具管理第三方依赖，解决依赖版本冲突问题。(答对3点及以上得3分，满分5分)四、综合应用题参考答案(1)前端核心组件结构与实现流程：核心组件结构分为三层：根组件App.vue→用户列表组件UserList.vue→用户编辑弹窗组件UserEditModal.vue，根组件负责全局请求配置、公共状态管理，UserList负责展示用户列表、触发新增/编辑/删除操作，UserEditModal负责处理新增/编辑用户的表单校验与提交。(4分)核心功能实现流程：①页面初始化时，在onMounted生命周期钩子中调用获取用户列表接口，将返回的用户列表数据保存到响应式state中，渲染列表；②点击新增用户按钮，打开编辑弹窗，清空表单默认值，用户填写完成点击提交后调用新增用户接口，请求成功后关闭弹窗，重新拉取用户列表刷新展示；③点击编辑用户按钮，打开编辑弹窗，将当前选中用户的信息回显到表单中，用户修改完成点击提交调用编辑接口，请求成功后关闭弹窗刷新列表；④点击删除按钮，弹出二次确认框，用户确认后调用删除接口，请求成功后刷新用户列表。(6分，满分10分)(2)核心代码示例（基于Vue3CompositionAPI+TypeScript）：```typescript//定义User类型interfaceUser{id:number;name:string;email:string;phone:string;}import{ref,onMounted}from'vue';importrequestfrom'@/utils/request';//封装后的axios请求实例constuserList=ref<User[]>([]);//获取用户列表constgetUserList=async()=>{try{constres=awaitrequest.get<{code:number;data:User[];message:string}>('/api/users');if(res.data.code===0){//约定code=0代表请求成功userList.value=res.data.data;}else{alert(res.data.message);}}catch(err){console.error('获取用户列表失败',err);alert('获取用户列表失败，请稍后重试');}}//删除用户constdeleteUser=async(id:number)=>{if(!confirm('确定要删除该用户吗？删除后无法恢复'))retur