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

Web前端工程师笔试真题（含详细答案）说明：本套试题为企业通用前端笔试题型，涵盖HTML、CSS、JavaScript、浏览器原理、适配兼容、项目实操等核心考点，题型贴合真实招聘笔试难度，无偏题怪题，适合求职刷题、自测复习。考试时长：90分钟满分：100分一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.sectionC.iframeD.nav答案：C解析：iframe是HTML4原生标签，article、section、nav均为HTML5新增语义化标签，用于优化页面结构可读性。2.CSS中，以下选择器优先级最高的是（）A.类选择器B.行内样式C.标签选择器D.后代选择器答案：B解析：CSS优先级规则：!important>行内样式>ID选择器>类/伪类选择器>标签选择器>通配符选择器。3.下列关于box-sizing属性说法正确的是（）A.content-sizing：宽高包含padding和borderB.border-box：元素设置的宽高为整体尺寸，包含padding、borderC.padding-box：默认属性值D.border-box：宽高仅包含内容区答案：B解析：box-sizing默认值为content-box，宽高仅对应内容区；border-box模式下，width/height为元素总尺寸，padding和border不会撑大元素。4.JavaScript中，以下变量声明会报错的是（）A.vara=10B.letb=20C.constcD.d=30答案：C解析：const声明常量必须初始化赋值，不赋值会直接语法报错；var、let可先声明后赋值，未声明直接赋值的变量会成为全局变量（严格模式下报错）。5.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined答案：C解析：JS基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt；Array属于引用数据类型（对象类型）。6.关于this指向，普通函数独立调用时，浏览器环境下this指向（）A.函数本身B.window对象C.undefinedD.null答案：B解析：浏览器非严格模式下，普通函数独立调用this指向window；严格模式下this指向undefined。7.以下方法不会改变原数组的是（）A.pushB.spliceC.mapD.reverse答案：C解析：push、splice、reverse均会直接修改原数组；map、filter、slice等方法返回新数组，不改变原数组。8.异步代码执行顺序中，微任务优先于宏任务执行，以下属于微任务的是（）A.setTimeoutB.setIntervalC.Promise.thenD.DOM渲染答案：C解析：常见宏任务：setTimeout、setInterval、AJAX请求、DOM事件；常见微任务：Promise.then/catch/finally、async/await、queueMicrotask。9.CSS中实现元素水平垂直居中，适合未知宽高元素的方案是（）A.margin:0autoB.绝对定位+transform平移C.设置固定margin值D.text-align:center答案：B解析：绝对定位top/left设为50%，再通过transform:translate(-50%,-50%)居中，适配任意宽高元素；margin居中仅适配固定宽高块级元素。10.下列关于防抖和节流说法错误的是（）A.防抖是触发事件后延迟执行，多次触发重新计时B.节流是固定时间内只执行一次C.搜索框输入建议适合用节流D.窗口resize事件适合用节流答案：C解析：搜索框输入需要停止输入后再请求接口，适合用防抖；高频持续触发的事件（resize、滚动、点击频繁触发）适合用节流。11.HTTP状态码404代表的含义是（）A.服务器错误B.请求资源不存在C.请求被禁止D.请求超时答案：B解析：404：资源未找到；403：禁止访问；500：服务器内部错误；408：请求超时。12.Vue中，以下关于v-forkey说法正确的是（）A.key可以使用索引，无任何隐患B.key用于虚拟DOMdiff算法识别节点身份C.不写key会报错D.key值可以重复答案：B解析：key是节点唯一标识，用于diff算法精准更新DOM；索引作为key会引发列表更新错乱问题；不写key不会报错，会默认索引匹配；key必须唯一。13.清除浮动最推荐、无副作用的方式是（）A.父元素设置overflow:hiddenB.空标签clear:bothC.伪类清除浮动D.父元素设置高度答案：C解析：伪类清除浮动（:after）不增加冗余DOM结构，不隐藏溢出内容，是项目中最常用的最优方案。14.以下关于原型链说法正确的是（）A.所有对象的原型最终指向nullB.Ototype的原型是nullC.函数没有原型对象D.原型链不能实现属性继承答案：B解析：Ototype是JS顶层原型，其__proto__指向null；所有普通对象通过原型链向上继承属性和方法。15.移动端适配中，rem单位的基准是（）A.父元素字体大小B.根元素html字体大小C.屏幕宽度D.元素自身字体大小答案：B解析：rem是相对单位，1rem等于html根元素的font-size值；em相对父元素字体大小。二、填空题（共10空，每空2分，共20分）1.HTML中，______属性可以实现元素拖拽。答案：draggable2.CSSflex布局中，______属性控制主轴对齐方式，______属性控制侧轴对齐方式。答案：justify-content、align-items3.JavaScript中，判断数组类型的精准方法是______。答案：Array.isArray()4.阻止事件冒泡的方法是______，阻止默认事件的方法是______。答案：event.stopPropagation()、event.preventDefault()5.异步编程中，______可以将异步回调改写为同步写法。答案：async/await6.Vue中实现父子组件双向绑定的指令是______。答案：v-model7.浏览器从输入网址到页面渲染完成，核心流程是：DNS解析、______、响应解析、页面渲染。答案：发送HTTP请求三、简答题（共4题，每题5分，共20分）1.简述HTML语义化的意义？参考答案：1.结构清晰：代码层级分明，可读性强，便于团队维护；2.利于SEO：搜索引擎可通过语义标签识别页面结构、核心内容，提升收录权重；3.适配无障碍：屏幕阅读器可精准识别页面模块，适配残障人士浏览；4.兼容性更好：标准语义标签适配各版本浏览器，减少兼容问题。2.简述var、let、const的区别？参考答案：1.变量提升：var存在变量提升，let、const不存在；2.作用域：var为函数作用域，let、const为块级作用域（{}内部生效）；3.重复声明：var允许重复声明，let、const禁止重复声明；4.赋值规则：var、let可随意修改值，const声明常量，必须初始化，且引用类型可修改内部属性，基本类型不可修改。3.简述浏览器缓存的分类及作用？参考答案：浏览器缓存分为强缓存和协商缓存：1.强缓存：通过Cache-Control、Expires控制，资源未过期时，直接读取本地缓存，不发送请求，加载速度最快；2.协商缓存：强缓存失效后，携带If-Modified-Since、ETag请求服务器，资源未更新则返回304，使用本地缓存；资源更新则返回新资源；核心作用：减少网络请求、降低服务器压力、提升页面加载速度、节省用户流量。4.简述Vue双向绑定原理？参考答案：Vue2核心原理：数据劫持+发布订阅模式。通过Object.defineProperty()劫持data中数据的getter和setter，数据修改时触发setter，通知订阅者更新视图；视图输入内容修改时，同步更新数据，实现双向绑定。Vue3改用Proxy代理整个对象，可监听数组、新增属性、删除属性，解决了Object.defineProperty的监听缺陷。四、代码实操题（共3题，共30分）1.写出伪类清除浮动的完整CSS代码（10分）参考答案：PlainText

.clearfix:after{

content:'';

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

zoom:1;/*兼容低版本IE*/

}使用方式：给浮动元素的父级添加clearfix类名即可。2.手写一个简单的防抖函数（10分）参考答案：PlainText

//防抖：延迟执行，多次触发重置计时

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

//每次触发清除原有定时器

if(timer)clearTimeout(timer);

//重新计时执行函数

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay);

}

}适用场景：搜索输入、表单输入、按钮频繁点击等场景。3.数组去重：手写JS方法实现数组简单去重（两种方式优先）（10分）参考答案：方法一：ES6Set去重（最简）PlainText

functionuniqueArr(arr){

return[...newSet(arr)];

}方法二：遍历判断去重（兼容低版本浏览器）PlainText

functionuniqueArr(arr){

constres=[];

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item);

}

}