2026年前端工程师笔试模拟题

2026年前端工程师笔试模拟题一、单选题（共5题，每题2分，总计10分）1.下列哪个CSS选择器具有最高的优先级？A.`id选择器`B.`类选择器`C.`标签选择器`D.`属性选择器`2.在JavaScript中，`let`和`var`的主要区别是什么？A.`let`有块级作用域，`var`没有B.`let`可以重新赋值，`var`不可以C.`let`声明的变量在全局作用域中不可删除，`var`可以D.`let`和`var`没有区别3.以下哪个HTTP状态码表示“请求成功”？A.404B.500C.200D.3024.React中，以下哪个钩子用于处理副作用？A.`useState`B.`useEffect`C.`useContext`D.`useRef`5.在Vue中，`v-model`的作用是什么？A.绑定DOM事件B.管理组件生命周期C.双向数据绑定D.路由跳转二、多选题（共5题，每题3分，总计15分）6.以下哪些是CSS预处理器？A.SassB.LessC.StylusD.Bootstrap7.JavaScript中的事件流包括哪些阶段？A.捕获阶段B.阶段二C.冒泡阶段D.处理阶段8.以下哪些是Web前端性能优化的方法？A.CDN加速B.图片懒加载C.代码压缩D.HTTP/29.CSSGrid布局和Flexbox布局的区别有哪些？A.Grid是二维布局，Flexbox是一维布局B.Grid适用于复杂布局，Flexbox适用于简单布局C.Grid的性能优于FlexboxD.Grid和Flexbox没有区别10.以下哪些是前端框架/库？A.ReactB.AngularC.VueD.jQuery三、填空题（共5题，每题2分，总计10分）11.CSS中，`box-sizing:border-box;`的作用是______。答案：将padding和border包含在宽度和高度内12.JavaScript中，`Promise`的三个状态是______、______和______。答案：pending、fulfilled、rejected13.HTTP请求方法中，用于删除资源的是______。答案：DELETE14.CSS中，`flex-grow`属性用于______。答案：控制Flex项的扩展比例15.在React中，用于管理组件状态的钩子是______。答案：useState四、简答题（共5题，每题4分，总计20分）16.简述前端跨域问题的解决方案。答案：1.CORS（跨域资源共享）：服务器设置`Access-Control-Allow-Origin`头。2.JSONP（仅支持GET请求）：动态创建`<script>`标签调用JSONP接口。3.代理：在后端或开发工具中设置代理转发请求。4.Nginx反向代理：通过Nginx配置实现跨域转发。17.解释什么是“前端性能优化”，并列举三种优化方法。答案：前端性能优化是指提升页面加载速度和运行效率，包括：1.资源压缩：压缩CSS、JS、图片等文件。2.懒加载：对非首屏资源延迟加载。3.缓存利用：使用HTTP缓存头或ServiceWorker缓存静态资源。18.什么是CSSHack？为什么需要使用？答案：CSSHack是指针对不同浏览器编写特定CSS规则，解决浏览器兼容性问题。例如：css/针对IE6/body{background:#fff;\标准规则\}htmlbody{background:#eee;\IE6规则\}需要的原因：早期浏览器（如IE6）存在解析差异，现代浏览器已较少使用。19.简述React中的虚拟DOM（VirtualDOM）的工作原理。答案：1.组件状态变化时，先在内存中构建新的虚拟DOM树。2.比较新旧虚拟DOM树，找出差异。3.仅对差异部分进行DOM更新，减少实际DOM操作。20.解释什么是Web语义化，并举例说明。答案：Web语义化是指使用具有明确含义的HTML标签，提升可读性和SEO。例如：-`<header>`：页面头部-`<nav>`：导航栏-`<main>`：主要内容区域-`<article>`：独立内容块五、代码题（共3题，每题10分，总计30分）21.实现一个简单的计数器组件，支持增加和减少操作。要求：使用ReactHooks实现，组件需显示当前计数，并包含“+”和“-”按钮。示例代码：jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><h1>{count}</h1><buttononClick={()=>setCount(count-1)}>-</button><buttononClick={()=>setCount(count+1)}>+</button></div>);}exportdefaultCounter;22.实现一个CSS动画效果：使一个正方形从左向右平移，动画持续3秒。要求：使用CSS完成，无需JavaScript。示例代码：css@keyframesslide{from{transform:translateX(0);}to{transform:translateX(100%);}}.square{width:100px;height:100px;background-color:red;animation:slide3slinearinfinite;}23.编写一个JavaScript函数，实现数组去重，输入：`[1,2,2,3,4,4,5]`，输出：`[1,2,3,4,5]`。示例代码：javascriptfunctionunique(arr){return[...newSet(arr)];}constinput=[1,2,2,3,4,4,5];console.log(unique(input));//[1,2,3,4,5]六、开放题（共1题，10分）24.描述一次你解决前端性能问题的经历，包括问题现象、排查过程和解决方案。答案：问题现象：某电商页面加载缓慢，首屏加载时间超过5秒，影响用户体验。排查过程：1.网络抓包：发现图片资源过大（2MB），且未使用CDN。2.性能分析：CSS文件存在冗余规则，导致渲染阻塞。3.代码审查：发现部分JS依赖未按需加载。解决方案：1.优化图片：使用WebP格式压缩图片，并配置CDN加速。2.CSS优化：删除未使用的样式，合并文件。3.按需加载：将非首屏JS模块化，使用`<scriptdefer>`或Webpack代码分割。答案与解析一、单选题答案与解析1.A解析：CSS优先级顺序：`id>类>标签>伪类>伪元素`。2.A解析：`let`有块级作用域（`{}`内有效），`var`是全局/函数作用域。3.C解析：200表示请求成功，404表示未找到，500表示服务器错误。4.B解析：`useEffect`用于处理副作用（如数据获取、DOM操作）。5.C解析：`v-model`实现表单与数据的双向绑定。二、多选题答案与解析6.A、B、C解析：Bootstrap是框架，不是预处理器。7.A、C解析：事件流分捕获和冒泡阶段。8.A、B、C解析：HTTP/2虽能提升性能，但更多是协议优化，非前端直接操作。9.A、B解析：Grid是二维，Flexbox是一维；Grid适合复杂布局。10.A、B、C解析：jQuery是库，非框架（已逐渐被淘汰）。三、填空题答案与解析11.将padding和border包含在宽度和高度内解析：`border-box`使元素总宽=content+padding+border。12.pending、fulfilled、rejected解析：Promise的三种状态，代表异步操作结果。13.DELETE解析：HTTPDELETE方法用于删除资源。14.控制Flex项的扩展比例解析：`flex-grow`决定Flex项如何占据剩余空间。15.useState解析：`useState`是React状态管理钩子。四、简答题答案与解析16.跨域解决方案解析：CORS是主流方案，JSONP仅支持GET，代理适合开发环境。17.性能优化解析：核心是减少加载时间（如压缩、缓存）和提升运行效率（如懒加载）。18.CSSHack解析：早期浏览器解析差异导致，现代已少用。19.虚拟DOM解析：通过内存中的DOM树比对，减少实际DOM操作。20.语义化解析：使用`<header>`、`<nav>`等标签提升可读性和SEO。五、