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

Web前端工程师笔试试题（含详细答案）考试说明：本试题适用于初级、中级Web前端工程师考核，涵盖HTML、CSS、JavaScript、浏览器原理、网络基础、Vue核心等前端核心知识点，总分100分，考试时长90分钟。题型包含选择题、填空题、简答题、编程题，答案附于文末。一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.headerC.iframeD.section2.CSS中，以下选择器优先级最高的是（）A.类选择器B.行内样式C.标签选择器D.通配符选择器3.关于CSS盒模型，下列说法正确的是（）A.standard盒模型宽度包含padding和borderB.border-box盒模型元素宽度=widthC.盒模型的margin会被计入元素实际占位宽度D.padding可以设置负值4.以下JavaScript数据类型中，属于引用类型的是（）A.StringB.NumberC.ObjectD.Undefined5.下列关于var、let、const的说法，错误的是（）A.var存在变量提升，没有块级作用域B.let和const存在暂时性死区C.const声明的变量不可修改D.let声明的变量可以重复声明6.执行代码console.log(1+'2'+3)的输出结果是（）A.6B.123C.15D.337.以下方法中，不会改变原数组的是（）A.spliceB.pushC.mapD.reverse8.关于JS闭包，下列描述正确的是（）A.闭包会造成全局变量污染B.闭包可以访问外层函数的变量，外层函数执行结束后变量不会销毁C.闭包无法实现变量私有化D.闭包执行速度更快9.浏览器的回流和重绘，说法正确的是（）A.重绘一定会触发回流B.回流一定会触发重绘C.修改元素颜色会触发回流D.回流的性能消耗远小于重绘10.以下HTTP请求方法中，用于资源删除的是（）A.POSTB.PUTC.DELETED.PATCH11.跨域请求中，以下哪种情况不属于跨域（）A.域名不同B.端口不同C.协议不同D.同一域名不同页面12.Vue中，v-model的底层原理是（）A.v-bind绑定属性+v-on监听事件B.单向数据绑定C.组件自动监听数据变化D.生命周期钩子函数监听13.以下不属于Vue生命周期钩子的是（）A.createdB.mountedC.updatedD.beforeSend14.关于JS原型链，说法错误的是（）A.所有对象都有__proto__属性B.函数拥有prototype属性C.原型链的顶端是OtotypeD.null拥有原型对象15.以下事件流顺序正确的是（）A.事件捕获→事件冒泡→目标阶段B.事件捕获→目标阶段→事件冒泡C.事件冒泡→目标阶段→事件捕获D.目标阶段→事件捕获→事件冒泡二、填空题（共10空，每空2分，共20分）1.HTML中，________属性用于设置元素的自定义数据属性。2.CSS中，实现元素水平垂直居中，弹性布局最常用的属性组合是justify-content:center和________。3.JavaScript中，判断数组的精准方法是________。4.异步编程的三种主要方案：回调函数、________、________。5.阻止事件冒泡的方法是________，阻止默认事件的方法是________。6.HTTP状态码201表示________，403表示________。7.Vue中，实现父子组件双向绑定可以使用________修饰符。三、简答题（共5题，每题6分，共30分）1.简述HTML、CSS、JavaScript三者的作用和区别。2.讲讲你对CSS浮动的理解，以及浮动产生的问题和清除浮动的常用方法。3.简述JS中同步和异步的区别，以及常见的异步场景。4.什么是跨域？前端常用的跨域解决方案有哪些？5.简述Vue中computed和watch的区别和使用场景。四、编程题（共2题，每题10分，共20分）1.手写JavaScript防抖函数，要求可设置立即执行和延迟执行。2.手写一个深拷贝函数，能够处理普通对象、数组，规避循环引用问题。参考答案及详细解析一、单项选择题答案及解析1.C解析：iframe是HTML4传统标签，用于内嵌网页；article、header、section均为HTML5新增语义化标签。2.B解析：CSS优先级排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器。3.B解析：standard（content-box）盒模型：元素宽度=width+padding+border；border-box盒模型：width为元素总宽度，包含padding和border；margin不占用元素宽高，可设置负值，padding无负值。4.C解析：JS基本数据类型（值类型）：String、Number、Boolean、Undefined、Null、Symbol、BigInt；引用类型：Object、Array、Function等。5.D解析：let、const存在块级作用域，不可重复声明，存在暂时性死区；var无块级作用域，可重复声明，存在变量提升；const声明的基本类型变量不可修改，引用类型可修改内部属性。6.B解析：JS加法运算中，字符串优先级更高，1+'2'拼接为'12'，再与3拼接，最终结果为'123'。7.C解析：splice、push、reverse均会直接修改原数组；map、filter、slice、concat等方法返回新数组，不修改原数组。8.B解析：闭包是内层函数访问外层函数作用域变量，外层函数执行后变量仍被保留，可实现变量私有化；缺点是容易造成内存堆积，不会污染全局变量。9.B解析：回流（重排）是元素布局位置、大小发生变化；重绘是元素样式、颜色变化，布局不变。回流一定会触发重绘，重绘不会触发回流；回流性能消耗更高。10.C解析：POST新增资源，PUT整体更新资源，DELETE删除资源，PATCH局部更新资源。11.D解析：跨域判定标准：协议、域名、端口三者任一不同即为跨域，同域名不同页面属于同源。12.A解析：v-model是语法糖，本质通过v-bind绑定数据值，v-on监听输入事件更新数据，实现双向绑定。13.D解析：beforeSend是AJAX钩子函数，不属于Vue生命周期；created、mounted、updated均为Vue核心生命周期钩子。14.D解析：null和undefined没有原型对象，原型链最终指向null。15.B解析：标准事件流三个阶段：事件捕获（从外向内）→目标阶段（触发当前元素事件）→事件冒泡（从内向外）。二、填空题答案及解析1.data-*解析：HTML自定义属性规范，通过dataset对象获取属性值。2.align-items:center解析：flex布局中，justify-content控制水平对齐，align-items控制垂直对齐。3.Array.isArray()解析：可精准判断数组类型，弥补typeof无法区分数组和对象的缺陷。4.Promise、async/await解析：JS异步迭代方案，从回调地狱到Promise链式调用，再到async/await同步化写法。5.event.stopPropagation()、event.preventDefault()6.创建资源成功、权限不足，禁止访问7..sync解析：Vue2中.sync修饰符实现父子组件属性双向绑定，Vue3使用v-model参数替代。三、简答题详细答案1.HTML、CSS、JavaScript三者的作用和区别三者是前端开发的核心三要素，各司其职、相互配合：（1）HTML：超文本标记语言，是网页的结构层，负责搭建网页骨架，定义页面标题、段落、图片、按钮等各类元素，只负责结构展示，无样式和交互；（2）CSS：层叠样式表，是网页的表现层，负责美化页面，设置元素颜色、大小、布局、动画、间距等样式，让结构化的网页更美观；（3）JavaScript：脚本语言，是网页的行为层，负责实现页面交互和动态逻辑，比如点击事件、表单验证、数据请求、动态修改页面内容、动画交互等。简单总结：HTML搭架子，CSS做美化，JS做交互。2.CSS浮动的理解、问题及清除浮动方法（1）浮动原理：float属性用于让元素脱离普通文档流，向左或向右浮动，实现横向排列布局，早期多用于多列布局；（2）浮动带来的问题：父级元素高度塌陷（子元素浮动脱离文档流，父元素无法识别子元素高度，高度变为0）、浮动元素会遮挡下方普通文档流元素、页面布局错乱；（3）常用清除浮动方法：①给父元素设置固定高度（简单但不灵活，适配性差）；②伪元素清除浮动（主流推荐）：给父元素添加clearfix类，通过::after伪元素设置content:''、display:block、clear:both；③父元素设置overflow:hidden，触发BFC块级格式化上下文，自动包裹浮动元素；④在浮动子元素末尾添加空标签，设置clear:both（冗余代码多，不推荐）。3.JS同步和异步的区别及常见异步场景（1）核心区别：同步：代码从上到下依次执行，上一行代码执行完毕后，才会执行下一行，阻塞后续代码执行；异步：代码执行不会阻塞后续逻辑，耗时任务放入异步队列，主线程继续执行同步代码，等待同步代码执行完毕后，再执行异步任务。（2）常见异步场景：定时器（setTimeout/setInterval）、AJAX网络请求、DOM事件监听、文件读写、Promise、async/await、接口请求等。4.跨域定义及前端跨域解决方案（1）跨域定义：浏览器基于同源策略的安全限制，禁止页面向协议、域名、端口任意一个不同的服务器发送请求，这种请求受限的情况就是跨域；同源策略是为了防止恶意网站窃取用户数据。（2）前端常用解决方案：①后端配置CORS跨域资源共享（主流方案，服务端设置响应头允许前端域名访问）；②开发环境配置代理（Vue、React项目中配置proxy代理，规避浏览器跨域限制）；③JSONP跨域（仅支持GET请求，利用script标签不受同源限制的特性，兼容性好）；④Nginx反向代理（线上环境常用，通过服务器转发请求，实现跨域）。5.computed和watch的区别和使用场景（1）核心区别：①计算属性computed：依赖缓存，只有依赖数据变化才会重新计算，支持双向绑定，有返回值，同步执行；②侦听器watch：无缓存，数据每次变化都会触发执行，支持异步操作，无返回值，可监听多个数据变化；（2）使用场景：computed：适用于简单数据计算、多数据联动、数据筛选过滤场景，比如总价计算、字符串格式化、数组筛选；watch：适用于数据变化后执行异步操作、复杂逻辑处理场景，比如数据变化后请求接口、监听路由变化、复杂表单联动。四、编程题详细答案1.防抖函数（支持立即执行、延迟执行）防抖核心逻辑：频繁触发事件时，只在指定时间内执行一次，延迟执行是触发后延迟n秒执行，立即执行是触发时立刻执行，后续频繁触发重置延时。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);

};

}

//使用示例

//延迟执行：输入停止500ms后执行

constdelayFn=debounce(console.log,500);

//立即执行：首次触发立刻执行，后续500ms内重复触发不执行

constimmediateFn=debounce(console.log,500,true);2.深拷贝函数（处理数组、对象、规避循环引用）核心逻辑：递归遍历对象属性，区分基本类型和引用类型，通过WeakMap缓存已拷贝对象，解决循环引用问题。javascript

functiondeepClone(obj,cache=newWeakMap()){

//处理基本类型、null、unde