2026年前端开发面试题及答案解析

2026年前端开发面试题及答案解析一、单选题（共5题，每题2分，共10分）1.以下哪个HTTP状态码表示请求成功且资源被正确处理？A.301B.304C.200D.4042.在React中，以下哪个钩子用于在组件挂载后执行副作用？A.`useState`B.`useEffect`C.`useContext`D.`useRef`3.以下哪个CSS选择器优先级最高？A.`#id`B.`.class`C.`element`D.`element>child`4.在Vue3中，以下哪个指令用于条件渲染元素？A.`v-if`B.`v-for`C.`v-bind`D.`v-on`5.以下哪个WebAPI用于在浏览器中存储数据？A.`XMLHttpRequest`B.`FetchAPI`C.`localStorage`D.`WebSocket`二、多选题（共5题，每题3分，共15分）1.以下哪些属于前端性能优化的方法？A.代码压缩B.CDN加速C.缓存利用D.预加载资源E.频繁使用`alert`2.以下哪些是JavaScript中的原始数据类型？A.`null`B.`undefined`C.`array`D.`boolean`E.`object`3.以下哪些是CSS布局模型？A.FlexboxB.GridC.FloatD.TableE.Inline4.以下哪些是React的生命周期方法？A.`componentDidMount`B.`render`C.`componentWillUnmount`D.`useState`E.`useEffect`5.以下哪些是Web安全常见漏洞？A.XSSB.CSRFC.SQL注入D.点击劫持E.JSONP三、填空题（共5题，每题2分，共10分）1.CSS中，`position:fixed;`属性用于实现_______定位。2.在JavaScript中，`===`运算符用于_______判断。3.Vue中的`computed`属性是基于_______的响应式数据。4.HTTP请求方法中，`PUT`用于_______资源。5.CSS中，`box-sizing:border-box;`属性将_______包含在内。四、简答题（共5题，每题4分，共20分）1.简述HTTP和HTTPS的区别。2.解释React中的虚拟DOM是什么，以及其优点。3.描述CSS盒模型（BoxModel）的基本组成部分。4.说明Vue中的`props`和`data`有什么区别。5.解释前端性能优化的意义，并列出三种常见优化方法。五、代码题（共5题，每题6分，共30分）1.JavaScript代码：实现一个函数`reverseStr`，将输入的字符串反转，并返回反转后的结果。javascript//示例：reverseStr('hello')→'olleh'2.React代码：创建一个React组件`Counter`，包含一个按钮，点击按钮时计数器加1，并显示当前计数。3.CSS代码：使用Flexbox布局，创建一个包含三个子元素的容器，子元素高度不同，但需保持容器垂直居中。4.Vue代码：创建一个Vue组件，包含一个输入框和一个按钮。输入框用于输入文本，按钮点击时将文本显示在页面上。5.HTML+JavaScript代码：创建一个简单的表单，包含用户名和密码输入框，以及一个提交按钮。提交时，使用JavaScript验证用户名和密码是否为空，若为空则提示错误信息。六、论述题（共1题，10分）解释前端工程化的重要性，并列举三个前端工程化工具及其作用。答案解析一、单选题1.C.200解析：HTTP状态码200表示请求成功，资源被正确处理。301：永久重定向；304：未修改；404：资源不存在。2.B.useEffect解析：`useEffect`用于在组件挂载后执行副作用操作，如数据获取、DOM操作等。`useState`：用于声明响应式状态；`useContext`：用于获取上下文值；`useRef`：用于引用DOM元素或存储数据。3.A.#id解析：CSS选择器优先级从高到低为：`id>class>element>attribute>inlinestyle`。`#id`优先级最高，其次是`.class`，然后是`element`，`element>child`是后代选择器的特殊形式。4.A.v-if解析：`v-if`用于条件渲染元素，只有当条件为`true`时才显示元素。`v-for`：循环渲染列表；`v-bind`：绑定属性；`v-on`：绑定事件。5.C.localStorage解析：`localStorage`用于在浏览器中存储键值对数据，即使关闭浏览器数据也不会丢失。`XMLHttpRequest`：用于网络请求；`FetchAPI`：现代网络请求API；`WebSocket`：实时双向通信；`localStorage`：本地存储。二、多选题1.A.代码压缩B.CDN加速C.缓存利用D.预加载资源解析：-代码压缩：减少文件大小，提升加载速度。-CDN加速：通过分布式节点加速资源加载。-缓存利用：利用浏览器或服务端缓存减少请求次数。-预加载资源：提前加载关键资源，提升首屏加载速度。-频繁使用`alert`：会阻塞用户操作，降低用户体验。2.A.nullB.undefinedD.boolean解析：JavaScript原始数据类型包括：`null`、`undefined`、`boolean`、`number`、`string`、`symbol`、`bigint`。`array`和`object`是引用数据类型。3.A.FlexboxB.GridC.FloatD.Table解析：CSS布局模型包括：Flexbox、Grid、Float、Table、Inline。Inline布局是基本布局方式，不属于独立模型。4.A.componentDidMountB.renderC.componentWillUnmount解析：React经典生命周期方法：-`componentDidMount`：组件挂载后调用。-`render`：组件渲染方法。-`componentWillUnmount`：组件卸载前调用。`useState`和`useEffect`是钩子函数，不属于生命周期方法。5.A.XSSB.CSRFC.点击劫持解析：前端常见安全漏洞：-XSS（跨站脚本攻击）：恶意脚本注入。-CSRF（跨站请求伪造）：欺骗用户执行非预期操作。-点击劫持：诱导用户点击隐藏的恶意链接。SQL注入是后端常见漏洞；JSONP是旧时代跨域方案，现代多用CORS。三、填空题1.绝对解析：`position:fixed;`使元素相对于浏览器窗口固定，滚动页面时不移动。2.严格类型和值解析：`===`运算符进行严格比较，即类型和值都相同。`==`运算符会进行类型转换。3.依赖解析：`computed`属性是基于依赖的响应式数据，任何依赖的值变化都会重新计算。4.更新或替换解析：`PUT`方法用于更新或替换指定URL的资源。`GET`：获取资源；`POST`：创建资源。5.边框和内边距解析：`box-sizing:border-box;`将边框和内边距包含在宽度和高度内，避免额外计算。四、简答题1.HTTP和HTTPS的区别：-HTTP：明文传输，数据易被窃取，不安全。-HTTPS：加密传输，使用SSL/TLS协议，更安全，但需证书和少量性能损耗。-HTTPS能防止中间人攻击，适用于涉及登录、支付等敏感操作的场景。2.虚拟DOM是什么及其优点：-虚拟DOM是React的核心概念，是一个轻量级的DOM树副本，用于在内存中模拟DOM操作。-优点：-减少真实DOM操作次数，提升性能。-组件化开发，代码可维护性高。-跨平台支持（如ReactNative）。3.CSS盒模型：-内容（Content）：元素的实际内容区域。-内边距（Padding）：内容边缘到边框的空白区域。-边框（Border）：围绕内边距的边框。-外边距（Margin）：边框外部的空白区域。-标准模型：宽高仅包含内容；`box-sizing:border-box`模型包含边框和内边距。4.`props`和`data`的区别：-`props`：组件间传递数据，从父组件到子组件，不可修改。-`data`：组件内部状态，可修改，用于渲染。-`props`是输入，`data`是输出。5.前端性能优化的意义及方法：-意义：提升用户体验、降低服务器压力、提高SEO排名。-方法：-代码压缩和合并（如Webpack）。-CDN加速静态资源。-缓存利用（浏览器缓存、服务端缓存）。五、代码题1.JavaScript代码：javascriptfunctionreverseStr(str){returnstr.split('').reverse().join('');}//示例：reverseStr('hello')→'olleh'2.React代码：jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><p>{count}</p><buttononClick={()=>setCount(count+1)}>Add</button></div>);}3.CSS代码：css.container{display:flex;justify-content:center;align-items:center;height:100vh;}.child{margin:10px;height:50px;background-color:lightblue;}4.Vue代码：vue<template><div><inputv-model="inputText"placeholder="Entertext"><button@click="displayText">Display</button><p>{{display}}</p></div></template><script>exportdefault{data(){return{inputText:'',display:''};},methods:{displayText(){this.display=this.inputText;}}};</script>5.HTML+JavaScript代码：html<formid="form"><inputtype="text"id="username"placeholder="Username"><inputtype="password"id="password"placeholder="Password"><buttontype="submit">Submit</button><pid="error"style="color:red;"></p></form><script>document.getElementById('form').addEventListener('submit',function(e){e.preventDefault();constusername=document.getElementById('username').value;constpassword=document.getElementById('password').value;if(!username||!password){document.getElementById('error').textContent='Usernameandpasswordcannotbeempty';}else{document.getElementById('error').textContent='';//处理表单提交逻辑}});</script>六、论述题前端工程化的重要性及工具：前端工程化是指将前端开发流程规范化、自动化，提升开发效率和代码质量。其重要性包括：1.提升开发效率：通过自动化工具（如Webpac