线上考评系统前端开发工程师岗位招聘考试试卷及答案

线上考评系统前端开发工程师岗位招聘考试试卷及答案填空题（共10题，每题1分）1.HTML中用于定义页面元信息的标签是______。2.CSS中设置元素浮动的属性是______。3.JavaScript中未初始化的变量值为______。4.Vue3中创建响应式基础数据的函数是______。5.React中componentDidMount执行于组件的______阶段。6.图片懒加载常用的HTML属性是______。7.Webpack处理CSS文件的核心loader是______。8.JavaScript数组map方法返回______。9.HTML语义化强调标签是______。10.CSS3实现平滑过渡的属性是______。答案1.<meta>2.float3.undefined4.ref5.挂载6.loading="lazy"7.css-loader8.新数组9.<em>10.transition单项选择题（共10题，每题2分）1.下列属于HTML语义化标签的是？A.<div>B.<header>C.<span>D.<b>2.CSS选择器优先级最高的是？A.类选择器B.ID选择器C.标签选择器D.通配符3.JS中删除数组最后一个元素的方法是？A.pop()B.push()C.shift()D.unshift()4.Vue2中data选项的类型是？A.函数B.对象C.字符串D.数字5.React类组件state更新后页面会？A.立即重渲染B.等待事件循环C.不渲染D.随机渲染6.属于前端工程化工具的是？A.WebpackB.Node.jsC.MySQLD.Python7.CSSflex布局主轴默认方向是？A.水平（row）B.垂直（column）C.水平反向D.垂直反向8.JS箭头函数的this指向？A.全局B.父级作用域C.自身D.undefined9.HTML定义列表项的标签是？A.<ul>B.<ol>C.<li>D.<dl>10.减少HTTP请求的做法是？A.图片压缩B.合并CSS/JSC.启用GzipD.懒加载答案1.B2.B3.A4.B5.A6.A7.A8.B9.C10.B多项选择题（共10题，每题2分）1.HTML5新增语义化标签包括？A.<article>B.<aside>C.<nav>D.<section>2.CSS盒模型相关属性有？A.box-sizingB.flexC.gridD.border-box3.JS事件冒泡的特点是？A.从目标向上传播B.可通过stopPropagation阻止C.从根向下传播D.可通过preventDefault阻止4.Vue3组合式API包括？A.refB.reactiveC.computedD.watch5.React常用Hooks有？A.useStateB.useEffectC.useContextD.useReducer6.前端性能优化方法有？A.图片懒加载B.代码分割C.HTTP/2D.避免重排7.JS数组方法包括？A.forEachB.filterC.findD.reduce8.CSS定位属性有？A.positionB.topC.leftD.z-index9.前端包管理工具有？A.npmB.yarnC.pnpmD.Webpack10.HTML表单元素包括？A.<input>B.<textarea>C.<select>D.<button>答案1.ABCD2.AD3.AB4.ABCD5.ABCD6.ABCD7.ABCD8.ABCD9.ABC10.ABCD判断题（共10题，每题2分）1.HTML<img>标签必须包含src属性。2.CSSmargin属性可以设置负值。3.JS中null==undefined返回true。4.Vuev-bind指令用于绑定事件。5.React函数组件不能使用state。6.Webpackentry是入口文件配置。7.CSStransition只能过渡数值属性。8.JS箭头函数可作为构造函数。9.localStorage数据页面关闭后丢失。10.AJAX用于异步数据交互。答案1.对2.对3.对4.错5.错6.对7.错8.错9.错10.对简答题（共4题，每题5分）1.简述HTML语义化的作用。答案：HTML语义化是用<header>、<article>等语义标签替代<div>。作用包括：①提升代码可读性，便于团队协作；②帮助搜索引擎理解页面结构，优化SEO；③支持屏幕阅读器等辅助工具，提升可访问性；④简化CSS/JS选择器，降低维护成本。2.简述JS闭包的概念及作用。答案：闭包是函数能访问并记住外部词法作用域的变量（即使函数在外部执行）。形成条件：函数嵌套、内部函数引用外部变量、内部函数被外部引用。作用：①隐藏私有变量，实现数据封装；②保存执行上下文，避免变量被回收；③模块化，减少全局变量污染。3.简述Vue3ref与reactive的区别。答案：①ref用于基础类型（数字、字符串），返回响应式对象，访问需加.value；②reactive用于引用类型（对象、数组），直接返回代理，无需.value；③ref可在模板直接渲染（Vue自动解包），reactive需通过变量访问；④ref适合单个基础数据，reactive适合复杂结构。4.简述重排与重绘的区别。答案：重排（回流）：元素几何属性（宽高、位置）改变，浏览器重新计算布局，性能消耗大；重绘：元素视觉属性（颜色、背景）改变，无需重新布局，仅绘制新样式。优化：减少重排（批量修改样式、用flex），避免不必要重绘（减少视觉属性频繁修改）。讨论题（共2题，每题5分）1.谈谈对前端工程化的理解及常用工具。答案：前端工程化是通过工具规范流程，提升效率与质量。核心包括：依赖管理、构建打包、模块化、自动化测试。常用工具：①包管理：npm/yarn（依赖管理）；②构建：Webpack/Vite（打包、压缩）；③代码质量：ESLint（语法检查）、Prettier（格式化）；④CI/CD：GitHubActions（自动化部署）。工程化可减少重复工作，保证代码一致性。2.简述React类组件与函数组件的区别及Hooks意义。答案：区别：①类组件继承React.Component，用this.state/ps，