web前端测试题及答案

web前端测试题及答案一、基础概念题1.请列举HTML5新增的5个语义化标签，并说明其典型使用场景。答案：HTML5新增的语义化标签包括：`<header>`：通常用于页面或区域的头部，包含标题、导航或介绍性内容（如网站Logo、主菜单）。`<nav>`：用于定义导航链接区域（如页面主导航、侧边栏导航）。`<section>`：表示文档中的一个独立区域，通常有自己的标题（如博客的文章列表、产品展示区块）。`<article>`：表示一篇独立的、可复用的内容（如新闻文章、博客帖子）。`<footer>`：用于页面或区域的底部，包含版权信息、相关链接或联系方式。2.简述CSS盒模型的组成部分，并说明标准盒模型与IE盒模型的区别。答案：CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。标准盒模型中，元素的宽度（width）仅包含content的宽度；而IE盒模型（怪异模式）中，width属性包含content+padding+border的总宽度。可通过`box-sizing`属性控制：`box-sizing:content-box`（标准盒模型）、`box-sizing:border-box`（IE盒模型）。3.说明JavaScript中`var`、`let`、`const`的区别，并举例说明。答案：`var`：声明函数作用域变量，存在变量提升（声明提前到作用域顶部），可重复声明和重新赋值（如`vara=1;vara=2;`合法）。`let`：声明块级作用域变量（{}内有效），不存在变量提升（存在暂时性死区），不可重复声明但可重新赋值（如`leta=1;leta=2;`报错）。`const`：声明块级作用域常量，必须初始化且不可重新赋值（引用类型可修改属性，如`constobj={};obj.key=1;`合法）。示例：```javascriptfunctiontest(){varx=1;if(true){varx=2;//覆盖外层x，最终test函数内x为2lety=3;//仅在if块内有效constz=4;//仅在if块内有效，不可修改}console.log(x);//输出2console.log(y);//报错：yisnotdefinedconsole.log(z);//报错：zisnotdefined}```4.解释HTTP状态码200、301、404、500的含义。答案：200OK：请求成功，响应体包含请求的资源。301MovedPermanently：资源永久重定向，客户端应更新书签指向新URL。404NotFound：请求的资源不存在（如URL错误）。500InternalServerError：服务器内部错误（如代码异常、数据库连接失败）。二、进阶技能题5.描述事件冒泡（EventBubbling）和事件捕获（EventCapture）的执行顺序，并说明如何阻止事件冒泡和默认行为。答案：事件流分为三个阶段：捕获阶段（从window到目标元素的父级）、目标阶段（触发目标元素）、冒泡阶段（从目标元素回到window）。默认情况下，事件处理函数在冒泡阶段执行。阻止事件冒泡：调用`event.stopPropagation()`（IE8及以下使用`event.cancelBubble=true`）。阻止默认行为：调用`event.preventDefault()`（IE8及以下使用`event.returnValue=false`）。6.什么是闭包（Closure）？说明其应用场景及潜在问题。答案：闭包是函数与其词法环境的组合，允许内部函数访问外部函数的变量，即使外部函数已执行完毕。应用场景：函数工厂（返回特定配置的函数，如计数器）；模块模式（封装私有变量，暴露公共方法）；事件处理函数保留状态（如循环中绑定事件时保存当前索引）。潜在问题：闭包会导致外部函数的变量无法被垃圾回收，可能引发内存泄漏（需避免不必要的闭包嵌套）。7.简述Promise的链式调用原理，并说明`async/await`与Promise的关系。答案：Promise的`then()`方法返回一个新的Promise实例，因此可通过链式调用处理异步流程。每个`then()`的返回值（或抛出的错误）会传递给下一个`then()`或`catch()`。`async/await`是Promise的语法糖，`async`函数返回一个Promise，`await`会暂停执行并等待Promise解决（或拒绝）。本质上，`awaitpromise`等价于`promise.then()`，但更接近同步代码的书写方式。8.列举常见的跨域（CORS）解决方案，并说明JSONP的实现原理。答案：常见跨域解决方案：CORS（跨域资源共享）：服务器通过设置`Access-Control-Allow-Origin`等响应头允许特定源访问。JSONP（JSONwithPadding）：利用`<script>`标签无跨域限制的特性，服务端返回包裹在函数调用中的JSON数据（如`callback({data:1})`），客户端定义`callback`函数处理数据。反向代理：前端请求本地服务器，本地服务器转发请求到目标域名（如VueCLI的`proxy`配置）。JSONP的实现步骤：动态创建`<script>`标签，设置`src`为目标URL（携带`callback`参数），服务端将数据包裹在`callback`函数中返回，客户端通过预定义的`callback`函数接收数据。三、综合应用题9.用Vue3实现一个待办事项列表（TodoList），要求包含以下功能：输入框输入待办内容，点击“添加”按钮或按回车键添加事项；列表项可点击删除；显示当前待办总数（如“您有3项待办”）。答案：```vue<template><divclass="todo-list"><inputtype="text"v-model="newTodo"@keyup.enter="addTodo"placeholder="输入待办事项"/><button@click="addTodo">添加</button><ulv-if="todos.length"><liv-for="(todo,index)intodos":key="index">{{todo}}<span@click="deleteTodo(index)">×</span></li></ul><pv-else>暂无待办事项</p><p>您有{{todos.length}}项待办</p></div></template><scriptsetup>import{ref}from'vue';constnewTodo=ref('');consttodos=ref([]);constaddTodo=()=>{if(newTodo.value.trim()){todos.value.push(newTodo.value.trim());newTodo.value='';}};constdeleteTodo=(index)=>{todos.value.splice(index,1);};</script><stylescoped>.todo-list{max-width:500px;margin:20pxauto;}input{padding:8px;margin-right:10px;}button{padding:8px15px;}li{list-style:none;margin:10px0;display:flex;justify-content:space-between;}span{cursor:pointer;color:ff4444;}</style>```10.说明React中`useEffect`的依赖数组（deps）的作用，并举例说明如何避免无限循环。答案：`useEffect`的依赖数组用于控制副作用的执行时机。若deps为空数组（`[]`），副作用仅在组件挂载时执行一次（模拟`componentDidMount`）；若deps包含变量，副作用会在变量变化时重新执行；若省略deps，副作用会在每次组件渲染后执行。避免无限循环的关键是确保依赖数组正确反映副作用中使用的所有外部变量。例如，若在`useEffect`中调用一个更新状态的函数，需将该函数加入deps（或使用`useCallback`缓存函数）。示例（错误写法导致无限循环）：```javascriptfunctionCounter(){const[count,setCount]=useState(0);useEffect(()=>{consttimer=setInterval(()=>{setCount(count+1);//依赖count，但未加入deps},1000);return()=>clearInterval(timer);},[]);//deps为空，count变化时不更新timer中的count值return<div>{count}</div>;}```修正方法（使用函数式更新或添加deps）：```javascriptuseEffect(()=>{consttimer=setInterval(()=>{setCount(prev=>prev+1);//函数式更新，不依赖外部count},1000);return()=>clearInterval(timer);},[]);//deps为空，仅执行一次```11.前端性能优化的常见手段有哪些？请从资源加载、渲染优化、代码层面各举一例说明。答案：资源加载优化：使用懒加载（LazyLoading），对非首屏图片或组件延迟加载（如`img`标签的`loading="lazy"`属性，或IntersectionObserverAPI监听元素进入视口时加载）。渲染优化：减少重排（Reflow）和重绘（Repaint）。例如，避免频繁修改元素的`width`、`height`等会触发重排的属性，可先将元素设为`display:none`，批量修改后再显示（仅触发两次重排）。代码层面优化：使用防抖（Debounce）和节流（Throttle）处理高频事件（如滚动、窗口resize）。例如，搜索框输入时，使用防抖函数延迟请求接口，避免每输入一个字符都发送请求。12.解释XSS（跨站脚本攻击）和CSRF（跨站请求伪造）的区别，并说明防范措施。答案：XSS：攻击者将恶意脚本（如`<script>stealCookie()</script>`）注入到用户可查看的页面中，当其他用户访问时，脚本会执行（如窃取Cookie）。CSRF