Web前端开发工程师笔试真题（含详细答案）

Web前端开发工程师笔试真题（含详细答案）适用场景：初级/中级前端工程师招聘笔试考试时长：90分钟满分：100分题型说明：选择题、填空题、简答题、编程题、实操分析题一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.headerB.footerC.iframeD.article2.CSS中，以下选择器优先级最高的是（）A.类选择器B.标签选择器C.行内样式D.后代选择器3.关于box-sizing属性，取值为border-box时，下列说法正确的是（）A.元素宽度包含内容区、内边距、边框、外边距B.元素宽度仅包含内容区C.元素宽度包含内容区、内边距、边框D.元素宽度包含内容区、内边距4.JavaScript中，以下哪个方法可以阻止事件冒泡（）A.preventDefault()B.stopPropagation()C.stopImmediatePropagation()D.returnfalse5.以下关于var、let、const的说法，错误的是（）A.var存在变量提升，没有块级作用域B.let和const存在块级作用域，不存在变量提升C.const声明的变量不可修改，必须初始化D.let可以重复声明变量6.数组方法中，会改变原数组的是（）A.mapB.filterC.spliceD.slice7.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined8.Vue2中，用于实现父子组件双向数据绑定的指令是（）A.v-bindB.v-modelC.v-onD.v-for9.浏览器渲染页面的正确流程是（）A.构建DOM树→构建CSSOM树→生成渲染树→布局→绘制B.构建CSSOM树→构建DOM树→生成渲染树→布局→绘制C.构建DOM树→生成渲染树→构建CSSOM树→布局→绘制D.布局→构建DOM树→构建CSSOM树→生成渲染树→绘制10.以下HTTP请求方法中，用于资源删除的是（）A.GETB.POSTC.DELETED.PUT11.清除浮动最常用、兼容性最好的方式是（）A.父元素设置overflow:hiddenB.空div清除浮动C.父元素浮动D.伪元素清除浮动12.JavaScript中，==和===的区别说法正确的是（）A.两者无区别B.==先转换类型再比较，===严格匹配类型和值C.===先转换类型再比较，==严格匹配类型和值D.==只比较值，===只比较类型13.Vue中，created和mounted钩子函数的区别，说法错误的是（）A.created在实例创建完成后立即执行B.created阶段可以获取DOM元素C.mounted阶段DOM已挂载完成D.异步请求通常可放在created或mounted中14.以下不属于前端性能优化手段的是（）A.图片懒加载B.代码压缩打包C.频繁操作DOMD.减少HTTP请求15.ES6中，关于Promise的说法正确的是（）A.Promise是同步执行的B.Promise状态可以多次修改C.Promise有pending、fulfilled、rejected三种状态D.Promise无法处理异步回调地狱二、填空题（共10空，每空1分，共10分）1.HTML中，________属性用于设置元素的唯一标识，________属性用于设置元素的类名。2.CSS弹性布局中，________属性用于设置主轴方向，________属性用于主轴对齐方式。3.JavaScript中，判断变量类型为数组的精准方法是________。4.事件循环中，宏任务包含________、________，微任务包含Promise.then、async/await等。5.Vue组件中，________用于接收父组件传递的数据，________用于向父组件触发事件。三、简答题（共5题，每题6分，共30分）1.简述CSS居中的常用方式（至少写出3种）。2.简述原型和原型链的概念及作用。3.简述Vue的双向数据绑定原理。4.简述浏览器缓存的分类及区别。5.说说你对前端跨域的理解，以及常用的跨域解决方案。四、编程题（共2题，每题10分，共20分）1.手写JavaScript防抖函数，要求支持立即执行和延迟执行两种模式。2.手写一个简单的数组去重方法，要求兼容基本数据类型，写出两种不同实现方式。五、综合分析题（共1题，10分）简述前端页面加载白屏、卡顿的常见原因，以及对应的优化解决方案。参考答案及详细解析一、单项选择题答案及解析1.C解析：iframe是HTML4原有标签，header、footer、article均为HTML5新增语义化标签。2.C解析：CSS选择器优先级规则：行内样式>ID选择器>类/伪类选择器>标签选择器>通配符选择器。3.C解析：box-sizing:border-box（怪异盒模型），元素设置的宽高为总尺寸，包含内容区、内边距、边框，不包含外边距；content-box为标准盒模型，宽高仅为内容区尺寸。4.B解析：preventDefault()阻止默认事件；stopPropagation()阻止事件冒泡；stopImmediatePropagation()阻止冒泡且阻止同元素后续同类事件执行；returnfalse在部分场景可同时阻止默认事件和冒泡，兼容性不稳定。5.D解析：let和const不允许重复声明同一变量，var可以重复声明。const声明的常量不可修改引用地址，基础类型值无法修改，引用类型可修改内部属性。6.C解析：splice可对数组进行增删改操作，直接修改原数组；map、filter、slice均返回新数组，不改变原数组。7.C解析：JS基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt；Array属于引用数据类型。8.B解析：v-model实现表单元素双向数据绑定；v-bind单向绑定属性；v-on绑定事件；v-for循环渲染。9.A解析：浏览器渲染核心流程：解析HTML生成DOM树→解析CSS生成CSSOM树→两者结合生成渲染树→布局（计算元素位置尺寸）→绘制（渲染像素到页面）。10.C解析：GET查询资源、POST提交资源、PUT更新资源、DELETE删除资源。11.D解析：伪元素清除浮动（:after）兼容性最好，无冗余DOM节点，是企业开发主流方案；overflow:hidden会隐藏溢出内容，有使用限制。12.B解析：==宽松相等，会进行隐式类型转换后比较值；===严格相等，必须类型和值完全一致才返回true。13.B解析：created阶段仅完成数据初始化，DOM尚未挂载，无法获取DOM元素；mounted阶段DOM挂载完成，可操作DOM、发送异步请求。14.C解析：频繁操作DOM会引发多次重排重绘，降低页面性能，属于性能问题；其余选项均为标准前端优化手段。15.C解析：Promise是异步编程解决方案，状态一旦从pending变为fulfilled/rejected就不可修改，可解决回调地狱问题。二、填空题答案1.id、class2.flex-direction、justify-content3.Array.isArray()4.setTimeout、setInterval（答案不唯一，ajax、DOM事件也可）5.props、$emit三、简答题详细答案1.简述CSS居中的常用方式（至少写出3种）（1）弹性布局居中：给父元素设置display:flex，同时添加justify-content:center（水平居中）、align-items:center（垂直居中），代码简洁、兼容性好，是主流居中方式。（2）绝对定位+transform居中：子元素设置position:absolute，top:50%、left:50%，再通过transform:translate(-50%,-50%)实现居中，无需固定宽高，适配性强。（3）绝对定位+margin居中：子元素设置绝对定位，上下左右距离为0，margin:0auto，需要元素设置固定宽高，适合固定尺寸元素居中。（4）文本居中：行内/行内块元素水平居中可给父元素设置text-align:center，单行文本垂直居中可设置line-height等于父元素高度。2.简述原型和原型链的概念及作用原型：每个JS函数都有一个prototype属性，即显式原型，是一个对象，用于存储该构造函数所有实例共享的属性和方法；每个实例对象都有__proto__属性，即隐式原型，指向构造函数的prototype。原型链：当访问一个对象的属性或方法时，若当前对象不存在该属性/方法，就会通过__proto__向上查找对应的原型对象，层层向上追溯，直到找到Ototype，最终指向null，这个链式结构就是原型链。核心作用：实现属性和方法的共享，减少内存占用，实现代码复用；同时支持JS的继承机制，让子类可以继承父类的属性和方法。3.简述Vue的双向数据绑定原理Vue2双向数据绑定核心是数据劫持+发布订阅模式，通过Object.defineProperty()劫持对象的属性读取和修改操作。1.数据劫持：遍历data中的所有属性，通过Object.defineProperty为每个属性设置getter和setter；读取数据时触发getter，收集依赖（记录用到该数据的视图）；修改数据时触发setter，通知依赖更新视图。2.发布订阅：通过Watcher观察者监听数据变化，Dep订阅器收集所有Watcher，数据更新时Dep通知所有Watcher执行更新，刷新页面视图。3.视图更新数据：通过v-model指令绑定表单元素，监听表单的input事件，用户输入内容时自动更新data中的数据，实现视图驱动数据变化。补充：Vue3使用Proxy替代Object.defineProperty，可监听对象、数组的整体变化，解决了Vue2无法监听数组下标修改、对象新增属性的问题。4.简述浏览器缓存的分类及区别浏览器缓存分为强缓存和协商缓存，优先级：强缓存>协商缓存。1.强缓存：无需向服务器发送请求，直接读取本地缓存，返回状态码200。通过Cache-Control（max-age）、Expires控制。Cache-Control优先级更高，基于相对时间；Expires基于绝对时间，受本地系统时间影响，兼容性差。2.协商缓存：强缓存失效后，浏览器携带缓存标识向服务器发送请求，服务器判断缓存是否有效。有效则返回304，使用本地缓存；失效则返回200和新资源。协商缓存两组标识：Last-Modified/If-Modified-Since（基于文件修改时间）、ETag/If-None-Match（基于文件哈希值，优先级更高，精度更高）。核心区别：强缓存不发请求，协商缓存需要发送请求校验；强缓存由客户端控制，协商缓存由服务端校验。5.说说你对前端跨域的理解，以及常用的跨域解决方案跨域本质：浏览器的同源策略限制，同源要求协议、域名、端口号三者完全一致，任意一个不同即为跨域。同源策略是浏览器的安全机制，防止恶意网站窃取本地数据。常用解决方案：1.CORS跨域资源共享：服务端设置Access-Control-Allow-Origin响应头，允许指定域名跨域请求，是目前主流的正式解决方案。2.代理跨域：开发环境通过webpack/vite配置devServer代理，将前端请求转发到后端服务器，规避浏览器跨域限制。3.JSONP：利用script标签不受同源限制的特性实现跨域，仅支持GET请求，兼容性好，无法处理POST请求，现在使用较少。4.Nginx反向代理：线上环境通过Nginx配置代理，统一域名端口，实现跨域请求转发。四、编程题详细答案1.手写防抖函数（支持立即执行、延迟执行）防抖核心：频繁触发事件时，仅在指定时间内无再次触发时，才执行一次回调；分为立即执行（首次触发立即执行，后续延迟不触发）和延迟执行（触发后延迟执行，频繁触发重置延迟时间）。javascript

//防抖函数

functiondebounce(fn,delay,immediate=false){

lettimer=null;

returnfunction(...args){

//每次触发清空定时器

if(timer)clearTimeout(timer);

//立即执行模式：无定时器则立即执行

if(immediate&&!timer){

fn.apply(this,args);

}

//延迟执行模式

timer=setTimeout(()=>{

//非立即执行触发回调

if(!immediate){

fn.apply(this,args);

}

timer=null;

},delay);

}

}

//使用示例

//延迟执行

constdelayFn=debounce(()=>console.log('延迟执行'),500);

//立即执行

constimmediateFn=debounce(()=>console.log('立即执行'),500,true);

2.两种数组去重实现方式方式一：ES6Set去重（简洁高效，支持所有基本数据类型）javascript

functionuniqueArr1(arr){

returnArray.from(newSet(arr));

}

//测试

console.log(uniqueArr1([1,2,2,3,3,'a','a',null,null]));

方式二：遍历判断去重（基础原生写法，兼容性极强）javascript

functionuniqueArr2(arr){

constres=[];

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item);

}

});

returnres;

}

//测试

console.log(uniqueArr2([1,2