Web前端校招笔试真题（含详细答案）

Web前端校招笔试真题（含详细答案）适用场景：应届毕业生校招、前端基础能力测评考试时长：90分钟满分：100分考察范围：HTML、CSS、JavaScript、ES6+、浏览器原理、网络基础、简单工程化一、单项选择题（共15题，每题2分，共30分）1.以下不属于HTML5新增标签的是（）A.articleB.headerC.iframeD.section答案：C解析：iframe是HTML旧版本就存在的内嵌框架标签，article、header、section均为HTML5新增的语义化标签，用于优化页面结构、提升可读性和SEO效果。2.CSS中，以下选择器优先级最高的是（）A.类选择器B.行内样式C.标签选择器D.通配符选择器答案：B解析：CSS优先级从高到低排序：行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符选择器。3.以下关于box-sizing属性描述正确的是（）A.content-sizing元素宽高包含padding和borderB.border-box元素宽高仅包含内容区C.border-box元素设置的宽高包含padding和border，内容区自适应缩减D.以上都不对答案：C解析：box-sizing:border-box为盒模型标准布局，设置的width/height包含内容、内边距、边框，不会撑大盒子；content-box为默认值，宽高仅对应内容区，padding和border会额外撑大元素。4.JavaScript中，以下变量声明方式存在变量提升的是（）A.letB.constC.varD.import答案：C解析：var声明的变量存在变量提升，可在声明前访问（值为undefined）；let、const存在暂时性死区，不存在变量提升，声明前访问会报错。5.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined答案：C解析：JS基本数据类型（原始类型）：String、Number、Boolean、Undefined、Null、Symbol、BigInt；Array属于引用数据类型（复杂类型）。6.关于==和===的区别，说法错误的是（）A.===严格相等，不进行隐式类型转换B.==宽松相等，会自动转换数据类型后对比C.1==true结果为falseD.1===true结果为false答案：C解析：==会触发隐式转换，布尔值true转换为数字1，因此1==true结果为true；===严格对比类型和值，类型不同直接返回false。7.ES6中，关于let和const说法正确的是（）A.const声明的变量不可修改任何内容B.let可以重复声明变量C.const声明引用类型变量时，可修改内部属性D.let、const都支持全局变量挂载到window答案：C解析：const仅锁定变量的内存地址，若声明数组、对象等引用类型，可修改其内部属性和元素；let、const不可重复声明，且不会挂载到window对象。8.以下数组方法不会改变原数组的是（）A.spliceB.pushC.mapD.reverse答案：C解析：map、filter、slice、concat等方法返回新数组，不修改原数组；splice、push、pop、reverse、sort均会改变原数组。9.浏览器中，以下事件执行顺序正确的是（）A.捕获阶段->目标阶段->冒泡阶段B.冒泡阶段->捕获阶段->目标阶段C.目标阶段->捕获阶段->冒泡阶段D.捕获阶段->冒泡阶段->目标阶段答案：A解析：DOM事件流分为三个阶段，固定执行顺序：事件捕获（从window向下传递到目标元素）、目标阶段（事件触发目标元素）、事件冒泡（从目标元素向上传递到window）。10.阻止事件冒泡的标准方法是（）A.event.preventDefault()B.event.stopPropagation()C.event.stopDefault()D.event.cancelBubble=false答案：B解析：stopPropagation()用于阻止事件冒泡；preventDefault()用于阻止元素默认行为（如a标签跳转、表单提交）；cancelBubble为旧版IE兼容写法。11.以下关于HTTP缓存，属于强缓存的是（）A.ETagB.Last-ModifiedC.Cache-ControlD.以上都不是答案：C解析：HTTP强缓存标识：Cache-Control、Expires，命中后直接读取本地缓存，不发送请求；ETag、Last-Modified属于协商缓存，需要发送请求校验。12.跨域请求中，以下哪种方式不属于前端跨域解决方案（）A.CORSB.JSONPC.后端代理D.闭包答案：D解析：闭包是JS的作用域特性，用于保存私有变量、延长作用域链，和跨域无关；CORS、JSONP、后端代理均为常用跨域解决方案。13.Promise的三种状态不包含以下哪种（）A.pendingB.resolveC.fulfilledD.rejected答案：B解析：Promise三种固定状态：pending（等待中）、fulfilled（成功）、rejected（失败）；resolve、reject是修改状态的方法，而非状态。14.以下关于flex布局说法错误的是（）A.flex-direction控制主轴方向B.justify-content控制主轴对齐方式C.align-items控制主轴对齐方式D.flex-wrap控制是否自动换行答案：C解析：align-items用于控制侧轴（交叉轴）对齐方式，justify-content控制主轴对齐方式。15.浏览器渲染流程的正确顺序是（）A.解析HTML->构建DOM树->构建CSSOM树->生成渲染树->布局->绘制B.解析HTML->生成渲染树->构建DOM树->布局->绘制C.构建CSSOM树->构建DOM树->生成渲染树->绘制->布局D.解析HTML->布局->构建DOM树->绘制答案：A解析：浏览器核心渲染流程：解析HTML生成DOM树、解析CSS生成CSSOM树、两棵树结合生成渲染树、布局（计算元素位置大小）、绘制（渲染像素到屏幕）。二、填空题（共10空，每空1分，共10分）1.HTML中，______属性用于设置元素的自定义数据属性，实现数据存储。答案：data-*2.CSS中，______属性可以实现元素垂直居中，且无需固定宽高。答案：transform+translate（或flex居中）3.JavaScript中，判断变量类型最精准的方法是______。答案：Ototype.toString.call()4.ES6中，______方法可以遍历可迭代对象（数组、Set、Map等）。答案：for...of5.阻止表单默认提交行为的方法是______。答案：event.preventDefault()6.数组去重最简单的ES6方法是借助______数据结构。答案：Set7.宏任务和微任务中，______优先级更高，会优先执行。答案：微任务8.实现防抖函数的核心是______。答案：延迟执行、频繁触发清空定时器9.HTTP1.1默认端口是______，HTTPS默认端口是______。答案：80、443三、简答题（共5题，每题6分，共30分）1.简述JS中原型和原型链的概念及作用参考答案：（1）原型：每个函数都有prototype（显式原型），每个实例对象都有__proto__（隐式原型），实例的__proto__指向构造函数的prototype；（2）原型链：当访问对象的属性或方法时，若自身不存在，会通过__proto__向上查找对应的原型对象，层层向上直到Ototype，最终指向null，这条查找链路就是原型链；（3）作用：实现属性和方法的复用，减少内存占用，是JS实现继承的核心机制。2.简述var、let、const的区别参考答案：（1）变量提升：var存在变量提升，let、const无变量提升，存在暂时性死区；（2）作用域：var为函数作用域，let、const为块级作用域（{}、if、for内部）；（3）重复声明：var允许重复声明，let、const禁止重复声明；（4）赋值规则：var、let可重复赋值，const声明后不可修改基础类型值，引用类型可修改内部属性；（5）全局挂载：var挂载到window，let、const不挂载。3.说一说浏览器的宏任务和微任务，并举出常见例子参考答案：JS是单线程语言，为解决异步任务阻塞问题，将异步任务分为宏任务和微任务，执行顺序：同步代码=>所有微任务=>一个宏任务，循环往复（事件循环）。（1）微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver；（2）宏任务（优先级低）：setTimeout、setInterval、setImmediate、AJAX请求、DOM事件。4.简述前端跨域的原因及常用解决方案参考答案：（1）跨域原因：浏览器同源策略限制，协议、域名、端口任意一个不同，即为跨域，禁止不同源页面的资源交互，用于保障浏览器安全；（2）常用解决方案：①CORS：后端配置响应头，允许指定域名跨域访问，主流解决方案；②JSONP：利用script标签不受同源限制的特性，仅支持get请求，兼容性好；③后端代理：本地前端请求本地服务，由本地服务转发请求到目标接口，绕过跨域限制；④开发环境配置代理：webpack/vite代理，仅用于本地开发。5.简述回流和重绘的区别，以及如何优化参考答案：（1）重绘：元素样式改变（颜色、透明度），不影响布局，浏览器重新绘制像素，开销较小；（2）回流（重排）：元素宽高、位置、布局改变，浏览器需要重新计算页面布局，再触发重绘，开销极大；（3）优化方案：①集中修改样式，避免频繁操作DOM；②使用文档碎片批量插入DOM节点；③频繁动画元素开启GPU加速；④避免循环内读取布局属性；⑤使用flex、transform实现动画，规避回流。四、编程题（共2题，每题15分，共30分）1.手写一个数组去重方法，兼容基础类型数组（15分）参考答案（三种常用写法，任选其一即可）javascript

//写法1：ES6Set最简写法

functionuniqueArr(arr){

return[...newSet(arr)];

}

//写法2：filter+indexOf兼容低版本浏览器

functionuniqueArr(arr){

returnarr.filter((item,index)=>{

returnarr.indexOf(item)===index;

});

}

//写法3：双层for循环基础原生写法

functionuniqueArr(arr){

letres=[];

for(leti=0;i<arr.length;i++){

letflag=true;

for(letj=0;j<res.length;j++){

if(arr[i]===res[j]){

flag=false;

break;

}

}

if(flag)res.push(arr[i]);

}

returnres;

}评分标准：实现基础去重得12分，代码简洁规范、无bug得满分15分。2.手写防抖函数（基础版+立即执行版）（15分）参考答案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);

};

}

//使用示例

constinputDebounce=debounce((e)=>{

con