前端开发工程师技能考核试题

2026年前端开发工程师技能考核试题一、单选题（共10题，每题2分，合计20分）1.在React中，以下哪个钩子用于在组件卸载时执行清理操作？A.`useEffect()`B.`useLayoutEffect()`C.`useCallback()`D.`useMemo()`2.以下哪个CSS布局方案最适合实现复杂的网格布局？A.FlexboxB.GridC.FloatD.Position3.在Vue3中，以下哪个指令用于动态绑定样式？A.`v-bind:style`B.`v-style`C.`v-bind:`style`D.`v-for-style`4.以下哪个HTTP状态码表示“请求超时”？A.408B.429C.504D.5035.在TypeScript中，以下哪个关键字用于声明不可变数组？A.`const`B.`readonly`C.`final`D.`immutably`6.以下哪个前端框架支持服务器端渲染（SSR）？A.AngularB.SvelteC.Next.jsD.Vue.js7.在Webpack中，以下哪个插件用于压缩CSS文件？A.`MiniCssExtractPlugin`B.`TerserPlugin`C.`OptimizeCSSAssetsPlugin`D.`CSSMinimizerPlugin`8.以下哪个API用于在浏览器中存储离线数据？A.`localStorage`B.`sessionStorage`C.`indexedDB`D.`CacheStorage`9.在JavaScript中，以下哪个运算符用于严格等于？A.`==`B.`===`C.`=`D.`!=`10.以下哪个库用于前端性能监控？A.`Lighthouse`B.`WebPageTest`C.`Sentry`D.`NewRelic`二、多选题（共5题，每题3分，合计15分）1.以下哪些技术可用于实现前端性能优化？A.CodeSplittingB.LazyLoadingC.CachingD.MinificationE.WebWorkers2.以下哪些是CSS预处理器？A.SassB.LessC.StylusD.SCSSE.Bootstrap3.在React中，以下哪些生命周期钩子已废弃？A.`componentWillMount()`B.`componentWillUpdate()`C.`componentWillUnmount()`D.`componentDidMount()`E.`getSnapshotBeforeUpdate()`4.以下哪些是Web安全常见漏洞？A.XSSB.CSRFC.SQLInjectionD.CSRFE.DoS5.在Vue3中，以下哪些属于响应式系统的一部分？A.`ref`B.`reactive`C.`computed`D.`watch`E.`watchEffect`三、判断题（共10题，每题1分，合计10分）1.Flexbox只能实现一维布局。2.Webpack是VueCLI的默认构建工具。3.TypeScript是JavaScript的超集，必须编译后才能运行。4.CSSGrid可以嵌套使用，但Flexbox不能。5.CORS是跨域资源共享的简称。6.JWT是一种常用的身份验证机制。7.ReactHooks只能在函数组件中使用。8.WebP格式比JPEG更适合照片类图片。9.Babel是用于将ES6+代码转换为浏览器兼容代码的工具。10.`window.onclick`事件可以代替`document.onclick`。四、简答题（共5题，每题5分，合计25分）1.简述React中的`useContext`钩子及其应用场景。2.解释CSS中的`box-sizing:border-box`是什么意思，并说明其作用。3.简述HTTP和HTTPS的区别，并说明HTTPS的优势。4.在Vue3中，`ref`和`reactive`有什么区别？分别适用于哪些场景？5.简述前端性能优化的五个关键点。五、编程题（共3题，合计30分）1.（10分）编写一个React函数组件，实现一个简单的待办事项列表。要求：-支持添加待办事项（输入框+按钮）。-支持删除待办事项（每个待办事项右侧有删除按钮）。-使用`useState`和`useEffect`钩子管理状态。2.（10分）编写一个Vue3组件，实现一个简单的轮播图。要求：-包含三张图片，自动轮播（间隔3秒）。-支持手动切换（左右箭头按钮）。-使用`ref`和`watch`实现轮播逻辑。3.（10分）编写一个JavaScript函数，实现以下功能：-接收一个字符串参数，返回该字符串中所有单词的长度。-例如，输入`"Helloworld"`，返回`[5,5]`。-要求使用`reduce`方法实现。答案与解析一、单选题1.D.`useMemo()`解析：`useMemo`用于缓存计算结果，避免不必要的重新计算；`useEffect`用于副作用操作；`useLayoutEffect`在DOM变更后同步执行；`useCallback`用于缓存函数。2.B.`Grid`解析：Grid布局适合复杂二维网格，Flexbox适合一维布局。3.A.`v-bind:style`解析：Vue中绑定样式使用`v-bind:style`或简写为`:`。4.C.504解析：504表示“网关超时”，408是请求超时，429是过多请求，503是服务不可用。5.B.`readonly`解析：TypeScript中使用`readonly`修饰符声明不可变属性。6.C.Next.js解析：Next.js基于React，支持SSR，Angular和Vue.js没有原生SSR，Svelte编译后性能更优但无SSR。7.A.`MiniCssExtractPlugin`解析：用于提取CSS到单独文件，其他插件用于压缩或优化。8.C.`indexedDB`解析：`localStorage`和`sessionStorage`是键值存储，`indexedDB`是数据库，`CacheStorage`用于PWA缓存。9.B.`===`解析：`==`是弱类型比较，`===`是严格比较。10.C.`Sentry`解析：Sentry是前端错误监控工具，Lighthouse是性能测试，WebPageTest是网络性能测试，NewRelic是全栈监控。二、多选题1.A,B,C,D,E解析：CodeSplitting、LazyLoading、Caching、Minification、WebWorkers都是性能优化手段。2.A,B,C,D解析：Bootstrap是CSS框架，不是预处理器。3.A,B,E解析：`componentWillMount`、`componentWillUpdate`、`getSnapshotBeforeUpdate`已废弃，`componentDidMount`和`componentWillUnmount`仍在使用。4.A,B,C,E解析：DoS是拒绝服务攻击，不是漏洞类型。5.A,B,C,D,E解析：`ref`、`reactive`、`computed`、`watch`、`watchEffect`都是Vue3的响应式系统。三、判断题1.×解析：Flexbox可以实现一维和二维布局（嵌套）。2.√解析：VueCLI默认使用Webpack。3.√解析：TypeScript需要编译为JavaScript。4.×解析：Flexbox和Grid都可以嵌套使用。5.√解析：CORS是跨域资源共享。6.√解析：JWT常用于身份验证。7.√解析：Hooks只能在函数组件中使用。8.√解析：WebP支持透明背景且压缩率更高。9.√解析：Babel用于转译ES6+代码。10.×解析：`window.onclick`会触发所有窗口事件，建议使用`document.onclick`。四、简答题1.`useContext`钩子及其应用场景答：`useContext`用于跨组件传递数据，避免多层嵌套。应用场景：全局状态管理（如用户认证、主题）、减少props传递层级。2.`box-sizing:border-box`的作用答：`border-box`表示元素的宽高包含padding和border，默认是`content-box`（只包含内容宽高）。使用`border-box`可以简化布局计算。3.HTTP与HTTPS的区别及优势答：HTTP是明文传输，HTTPS通过TLS加密传输。HTTPS优势：安全性更高、SEO友好、防止中间人攻击。4.`ref`与`reactive`的区别答：`ref`用于单个值（如字符串、数字），`reactive`用于对象或数组。`ref`需要`.value`访问，`reactive`直接访问属性。5.前端性能优化五个关键点答：代码压缩（Minification）、懒加载（LazyLoading）、缓存（Caching）、减少重绘重排（使用`transform`替代`top`/`left`）、使用CDN。五、编程题1.React待办事项列表jsxfunctionTodoList(){const[todos,setTodos]=useState([]);const[inputValue,setInputValue]=useState('');constaddTodo=()=>{if(inputValue.trim()){setTodos([...todos,inputValue]);setInputValue('');}};constdeleteTodo=(index)=>{constnewTodos=todos.filter((_,i)=>i!==index);setTodos(newTodos);};return(<div><inputtype="text"value={inputValue}onChange={(e)=>setInputValue(e.target.value)}/><buttononClick={addTodo}>添加</button><ul>{todos.map((todo,index)=>(<likey={index}>{todo}<buttononClick={()=>deleteTodo(index)}>删除</button></li>))}</ul></div>);}2.Vue轮播图vue<template><div><button@click="prev">上一张</button><divv-for="(img,index)inimages":key="index"><img:src="img"v-show="current===index"/></div><button@click="next">下一张</button></div></template><script>import{ref,watch}from'vue';exportdefault{setup(){constimages=ref(['img1.jpg','img2.jpg','img3.jpg']);constcurrent=ref(0);constinterval=ref(null);watch(current,(newVal)=>{if(interval.value)clearInterval(interval.value);interval.value=setInterval(()=>{current.value=(newVal+1)%images.value.length;},3000);});constnext=()=>{current.value=(current.value+1)%images.value.length;};constprev=()=>{current.value=(current.value-1+images.valu