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

Web前端工程师笔试真题（含详细解析答案）适用人群：初级前端开发、实习生、校招面试考试时长：90分钟满分：100分题型说明：选择题、填空题、简答题、编程题，所有答案附带详细思路解析，贴合企业实际面试考点。一、单项选择题（共10题，每题3分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.sectionC.iframeD.nav答案：C详细解析：iframe是HTML4就存在的内嵌框架标签，不属于HTML5新增语义化标签。article（文章区块）、section（内容区块）、nav（导航区块）均为HTML5核心语义化新增标签，用于优化页面结构可读性和SEO。2.CSS中，以下选择器优先级最高的是（）A.类选择器B.行内样式C.标签选择器D.通配符选择器答案：B详细解析：CSS选择器优先级从高到低排序：行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器。行内样式直接写在标签属性中，优先级最高。3.以下关于JavaScriptvar、let、const说法错误的是（）A.var存在变量提升，无块级作用域B.let和const存在块级作用域C.const声明的变量不可修改D.let不存在变量提升，存在暂时性死区答案：C详细解析：const并非完全不可修改，其核心是禁止变量重新赋值。如果const声明的是引用类型（数组、对象），可以修改其内部属性和元素，只是不能重新赋值。其余选项均为ES6变量声明的正确特性。4.JavaScript中，以下返回false的表达式是（）A.!!0B.!!1C.!![]D.!!{}答案：A详细解析：JS中假值包含：0、null、undefined、''、NaN、false。!!为双重取反，可将值转为布尔值。!!0结果为false，空数组、空对象均为真值，取反后为true。5.以下哪种事件流阶段是事件触发的完整顺序（）A.目标阶段→捕获阶段→冒泡阶段B.捕获阶段→目标阶段→冒泡阶段C.冒泡阶段→捕获阶段→目标阶段D.捕获阶段→冒泡阶段→目标阶段答案：B详细解析：DOM事件流分为三个阶段，顺序固定：首先是捕获阶段（从根节点向下遍历到目标元素），其次是目标阶段（触发目标元素事件），最后是冒泡阶段（从目标元素向上遍历到根节点）。6.实现CSS垂直居中，以下方案不适用于未知宽高元素的是（）A.flex布局居中B.grid布局居中C.transform偏移居中D.margin:0auto答案：D详细解析：margin:0auto仅能实现水平居中，且需要元素设置固定宽度，无法实现垂直居中。flex、grid、transform方案均适配未知宽高元素的水平+垂直居中。7.以下不属于HTTP请求方法的是（）A.GETB.POSTC.SENDD.PUT答案：C详细解析：HTTP标准请求方法包含GET、POST、PUT、DELETE、HEAD、OPTIONS等，无SEND方法，属于干扰选项。8.Vue中，以下关于v-if和v-show说法正确的是（）A.v-if切换开销更小B.v-show是通过销毁/创建DOM实现C.v-if是惰性渲染D.v-show不支持频繁切换答案：C详细解析：v-if为惰性渲染，条件为false时直接销毁DOM节点，切换需要重构DOM，开销大，适合切换频率低的场景；v-show通过display属性控制显示隐藏，DOM始终存在，切换开销小，适合频繁切换场景。9.JavaScript中，以下关于原型和原型链说法错误的是（）A.所有函数都有prototype原型对象B.所有对象都有__proto__原型指针C.Ototype的__proto__指向自身D.原型链的终点是null答案：C详细解析：Ototype是原型链的最顶层，其__proto__属性为null，并非指向自身。其余选项均为JS原型链的核心基础特性。10.以下哪种方式不能阻止事件冒泡（）A.event.stopPropagation()B.event.cancelBubble=trueC.returnfalseD.event.preventDefault()答案：D详细解析：event.preventDefault()的作用是阻止默认事件（如a标签跳转、表单提交），无法阻止事件冒泡。stopPropagation()、cancelBubble、returnfalse（原生事件中）均可阻止冒泡。二、填空题（共5题，每题4分，共20分）1.CSS盒子模型分为标准盒模型和怪异盒模型，标准盒模型总宽度=__________，怪异盒模型通过__________属性开启。答案：内容宽度+内边距+边框+外边距；box-sizing:border-box详细解析：标准盒模型（content-box）宽高仅对应内容区，边框、内边距会撑开盒子；怪异盒模型（border-box）宽高包含内容、内边距、边框，不会撑开盒子，是开发常用模式。2.JavaScript中，遍历数组的常用方法有__________、__________、__________（写出3个即可）。答案：forEach、map、filter（也可填for循环、some、every、reduce）详细解析：forEach用于单纯遍历；map用于遍历并返回新数组；filter用于筛选数组元素，均为前端开发高频数组遍历方法。3.跨域的核心原因是浏览器的__________策略，跨域是指__________、__________、端口任一不同。答案：同源策略；协议、域名详细解析：浏览器同源策略限制不同源页面的资源交互，同源要求协议、域名、端口三者完全一致，任一不同即触发跨域。4.Vue组件中，props传参默认是__________（单向/双向）数据流，__________（可以/不可以）直接修改父组件传递的props值。答案：单向；不可以详细解析：Vue遵循单向数据流原则，父组件数据更新会传递给子组件，但子组件不能直接修改props，否则会触发报错，如需修改需通过data接收或计算属性处理。5.JS中null和undefined的区别：__________表示变量声明未赋值，__________表示空对象指针。答案：undefined；null详细解析：undefined：变量已声明但未初始化、函数无返回值、对象不存在的属性；null：人为定义的空值，特指空对象指针，用于主动清空对象引用。三、简答题（共4题，每题8分，共32分）1.简述HTTP和HTTPS的区别？详细答案：1.安全性：HTTP是超文本传输协议，明文传输数据，无加密，存在数据篡改、窃听风险；HTTPS是HTTP+SSL/TLS加密协议，数据加密传输，安全性极高。2.端口不同：HTTP默认端口80，HTTPS默认端口443。3.证书要求：HTTP无需证书；HTTPS需要CA机构颁发的SSL证书，部署成本更高。4.传输速度：HTTP无加密解密过程，传输速度更快；HTTPS多了证书校验、加密解密流程，速度略慢。5.合规性：HTTPS可被浏览器信任，显示安全标识，主流浏览器已对HTTP网站标记不安全。2.简述JS的宏任务和微任务，以及事件循环执行顺序？详细答案：宏任务和微任务是JS异步任务的两种分类，JS通过事件循环机制处理异步代码，避免阻塞主线程。1.微任务：优先级更高，执行时机更早，常见有Promise.then/catch/finally、async/await、queueMicrotask。2.宏任务：优先级较低，常见有setTimeout、setInterval、AJAX请求、DOM事件。完整执行顺序：①执行主线程同步代码，从上到下依次执行；②同步代码执行完毕，清空所有微任务队列中的任务；③微任务清空后，执行一个宏任务队列中的任务；④重复②③步骤，形成事件循环。3.简述Vue双向绑定原理？详细答案：Vue2的双向数据绑定核心是数据劫持+发布订阅模式，通过Object.defineProperty()劫持data中数据的getter和setter方法。1.数据劫持：遍历data所有属性，通过defineProperty为属性添加get、set，监听数据读取和修改；2.视图更新：数据发生修改时，触发setter方法，通知订阅器Watcher更新视图；3.视图驱动数据：通过v-model指令监听表单元素的input事件，视图输入内容变化时，自动更新对应数据；4.核心逻辑：数据变→视图变，视图变→数据变，实现双向同步。补充：Vue3改用Proxy实现数据劫持，可监听数组、新增属性等，解决了Vue2的监听缺陷。4.常见的前端跨域解决方案有哪些？至少写出4种详细答案：1.后端配置CORS跨域：服务端设置Access-Control-Allow-Origin响应头，允许指定域名跨域，是线上最常用方案。2.本地代理跨域（开发环境）：Vue、React项目中配置webpack/vite代理，本地请求转发目标服务器，规避浏览器跨域限制。3.JSONP跨域：利用script标签不受同源策略限制的特性实现跨域，仅支持GET请求，兼容性好但功能有限。4.Nginx反向代理：通过Nginx配置转发请求，统一域名端口，实现跨域请求。5.postMessage：用于不同窗口、iframe之间的跨域数据通信，适用于页面嵌套场景。四、编程题（共1题，18分）题目：手写JavaScript防抖函数，要求可设置立即执行和延迟执行两种模式，附带详细注释。需求说明：1.防抖核心：频繁触发函数时，仅在指定间隔内无再次触发时，才执行一次；2.支持immediate参数，true为立即执行，false为延迟执行；3.支持取消防抖功能。详细答案（可直接运行）：javascript

