2026年Web前端开发工程师面试题库

2026年Web前端开发工程师面试题库一、选择题（每题3分，共10题）1.在React中，以下哪个钩子用于在组件卸载时执行清理操作？A.`useEffect`B.`useContext`C.`useCallback`D.`useLayoutEffect`2.Vue3中，哪个指令用于条件渲染一个元素？A.`v-if`B.`v-for`C.`v-show`D.`v-model`3.在TypeScript中，以下哪种类型注解表示“可能是任何类型”或“不保证类型安全”？A.`unknown`B.`any`C.`void`D.`null`4.CSS中，哪个属性用于实现动画的缓动效果？A.`transition-timing-function`B.`animation-timing-function`C.`transform`D.`opacity`5.WebP格式相比JPEG和PNG有哪些优势？（多选）A.更高的压缩率B.支持透明度C.更好的动画支持D.兼容性更好6.以下哪个HTTP状态码表示“请求超时”？A.404B.408C.504D.5007.在Webpack中，哪个插件用于自动生成HTML文件并引入打包后的JavaScript和CSS？A.`HtmlWebpackPlugin`B.`MiniCssExtractPlugin`C.`TerserPlugin`D.`CleanWebpackPlugin`8.哪个CSS框架以原子化CSS和JavaScript组件为核心设计理念？A.BootstrapB.TailwindCSSC.FoundationD.Bulma9.在浏览器端，以下哪个API用于监控网络请求的性能？A.`PerformanceAPI`B.`FetchAPI`C.`EventLoop`D.`WebWorkers`10.哪种JavaScript设计模式适用于解耦对象之间的依赖关系？A.单例模式B.工厂模式C.观察者模式D.策略模式二、简答题（每题5分，共5题）1.简述React中的“虚拟DOM”是什么，以及它的优势是什么？2.解释CSS中的“盒模型”（BoxModel）及其组成部分。3.描述HTTP请求中的“GET”和“POST”方法的区别。4.什么是“前端性能优化”？列举至少三种常见的优化手段。5.解释JavaScript中的“闭包”（Closure）是什么，并举例说明其应用场景。三、代码题（每题15分，共3题）1.React代码题（15分）请编写一个React组件，实现一个简单的待办事项列表（TodoList），要求：-支持添加新的待办事项。-支持删除待办事项。-待办事项需显示在列表中，并用勾选框标记完成状态。2.Vue代码题（15分）请编写一个Vue3组件，实现一个简单的购物车功能，要求：-支持添加商品到购物车。-支持从购物车中删除商品。-显示购物车中的商品数量和总价。3.JavaScript代码题（15分）请编写一个JavaScript函数，实现以下功能：-输入一个数组，返回一个新数组，其中包含所有偶数，并保留原始数组的顺序。-使用纯函数实现，避免修改原始数组。四、开放题（每题20分，共2题）1.前端工程化实践（20分）请结合实际项目经验，谈谈在前端工程化中，如何配置Webpack以优化大型项目的构建速度和性能？2.跨域问题解决方案（20分）解释什么是前端跨域问题，并列举至少三种常见的解决方案（如CORS、JSONP、代理服务器等），并说明各自的适用场景。答案与解析一、选择题答案与解析1.D-`useLayoutEffect`在组件更新后立即同步执行，适用于需要读取DOM或进行DOM变更的场景。-`useEffect`是异步执行的，适合在组件挂载后或依赖项变化时执行副作用。-`useContext`用于读取上下文值。-`useCallback`用于缓存回调函数。2.A-`v-if`用于条件渲染，元素存在或不存在取决于表达式的真值。-`v-for`用于循环渲染列表。-`v-show`通过CSS控制显示或隐藏，元素始终存在于DOM中。-`v-model`用于双向数据绑定。3.B-`unknown`类型需要显式类型检查，更安全。-`any`类型绕过类型检查，可能导致运行时错误。-`void`表示函数不返回任何值。-`null`是空值类型。4.A-`transition-timing-function`用于CSS过渡动画的缓动效果。-`animation-timing-function`用于CSS动画的缓动效果。-`transform`和`opacity`是动画属性，非缓动效果。5.A,B-WebP提供更高的压缩率，支持透明度，但动画支持有限（需AVIF格式）。兼容性不如JPEG/PNG广泛。6.C-404：NotFound-408：RequestTimeout-500：InternalServerError-504：GatewayTimeout7.A-`HtmlWebpackPlugin`自动生成HTML并引入资源。-`MiniCssExtractPlugin`提取CSS到单独文件。-`TerserPlugin`用于压缩JS。-`CleanWebpackPlugin`清理构建目录。8.B-TailwindCSS基于原子化CSS，提供实用工具类。-Bootstrap是响应式框架，Foundation是移动优先框架。9.A-`PerformanceAPI`用于监控页面加载和执行性能。-`FetchAPI`用于网络请求。-`EventLoop`是JavaScript执行机制。-`WebWorkers`用于并行计算。10.C-单例模式确保全局唯一实例。-工厂模式创建对象。-观察者模式实现事件监听。-策略模式解耦行为逻辑。二、简答题答案与解析1.虚拟DOM是什么？优势？-虚拟DOM是React的运行时数据结构，是DOM的轻量级副本。-优势：-减少直接操作DOM的性能开销。-避免不必要的DOM更新。-跨平台支持（如服务器渲染）。2.CSS盒模型及组成部分？-盒模型由：-`content`：内容区域。-`padding`：内边距。-`border`：边框。-`margin`：外边距。-标准盒模型：`width/height`仅包含`content`。-IE盒模型：`width/height`包含`content`、`padding`、`border`。3.GET与POST的区别？-GET：-无状态，参数在URL中传递，缓存可能生效。-适用于查询数据。-参数有长度限制。-POST：-有状态，参数在请求体中传递，不缓存。-适用于提交数据。-无长度限制。4.前端性能优化手段？-代码分割（Webpack多入口）。-懒加载（`IntersectionObserver`）。-CDN加速静态资源。-图片优化（WebP、懒加载）。5.闭包是什么？应用场景？-闭包是函数及其词法环境的组合，内部函数可访问外部函数的变量。-应用场景：-数据封装（模块化）。-延迟执行（如计时器）。三、代码题答案与解析1.ReactTodoList代码实现jsximportReact,{useState}from'react';functionTodoList(){const[todos,setTodos]=useState([]);const[input,setInput]=useState('');constaddTodo=()=>{if(input.trim()){setTodos([...todos,{text:input,completed:false}]);setInput('');}};constdeleteTodo=(index)=>{constnewTodos=todos.filter((_,i)=>i!==index);setTodos(newTodos);};consttoggleComplete=(index)=>{constnewTodos=[...todos];newTodos[index].completed=!newTodos[index].completed;setTodos(newTodos);};return(<div><inputtype="text"value={input}onChange={(e)=>setInput(e.target.value)}/><buttononClick={addTodo}>添加</button><ul>{todos.map((todo,index)=>(<likey={index}><inputtype="checkbox"checked={pleted}onChange={()=>toggleComplete(index)}/>{todo.text}<buttononClick={()=>deleteTodo(index)}>删除</button></li>))}</ul></div>);}exportdefaultTodoList;2.Vue3ShoppingCart代码实现vue<template><div><inputv-model=""placeholder="商品名称"/><button@click="addItem">添加到购物车</button><ul><liv-for="(item,index)incart":key="index">{{}}-数量：{{item.quantity}}-小计：{{item.quantityitem.price}}<button@click="removeItem(index)">删除</button></li></ul><p>总价：{{totalPrice}}</p></div></template><script>import{ref}from'vue';exportdefault{setup(){constcart=ref([]);constitem=ref({name:'',price:1});constaddItem=()=>{constexistingItem=cart.value.find((i)=>===);if(existingItem){existingItem.quantity++;}else{cart.value.push({...item.value,quantity:1});}};constremoveItem=(index)=>{cart.value.splice(index,1);};consttotalPrice=computed(()=>{returncart.value.reduce((sum,item)=>sum+item.quantityitem.price,0);});return{cart,item,addItem,removeItem,totalPrice};},};</script>3.JavaScript偶数过滤函数jsfunctionfilterEvenNumbers(arr){returnarr.filter((num)=>num%2===0);}//示例constoriginal=[1,2,3,4,5];consteven=filterEvenNumbers(original);//[2,4]console.log(even);//[2,4]console.log(original);//[1,2,3,4,5]（未修改）四、开放题答案与解析1.前端工程化实践（Webpack优化）-代码分割：使用`SplitChunksPlugin`按路由或组件拆分代码。-缓存优化：配置`cacheGroups`优先缓存公共依赖。-TreeShaking：使用`TerserPlugin