尚硅谷前端技术面试题及答案解析

尚硅谷前端技术面试题及答案解析一、选择题（共5题，每题2分）1.单选题：以下哪个HTML标签用于定义文档的标题？A.`<head>`B.`<title>`C.`<header>`D.`<meta>`2.单选题：在JavaScript中，以下哪个方法用于去除字符串两端的空格？A.`trim()`B.`strip()`C.`removeSpace()`D.`cleanWhitespace()`3.单选题：CSS中，如何使一个元素在屏幕上垂直居中？A.`display:flex;justify-content:center;align-items:center;`B.`position:absolute;top:50%;transform:translateY(-50%);`C.`margin:auto;`D.以上都正确4.单选题：React中，以下哪个钩子用于在组件挂载后执行副作用？A.`useState()`B.`useEffect()`C.`useContext()`D.`useRef()`5.单选题：以下哪个HTTP状态码表示“未找到资源”？A.404B.500C.403D.301二、填空题（共5题，每题2分）1.填空题：CSS中，`flex:1;`的作用是让元素占据________的剩余空间。2.填空题：JavaScript中，用于阻止事件默认行为的函数是________。3.填空题：Vue3中，响应式数据的核心是________。4.填空题：WebStorageAPI中，`localStorage`的数据在页面刷新后________。5.填空题：CSS预处理器中，Sass的默认语法文件扩展名为________。三、简答题（共5题，每题4分）1.简答题：简述HTTP和HTTPS的区别。2.简答题：解释JavaScript中的闭包（Closure）及其应用场景。3.简答题：如何实现一个简单的CSS动画效果？4.简答题：React中，什么是虚拟DOM？它的作用是什么？5.简答题：前端性能优化的常见方法有哪些？四、编程题（共3题，每题10分）1.编程题：用JavaScript实现一个函数，接受一个数组，返回数组中所有偶数的平方和。2.编程题：用CSS和HTML创建一个响应式导航栏，在小屏幕上折叠成汉堡菜单。3.编程题：用React实现一个待办事项列表组件，支持添加和删除待办事项。五、综合题（共2题，每题15分）1.综合题：设计一个简单的电商详情页，包含商品图片、标题、价格、描述和“加入购物车”按钮，要求使用CSSGrid布局。2.综合题：分析并解决以下前端面试中常见的性能问题：页面加载缓慢、交互卡顿。答案及解析一、选择题答案及解析1.答案：B解析：`<title>`标签用于定义HTML文档的标题，显示在浏览器标签页和搜索引擎结果中。`<head>`是文档头部容器，`<header>`用于页面头部，`<meta>`用于元数据。2.答案：A解析：`trim()`是JavaScript字符串的内置方法，用于去除两端的空格。其他选项不存在或错误。3.答案：D解析：选项A使用Flexbox布局实现垂直居中；选项B使用绝对定位+transform；选项C仅水平居中。因此D最全面。4.答案：B解析：`useEffect()`钩子在组件挂载后、更新后或依赖项变化时执行副作用。其他选项：`useState()`管理状态，`useContext()`获取上下文值，`useRef()`获取DOM引用。5.答案：A解析：404表示“未找到资源”，403表示“禁止访问”，301表示“永久重定向”，500表示“服务器错误”。二、填空题答案及解析1.答案：父容器解析：`flex:1;`使元素按比例分配父容器的剩余空间，其他兄弟元素也会按相同逻辑分配。2.答案：`event.preventDefault()`解析：在事件处理函数中调用此方法可阻止默认行为，如链接跳转或表单提交。3.答案：Proxy解析：Vue3使用Proxy拦截对象操作，实现响应式。React则依赖`useState`和`useReducer`。4.答案：保留解析：`localStorage`数据持久存储，页面刷新后依然存在；`sessionStorage`则在会话结束时清除。5.答案：.scss解析：Sass的默认语法文件扩展名是`.scss`，其他如`.sass`（缩进语法）。三、简答题答案及解析1.答案：-HTTP：无加密，明文传输，端口80；-HTTPS：加密传输（TLS/SSL），端口443，更安全但需证书和额外开销。2.答案：-闭包：函数及其词法环境的组合，能访问外部作用域变量；-应用场景：创建私有变量、实现函数柯里化、封装状态。3.答案：-使用`@keyframes`定义关键帧，如：css@keyframesfadeIn{from{opacity:0;}to{opacity:1;}}-使用`animation`属性应用动画：csselement{animation:fadeIn1sease-in-out;}4.答案：-虚拟DOM：React的内存中的DOM表示，渲染时对比差异后批量更新真实DOM；-作用：提高性能（减少重绘和回流）、跨平台（Web/移动端）。5.答案：-代码分割（Webpack/rollup）；-懒加载（`loading="lazy"`）；-缓存（CDN/浏览器缓存）；-减少重绘/回流（使用`transform`替代`top`/`left`）。四、编程题答案及解析1.JavaScript代码：javascriptfunctionsumOfEvensSquares(arr){returnarr.reduce((sum,num)=>num%2===0?sum+numnum:sum,0);}解析：`reduce`累加偶数的平方，`%2===0`判断偶数。2.CSS/HTML代码：html<nav><buttonclass="menu-toggle">☰</button><ulclass="menu"><li>Home</li><li>About</li><li>Contact</li></ul></nav>css.menu{display:none;}.menu-toggle{display:none;}@media(max-width:600px){.menu-toggle{display:block;}.menu{display:block;}}解析：小屏幕显示汉堡按钮，点击后展开菜单（需JavaScript交互）。3.React代码：jsxfunctionTodoList(){const[todos,setTodos]=useState([]);const[input,setInput]=useState('');return(<div><inputvalue={input}onChange={(e)=>setInput(e.target.value)}/><buttononClick={()=>setTodos([...todos,input])}>Add</button><ul>{todos.map((todo,index)=>(<likey={index}>{todo}<buttononClick={()=>setTodos(todos.filter((_,i)=>i!==index))}>Delete</button></li>))}</ul></div>);}解析：使用`useState`管理待办事项和输入框。五、综合题答案及解析1.电商详情页设计：html<divclass="product"><imgsrc="product.jpg"/><h1>商品标题</h1><pclass="price">￥999</p><pclass="description">商品描述...</p><button>加入购物车</button></div>duct{display:grid;grid-template-columns:1fr2fr;gap:20px;padding:20px;}@media(max-width:600px){.product{grid-template-columns:1fr;}}解析：CS