/**

*防抖函数

*@param{Function}fn-需要防抖的目标函数

*@param{number}delay-防抖延迟时间（毫秒）

*@param{boolean}[immediate=false]-是否立即执行，默认false延迟执行

*@returns{Function}防抖后的函数

*/

functiondebounce(fn,delay,immediate=false){

//保存定时器标识

lettimer=null;

//返回防抖后的执行函数

constdebounceFn=function(...args){

//每次触发先清空之前的定时器，重置计时

if(timer)clearTimeout(timer);

//判断是否立即执行

if(immediate&&!timer){

//立即执行：首次触发执行，后续频繁触发不重复执行

fn.apply(this,args);

}else{

//延迟执行：停止触发后，延迟指定时间执行

timer=setTimeout(()=>{

fn.apply(this,args);

//执行完毕清空定时器

timer=null;

},delay);

}

};

//取消防抖：清空定时器，终止本次延迟执行

debounceFn.cancel=function(){

clearTimeout(timer);

timer=null;

};

returndebounceFn;

}

//测试示例

functionhandleInput(val){

console.log('输入内容：',val);

}

//生成防抖函数，延迟500ms执行

constdebounceInput=debounce(handleInput,500);

//取消防抖调用：debounceInput.cancel();

代码解析：1.利用闭包保存定时器变量，避免全局污染，持续维护防